Add a new feed view, for in-browser feed viewing

README.md

@@ -110,4 +110,5 @@ This work uses code from:
 
 - [Bulma](https://bulma.io), which is copyright 2018 Jeremy Thomas and whose code is released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
 - [clipboard.js](https://clipboardjs.com), which is copyright Zeno Rocha, and whose code is released under [the MIT License](http://zenorocha.mit-license.org/)
-- [jsTimezoneDetect](https://bitbucket.org/pellepim/jstimezonedetect) is freely distributable under the terms of the [MIT license](https://github.com/moment/moment/blob/develop/LICENSE).
+- [jsTimezoneDetect](https://bitbucket.org/pellepim/jstimezonedetect) is freely distributable under the terms of the [MIT license](https://bitbucket.org/pellepim/jstimezonedetect/raw/77effaefe1d26be9f2ddffab82a1d2bc112fb0b4/LICENCE.txt).
+- [Plyr](https://plyr.io/#audio) which is copyright Sam Potts, and is freely distributable under the terms of the [MIT license](https://raw.githubusercontent.com/sampotts/plyr/master/license.md).

castrewinder/static/css/style.css

@@ -114,4 +114,17 @@ input[type="number"] {
   .field-body {
       flex-grow: 2;
   }
+}
+
+/* FEED */
+@media screen and (min-width: 769px), print {
+  section.feed_episodes .episode_summary img {
+    float: left;
+    max-width: 6em;
+    margin-right: 1em;
+  }
+}
+.js-player {
+  padding: 0;
+  flex-grow: 3;
 }

castrewinder/templates/feed.html

@@ -0,0 +1,64 @@
+{% extends 'layout.html' %}
+
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/plyr.css') }}">
+{% endblock %}
+
+{% block title %}{{ feed.title }}{% endblock %}
+
+{% block content %}
+<div class="content">
+
+  <h1 class="is-size-3 ">{{ feed.title }}</h1>
+
+  <article class="media is-block-mobile feed_description">
+    {% if 'image' in feed and 'href' in feed['image'] %}
+    <figure class="media-left">
+      <p class="image is-128x128">
+        <img src="{{ feed['image']['href'] }}">
+      </p>
+    </figure>
+    {% endif %}
+
+    <div class="media-content">
+      <div class="content">
+        <p>
+          <small><a href="{{ feed.link }}">{{ _('Podcast website') }}</a></small> •
+          <small><a href="{{ feed_url }}">{{ _('Feed URL') }}</a></small> •
+          <small>
+          {% if 'copyright' in feed %}
+            ©  {{ feed['copyright'] }}
+          {% elif 'author' in feed and 'name' in feed['author'] %}
+            ©  {{ feed['author']['name'] }}
+          {% elif 'author' in feed %}
+            ©  {{ feed['author'] }}
+          {% endif %}
+          </small>
+          <br>
+          <span id="feed_content">
+            {% if 'summary' in feed and feed['summary'] != ''  %}
+              {{ feed['summary'] }}
+            {% elif 'description' in feed and feed['description'] != ''  %}
+              {{ feed['description'] }}
+            {% elif 'subtitle' in feed and feed['subtitle'] != ''  %}
+              {{ feed['subtitle'] }}
+            {% else  %}
+              {{ 'This feed was generated by Cast Rewinder on %s' % request.host_url }}
+            {% endif %}
+          </span>
+        </p>
+      </div>
+    </div>
+  </article>
+
+  {% include 'partials/feed_episode.html' %}
+
+</div>
+{% endblock %}
+
+{% block js_code %}
+<script src="{{ url_for('static', filename='js/plyr.min.js') }}" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript" charset="utf-8">
+  const players = Plyr.setup('audio', {'iconUrl':'{{ url_for('static', filename='img/plyr.svg') }}'});
+</script>
+{% endblock %}

castrewinder/templates/index.html

@@ -4,8 +4,8 @@
 
 {% block content %}
 
-  {% include 'index_content.' + g.locale + '.html' %}
-  {% include 'index_form.html' %}
+  {% include 'partials/index_content.' + g.locale + '.html' %}
+  {% include 'partials/form.html' %}
 
 {% endblock %}
 
@@ -57,85 +57,6 @@
     }
     return true;
   }
-
-
-{% if request_json is defined %}
-
-  // event handler
-  function reqListener () {
-    var response = JSON.parse(this.response);
-    if (typeof response['error'] !== 'undefined') {
-      document.querySelector('#loading_content').classList.toggle('is-visible');
-
-      var header = document.querySelector('header.header');
-      var error_content = '<div class="container"><div class="columns is-centered"><div class="column is-three-fifths"><ul class=flashes><li class="notification is-danger"><strong>' + response['error'] + '</strong></li></ul></div></div></div>';
-
-      header.insertAdjacentHTML('beforeend',error_content);
-
-      console.log(response['error']);
-    }
-    else if (typeof response['feed_id'] !== 'undefined') {
-      document.querySelector('#loading_content').classList.toggle('is-visible');
-      document.querySelector('#loaded_content').classList.toggle('is-visible');
-
-
-      var value = "{{ request.host_url }}" + response['feed_id'] + "{{ request_json['end_url'] }}";
-
-      document.querySelector('#loaded_content #element_to_copy').value = value.replace(/\+/g, '%2B');
-
-      var clipboard = new ClipboardJS('#copy_btn');
-
-      document.querySelector('a[href="#how-to-subscribe"]').addEventListener("click", function(e) {
-        e.preventDefault();
-        document.querySelector('#how-to-subscribe').classList.toggle('is-visible');
-      });
-
-      // filling the blanks:
-
-      if (typeof response['content']['image']['href'] !== 'undefined' && response['content']['image']['href'].length > 0) {
-        document.querySelector('#loaded_content #feed_image').src = response['content']['image']['href'];
-      } else {
-        document.querySelector('figure.media-left').style.display = 'none';
-      }
-
-      document.querySelector('#loaded_content #feed_title').innerHTML = response['content']['title'];
-      document.querySelector('#loaded_content #feed_url').href = response['content']['link'];
-
-      if (typeof response['content']['description'] !== 'undefined') {
-        document.querySelector('#loaded_content #feed_content').innerHTML = response['content']['description'];
-      } else if (typeof response['content']['summary'] !== 'undefined') {
-        document.querySelector('#loaded_content #feed_content').innerHTML = response['content']['summary'];
-      } else if (typeof response['content']['subtitle'] !== 'undefined') {
-        document.querySelector('#loaded_content #feed_content').innerHTML = response['content']['subtitle'];
-      }
-
-      if (typeof response['content']['copyright'] !== 'undefined') {
-        document.querySelector('#loaded_content #feed_copyright').innerHTML = '© ' + response['content']['copyright'];
-      } else if  (typeof response['content']['author'] !== 'undefined' && typeof response['content']['author']['name'] !== 'undefined') {
-        document.querySelector('#loaded_content #feed_copyright').innerHTML = '© ' + response['content']['author']['name'];
-      } else if  (typeof response['content']['author'] !== 'undefined') {
-        document.querySelector('#loaded_content #feed_copyright').innerHTML = '© ' + response['content']['author'];
-      } else {
-        document.querySelector('#loaded_content #feed_copyright').style.display = 'none';
-      }
-
-    } //endif
-
-  }
-
-  // get new XHR object
-  var xhr = new XMLHttpRequest();
-
-  xhr.addEventListener( 'load', reqListener );
-
-  xhr.open('PUT', './ajax/geturl');
-  var jsonData = JSON.stringify({{ request_json|tojson|safe }});
-
-  // send it off
-  xhr.send(jsonData);
-
-{% endif %}
-
 
 
 })();

castrewinder/templates/index_form.html

@@ -1,5 +1,5 @@
 
-<form action="" method="post">
+<form action="/result" method="post">
 
   <div class="field is-horizontal">
     <div class="field-label is-medium">

castrewinder/templates/layout.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/bulma.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+  {% block additional_css %}{% endblock %}
 
   <title>{% block title %}{% endblock %} - {{ config['WEBSITE_NAME'] }}</title>
 

castrewinder/templates/partials/feed_episode.html

@@ -0,0 +1,51 @@
+  <section class="feed_episodes">
+
+    {% for episode in feed_entries %}
+      {%- set ns = {'enclosure_url':'', 'enclosure_type':'', 'enclosure_size':''} -%}
+
+      {%- if 'media_content' in episode and 'url' in episode['media_content'][0] -%}
+        {%- if ns.update({ 'enclosure_url':episode['media_content'][0]['url'], 'enclosure_type':episode['media_content'][0]['type'], 'enclosure_size':episode['media_content'][0]['filesize'] }) -%}{%- endif -%}
+
+      {%- elif 'enclosure' in episode and 'url' in episode['enclosure'][0] -%}
+        {%- if ns.update({ 'enclosure_url':episode['enclosure'][0]['url'], 'enclosure_type':episode['enclosure'][0]['type'], 'enclosure_size':episode['enclosure'][0]['filesize'] }) -%}{%- endif -%}
+
+      {%- elif 'links' in episode -%}
+        {%- for link in episode['links'] -%}
+          {%- if 'rel' in link and link['rel'] == 'enclosure' -%}
+            {%- if ns.update({ 'enclosure_url':link['href'], 'enclosure_type':link['type'], 'enclosure_size':link['length'] }) -%}{%- endif -%}
+          {%- endif -%}
+        {%- endfor -%}
+
+      {%- endif -%}
+
+    <hr>
+    <article class="card episode" id="castrewinder_{{ "%s_%s" % (request.url, episode.get('id', '')) }}">
+      <div class="card-content">
+        <h2 class="is-size-5 title">{{ episode['title'] }}</h2>
+        {#% if 'subtitle' in episode %}
+        <p class="is-size-7 subtitle">{{ episode['subtitle'] }}</p>
+        {% endif %#}
+        <div class="episode_summary is-clearfix">
+          {#%- if 'image' in episode and episode['image']['href'] -%}
+            <img src="{{ episode['image']['href'] }}" alt="" />
+          {%- endif -%#}
+          {{ episode.summary|safe }}
+        </div>
+      </div>
+      <div class="card-footer">
+        <div class="card-footer-item has-text-centered"><a href="{{ ns.enclosure_url }}"  class="is-size-7">💽 {{ _('Download episode') }}</a></div>
+        <div class="card-footer-item js-player">
+          <audio controls src="{{ ns.enclosure_url }}"
+            type="{{ ns.enclosure_type }}"
+            preload="metadata"
+            data-plyr-config="{ 'title': '{{ episode['title'] }}' }">
+            {{ _('Your browser doesn’t support HTML Audio.') }}
+          </audio>
+        </div>
+        <div class="card-footer-item has-text-centered"><a href="{{ episode['link'] }}"  class="is-size-7">🔗 {{ _('Episode permalink') }}</a></div>
+      </div>
+    </article>
+
+    {% endfor %}
+
+  </section>