add view to embed a sound in another site

panikweb/paniktags/templatetags/paniktags.py

@@ -26,11 +26,12 @@ def zip_lists(a, b):
     return zip(a, b)
 
 @register.inclusion_tag('includes/audio.html', takes_context=True)
-def audio(context, sound=None, display_fragment_name=False):
+def audio(context, sound=None, embed=False, display_fragment_name=False):
     return {
         'episode': context.get('episode'),
         'sound': sound,
         'display_fragment_name': display_fragment_name,
+        'embed': embed,
     }
 
 @register.inclusion_tag('listen/nav.html', takes_context=True)

panikweb/urls.py

@@ -15,6 +15,11 @@ urlpatterns = patterns('',
     url(r'^emissions/$', 'panikweb.views.emissions', name='emissions'),
     url(r'^emissions/(?P<slug>[\w,-]+)/episodes/$', 'panikweb.views.emissionEpisodes', name='emissionEpisodes'),
     url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<slug>[\w,-]+)/$', 'panikweb.views.episode', name='episode-view'),
+    url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<slug>[\w,-]+)/$', 'panikweb.views.episode', name='episode-view'),
+    url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<episode_slug>[\w,-]+)/embed/(?P<pk>\d+)/$',
+        'panikweb.views.soundfile_embed', name='soundfile-embed-view'),
+    url(r'^emissions/(?P<emission_slug>[\w,-]+)/(?P<episode_slug>[\w,-]+)/dlg-embed/(?P<pk>\d+)/$',
+        'panikweb.views.soundfile_dlg_embed', name='soundfile-dialog-embed-view'),
     url(r'^emissions/(?P<slug>[\w,-]+)/$', 'panikweb.views.emission', name='emission-view'),
     url(r'^ckeditor/', include('ckeditor.urls')),
     url(r'^emissions/archives$', 'panikweb.views.emissionsArchives', name='emissionsArchives'),

panikweb/views.py

@@ -147,6 +147,39 @@ class EmissionEpisodesDetailView(DetailView, EmissionMixin):
         return context
 emissionEpisodes = EmissionEpisodesDetailView.as_view()
 
+
+class SoundFileEmbedView(DetailView):
+    model = SoundFile
+    template_name = 'soundfiles/embed.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(SoundFileEmbedView, self).get_context_data(**kwargs)
+        if self.kwargs.get('episode_slug') != self.object.episode.slug:
+            raise Http404()
+        if self.kwargs.get('emission_slug') != self.object.episode.emission.slug:
+            raise Http404()
+        context['episode'] = self.object.episode
+        return context
+soundfile_embed = SoundFileEmbedView.as_view()
+
+
+class SoundFileDialogEmbedView(DetailView):
+    model = SoundFile
+    template_name = 'soundfiles/dialog-embed.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(SoundFileDialogEmbedView, self).get_context_data(**kwargs)
+        if self.kwargs.get('episode_slug') != self.object.episode.slug:
+            raise Http404()
+        if self.kwargs.get('emission_slug') != self.object.episode.emission.slug:
+            raise Http404()
+        context['episode'] = self.object.episode
+        context['site_url'] = self.request.build_absolute_uri('/').strip('/')
+        return context
+soundfile_dlg_embed = SoundFileDialogEmbedView.as_view()
+
+
+
 class ProgramView(TemplateView):
     template_name = 'program.html'
 

panikweb_templates/static/css/specifics.css

@@ -904,6 +904,14 @@ h1.top#frequence {
 .episode.resume .sound.right .icon-download{
 	display:block;
 }
+
+.big.icon-pause,
+.big.icon-stop,
+.big.icon-share {
+	display: inline-block;
+	vertical-align: middle;
+}
+
 .episode.detail .logo.right{
 	max-width:50%;
 }
@@ -1630,6 +1638,7 @@ div.gallery img {
 	border: 1px solid #333;
 }
 
