redesign podcast, episode subtitle line
[mygpo.git] / mygpo / web / templates / episode.html
bloba9b4a21f41375d1dd8839bc90b7621238372d6c6
1 {% extends "base.html" %}
2 {% load url from future %}
3 {% load i18n %}
4 {% load humanize %}
5 {% load episodes %}
6 {% load devices %}
7 {% load podcasts %}
8 {% load mygpoutil %}
9 {% load time %}
10 {% load youtube %}
11 {% load flickr %}
12 {% load facebook %}
13 {% load google %}
14 {% load charts %}
15 {% load utils %}
17 {% load menu %}
18 {% block mainmenu %}{{ "/podcast/"|main_menu }}{% endblock %}
19 {% block sectionmenu %}
20 {% if podcast.title %}
21 {{ "/podcast/"|section_menu:podcast.title }}
22 {% else %}
23 {{ "/podcast/"|section_menu:"Unnamed Podcast" }}
24 {% endif %}
25 {% endblock %}
27 {% block head %}
28 {% if episode.url|is_youtube_video %}
29 <script type="text/javascript" src="/media/js/swfobject.js"></script>
30 <script type="text/javascript" src="/media/js/json2.js"></script>
31 <script type="text/javascript" src="/media/js/youtube-handler.js"></script>
32 {% endif %}
33 {% opengraph_episode episode podcast %}
34 {% google_plus_one_head %}
36 {% endblock head %}
38 {% block title %}{{ episode.title|default:"Unnamed Episode"|striptags }} - {{ podcast.title|default:"Unnamed Podcast"|striptags}}{% endblock %}
40 {% block header %}
42 {% if podcast.logo_url %}
43 <div id="podcastlogo"><a href="{% podcast_link_target podcast %}">{{ podcast|podcast_logo_big }}</a></div>
44 {% endif %}
45 <h1>
46 {{ episode.title|default:"Unnamed Episode"|striptags }}
47 <small>{{ episode.released|naturalday }}</small>
48 </h1>
49 <small class="description">
50 {% trans "from" %} {% podcast_group_link podcast %}&middot;
51 {% if not episode.outdated or "hide-outdated-urls" not in podcast.restrictions %}
52 <a href="{{episode.url}}" title="{% trans "Download" %}">
53 <i class="icon-download"></i>
54 </a>
55 {% endif %}
56 {% if episode.link and episode.link != episode.url %}&middot;
57 <a href="{{episode.link}}" title="{% trans "Website" %}">
58 <i class="icon-external-link"></i>
59 </a>
60 {% endif %}
61 {% if episode.listeners %}&middot;
62 {{ episode.listeners }} {% trans "listeners" %}
63 {% endif %}
64 </small>
66 {% endblock %}
70 {% block content %}
72 {% if episode.content or episode.description %}
73 <div class="description">
74 {% if episode.content %}
75 {{ episode.content|markdown }}
76 {% else %}
77 {{ episode.description|markdown }}
78 {% endif %}
79 </div>
80 {% endif %}
82 {% if episode.url|is_youtube_video %}
83 <div id="ytapiplayer">
84 You need Flash player 8+ and JavaScript enabled to view this video.
85 </div>
86 {% endif %}
89 {% if episode.url|is_flickr_photo %}
90 {{ episode|embed_flickr_photo }}
91 {% endif %}
93 {% if episode|is_image %}
94 <img src="{{ episode.url }}" />
95 {% endif %}
97 {% if user.is_authenticated %}
99 {% if is_favorite %}
100 <a class="btn" href="{% episode_link_target episode podcast "episode-fav" %}">
101 <i class="icon-star"></i> {% trans "Remove Favorite" %}
102 </a>
103 {% else %}
104 <a class="btn" href="{% episode_link_target episode podcast "episode-fav" %}">
105 <i class="icon-star-empty"></i> {% trans "Favorite" %}
106 </a>
107 {% endif %}
109 {% if played_parts %}
110 <h3>Already played</h3>
111 {{ played_parts|episode_heatmap_visualization }}
112 {% endif %}
114 {% endif %}
116 <div class="pagination">
117 <ul>
118 {% if prev %}
119 <li>
120 {% episode_link prev podcast %}
121 </li>
122 {% endif %}
123 <li>
124 <a href="{% podcast_link_target podcast %}#episodes">{% trans "..." %}</a>
125 </li>
126 {% if next %}
127 <li>
128 {% episode_link next podcast %}
129 </li>
130 {% endif %}
131 </ul>
132 </div>
134 {% endblock %}
137 {% block sidebar %}
139 <div class="well">
141 <h4>Share</h4>
143 {% google_plus_one_button %}
144 {% fb_like_episode episode podcast %}
145 </div>
149 {% if user.is_authenticated or chapters %}
150 <div class="well">
152 <h4>{% trans "Chapters" %}</h4>
154 <table class="list">
155 <tr>
156 <th></th>
157 <th>{% trans "Ad?" %}</th>
158 <th>{% trans "Label" %}</th>
159 <th></td>
160 </tr>
162 {% for chapter in chapters %}
163 <tr {% if chapter.is_own %}class="own-chapter"{% endif %} >
164 <td>{{ chapter.start|sec_to_time|time:"H:i:s" }}{% if chapter.start != chapter.end %} - {{ chapter.end|sec_to_time|time:"H:i:s" }}{% endif %}</td>
165 <td>{% if chapter.advertisement %}Yes{% endif %}</td>
166 <td>{{ chapter.label }}</strong>
167 <td>
168 {% if chapter.is_own %}
169 <a href="{% episode_link_target episode "remove-chapter" chapter.start chapter.end %}">
170 <img src="/media/unsubscribe.png" alt="{% trans "Remove" %}" />
171 </a>
172 {% endif %}
173 </td>
174 </tr>
175 {% endfor %}
176 {% if user.is_authenticated %}
177 <tr>
178 <form class="form-inline" action="{% episode_link_target episode podcast "add-chapter" %}" method="POST">
179 {% csrf_token %}
180 <td>
181 <input type="text" name="start" id="start" class="time" placeholder="h:mm:ss"/> -
182 <input type="text" name="end" id="end" class="time" placeholder="h:mm:ss"/>
183 </td>
184 <td>
185 <input type="checkbox" name="advertisement" />
186 </td>
187 <td>
188 <input class="input-small" type="text" name="label" />
189 </td>
190 <td>
191 <input class="btn" type="submit" value="{% trans "Add" %}" />
192 </td>
193 </form>
194 </tr>
195 {% endif %}
196 </table>
197 </div>
198 {% endif %}
200 {% if user.is_authenticated or history %}
201 <div class="well">
202 <h4>{% trans "History" %}</h4>
203 <table class="list">
204 <tr>
205 <th>{% trans "Time" %}</th>
206 <th>{% trans "Action" %}</th>
207 <th>{% trans "Device" %}</th>
208 <th></th>
209 </tr>
211 {% for s in history %}
212 <tr>
213 <td><abbr title="{{ s.timestamp }}">{{ s.timestamp|naturalday }}</abbr></td>
214 <td style="text-align: center;">{{ s|episode_status_icon }}</td>
215 <td>
216 {% if s.device %}
217 <a href="{% url "device" s.device.uid %}">{{ s.device|device_icon }} {{ s.device.name|striptags }}</a>
218 {% endif %}
219 </td>
220 <td>{% if s.started or s.playmark %}{{s.started|format_time }} - {% endif %}
221 {% if s.playmark %}{{ s.playmark|format_time }}{% endif %}
222 </td>
223 </tr>
224 {% endfor %}
226 {% if user.is_authenticated %}
227 <tr>
228 <form action="{% episode_link_target episode podcast "add-episode-action" %}" method="POST">
229 {% csrf_token %}
230 <td>
231 <input class="input-small" type="text" id="timestamp" name="timestamp" placeholder="empty = now" /></td>
232 <td>
233 <select class="input-small" name="action">
234 {% for action, str in actions %}
235 <option value="{{ action }}">{{ str }}</option>
236 {% endfor %}
237 </select>
238 </td>
239 <td>
240 <select class="input-small" name="device">
241 <option value=""></option>
242 {% for device_id, name in devices.items %}
243 <option value="{{ device_id }}">{{ name }}</option>
244 {% endfor %}
245 </select>
246 </td>
247 <td>
248 <input class="btn" type="submit" value="{% trans "Add" %}" />
249 </td>
250 </form>
251 </tr>
252 {% endif %}
253 </table>
254 </div>
255 {% endif %}
257 {% endblock %}
260 {% block javascript %}
261 <script type="text/javascript">
263 {% if episode.url|is_youtube_video %}
264 {% embed_youtube_video podcast episode user %}
265 {% endif %}
267 </script>
268 {% endblock javascript %}
271 {% block ads %}
272 {% comment %}disable ads on episode pages{% endcomment %}
273 {% endblock %}