+div#dialog-background,
 div.gallery div.first {
 	position: fixed;
 	top: 0;
@@ -1731,3 +1740,69 @@ div.topikcellcontent h2 {
 .program-week img.smooth {
 	padding-bottom: 0;
 }
+
+div#dialog-background {
+	display: flex;
+}
+div#dialog-embed {
+	position: relative;
+	background: white;
+	width: 50%;
+	margin: auto;
+	text-align: left;
+	padding: 1ex;
+}
+
+div#dialog-embed textarea {
+	width: 100%;
+	max-width: none;
+}
+
+div#dialog-embed #close-button {
+	position: absolute;
+	right: 1ex;
+}
+
+body#embed {
+	min-height: auto !important;
+	margin: 0;
+	background: white 0 10px no-repeat url(../img/logoPanikBW.png);
+}
+
+body#embed #Main {
+	background: transparent;
+}
+
+body#embed #Commons,
+body#embed #metaNav,
+body#embed #Footer,
+body#embed #userLog,
+body#embed #Player {
+	display: none;
+}
+
+body#embed #Changing {
+	float: none;
+	width: auto;
+}
+
+body#embed #Main > .wrapper {
+	padding: 0;
+}
+
+body#embed .logo {
+	padding-top: 4px;
+}
+
+body#embed ul.custom {
+	display: inline-block;
+	width: calc(100% - 70px);
+}
+
+body#embed ul.custom .soundfile-info {
+	padding: 1ex;
+}
+
+body#embed span.fragment-title {
+	font-weight: normal;
+}

panikweb_templates/static/css/type.css

@@ -86,9 +86,9 @@
 	/*font-size:1.3em;*/
 }
 .resymbol{
-	vertical-align:middle !important;
-	display:inline-block !important;
-	font-family: 'Symbols' !important;
+	vertical-align: middle;
+	display: inline-block;
+	font-family: 'Symbols';
 }
 .resymbol.big, .icons.big{
 	font-size:2em;

panikweb_templates/static/js/specifics.js

@@ -355,6 +355,16 @@ $(function() {
 			}else if($(this).attr('data-player-action') == "playAudio"){
 				$localList.playlist("registerAudio",audio,doLog(audio.attr('title')+' will play soon.','ok'));
 				$localList.playlist("playSoundId", sound_id);
+				if ($(this).parent().find('.icon-pause').length) {
+					$(this).hide();
+					$(this).parent().find('.icon-pause').show();
+				}
+			}else if ($(this).attr('data-player-action') == "pauseSounds") {
+				if ($(this).parent().find('.icon-play-sign').length) {
+					$(this).hide();
+					$(this).parent().find('.icon-play-sign').show();
+				}
+				$localList.playlist($(this).attr('data-player-action'));
 			}else{
 				$localList.playlist($(this).attr('data-player-action'));
 			}
@@ -412,6 +422,16 @@ $(function() {
 			}
 		});
 
+		$('[data-popup-href]').on('click', function() {
+			$.ajax({
+				url: $(this).data('popup-href'),
+				success: function (html, textStatus, jqXhr) {
+					$(html).appendTo($('body'));
+				}
+			});
+			return false;
+		});
+
 		if ($('input#id_q').val() == '') {
 			$('input#id_q').focus();
 		}

panikweb_templates/templates/base.html

@@ -36,7 +36,7 @@
     {% block extrascripts %}{% endblock %}
 </head>
 
-<body id="{{sectionName}}" class="section-{{sectionName}}">
+<body {% block bodyattr %}id="{{sectionName}}" class="section-{{sectionName}}"{% endblock %}>
 	<div id="All">
 		{% block meta %}<div id="metaNav">{% metanav active=sectionName %}</div>{% endblock %}
 		<div id="Commons" class="cf" >

panikweb_templates/templates/includes/audio.html

 {% load soundfiles paniktags %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
 	<div class="audio">
+		{% if not embed %}
 		<button class="resymbol icon-plus-sign big"
 			title="Add to playlist" 
 			data-player-audio="Audio-{{ sound.file.url|slugify }}" 
 			data-player-action="registerAudio" 
 			id="addToPlaylist-{{ sound.file.url|slugify }}"
 			></button>
+		{% endif %}
 		<button class="resymbol icon-play-sign big"
 			title="Play" 
 			data-player-audio="Audio-{{ sound.file.url|slugify }}" 
 			data-player-action="playAudio" 
 			></button>
-			
+		{% if embed %}
+		<button class="icons icon-pause big"
+			title="Pause"
+			style="display: none;"
+			data-player-audio="Audio-{{ sound.file.url|slugify }}" 
+			data-player-action="pauseSounds" 
+			></button>
+		{% endif %}
 		<button class="resymbol icon-download big"
 			title="Download file" 
 			onclick="$(this).next().toggleClass('hidden-download-links');return false;"
@@ -29,6 +38,12 @@
 			</a>
 			{% endif %}
 		</div>
+		{% if not embed %}
+		<button class="icon-share icons big"
+			title="Embed"
+   			data-popup-href="{% url 'soundfile-dialog-embed-view' emission_slug=sound.episode.emission.slug episode_slug=sound.episode.slug pk=sound.pk %}"
+			></button>
+		{% endif %}
 	</div>
 	{% if display_fragment_name %}
 	<div class="fragment-name">

panikweb_templates/templates/soundfiles/dialog-embed.html

+{% load i18n %}
+<div id="dialog-background">
+<div id="dialog-embed">
+<button id="close-button" onclick="$(&quot;#dialog-background&quot;).remove();">x</button>
+        <h2>{% trans 'Embed '%}</h2>
+<p>
+Copier/coller le code ci-dessous :
+</p>
+
+        <textarea rows="4" onclick="$(this).select();">&lt;iframe height="80" width="100%" scrolling="no" frameborder="no" src="{{site_url}}{% url 'soundfile-embed-view' emission_slug=object.episode.emission.slug episode_slug=object.episode.slug pk=object.pk %}" &gt;&lt;/iframe&gt;</textarea>
+
+        <h3>Preview</h3>
+        <iframe height="80" width="100%" scrolling="no" frameborder="no" src="{% url 'soundfile-embed-view' emission_slug=object.episode.emission.slug episode_slug=object.episode.slug pk=object.pk %}"></iframe>
+</div>
+</div>

panikweb_templates/templates/soundfiles/embed.html

+{% extends "base.html" %}
+{% load thumbnail paniktags static %}
+
+{% block bodyattr %}id="embed"{% endblock %}
+{% block title %}{{ episode.emission.title }}{% endblock %}
+
+{% block main %}
+
+<div class="wrapper extra-soundfiles soundcell">
+	<div class="logo">
+		{% if episode.image %}
+			{% thumbnail episode.image "60x60" crop="50% 25%" as im %}
+			<img width="60" height="60" src="{{im.url}}"/>
+			{% endthumbnail %}
+		{% elif episode.emission.image %}
+			{% thumbnail episode.emission.image "60x60" crop="50% 25%" as im %}
+			<img width="60" height="60" src="{{im.url}}"/>
+			{% endthumbnail %}
+		{% else %}
+			<img class="smooth"  style="width:60px;" src="{% static "img/emission.png" %}"/>
+		{% endif %}
+	</div>
+<ul class="custom">
+<li>
+  <div class="soundfile-info"><strong>
+    <a target="_blank" href="{% url 'emission-view' slug=episode.emission.slug%}">{{ episode.emission.title }}</a> -
+    <a target="_blank" href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">{{ episode.title }}</a>
+    {% if object.fragment and object.title %}<span class="fragment-title">- {{ object.title }}</span>{% endif %}
+          </strong>
+  </div>
+  {% audio sound=object embed=True %}
+</li>
+</ul>
+</div>
+{% endblock %}
+