Merge pull request #1089 from ecds/feature/homepage-video

Add featured video as wagtail fields, connect to homepage

apps/cms/migrations/0007_homepage_featured_video.py

@@ -0,0 +1,37 @@
+# Generated by Django 3.2.25 on 2024-09-23 19:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("cms", "0006_create_footermenu"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="homepage",
+            name="featured_video_tagline",
+            field=models.CharField(
+                blank=True,
+                help_text="A short description or tagline for the featured video",
+                max_length=255,
+            ),
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="featured_video_title",
+            field=models.CharField(
+                blank=True, help_text="Title of the featured video", max_length=255
+            ),
+        ),
+        migrations.AddField(
+            model_name="homepage",
+            name="featured_video_url",
+            field=models.URLField(
+                blank=True,
+                help_text="Vimeo link to the featured video (e.g. https://vimeo.com/76979871, only Vimeo supported)",
+            ),
+        ),
+    ]

apps/cms/models.py

@@ -274,6 +274,15 @@ class HomePage(Page):
     featured_story_url = models.URLField(
         help_text="Link to the featured story", blank=True
     )
+    featured_video_url = models.URLField(
+        help_text="Vimeo link to the featured video (e.g. https://vimeo.com/76979871, only Vimeo supported)", blank=True
+    )
+    featured_video_title = models.CharField(
+        help_text="Title of the featured video", blank=True, max_length=255
+    )
+    featured_video_tagline = models.CharField(
+        help_text="A short description or tagline for the featured video", blank=True, max_length=255
+    )
 
     content_panels = Page.content_panels + [
         FieldPanel('tagline', classname="full"),
@@ -288,6 +297,11 @@ class HomePage(Page):
             FieldPanel('featured_story_image'),
             FieldPanel('featured_story_url'),
         ], heading='Featured story (optional)'),
+        MultiFieldPanel(children=[
+            FieldPanel('featured_video_url'),
+            FieldPanel('featured_video_title'),
+            FieldPanel('featured_video_tagline'),
+        ], heading='Featured video (optional)'),
     ]
 
     def featured_volume_count(self):
@@ -299,26 +313,6 @@ def has_featured_volume(self):
     def get_context(self, request):
         """Function that returns context"""
         context = super().get_context(request)
-        query_set = self.volumes
-
-        # context['volumespage'] = query_set.all
-        # context['user_annotation'] = UserAnnotation.objects.filter(owner_id=request.user.id)
         context['volumesurl'] = Page.objects.type(VolumesPage).first()
         context['collectionsurl'] = Page.objects.type(CollectionsPage).first()
-        # annocount_list = []
-        # canvaslist = []
-        # for volume in query_set:
-        #     user_annotation_count = UserAnnotation.objects.filter(
-        #         owner_id=request.user.id
-        #     ).filter(
-        #         canvas__manifest__id=volume.id
-        #     ).count()
-        #     annocount_list.append({volume.pid: user_annotation_count})
-        #     context['user_annotation_count'] = annocount_list
-        #     canvasquery = Canvas.objects.filter(is_starting_page=1).filter(manifest__id=volume.id)
-        #     canvasquery2 = list(canvasquery)
-        #     canvaslist.append({volume.pid: canvasquery2})
-        #     context['firstthumbnail'] = canvaslist
-        # value = 0
-        # context['value'] = value
         return context

apps/readux/templatetags/readux_extras.py

@@ -1,4 +1,4 @@
-from collections import OrderedDict
+import re
 from django.template import Library
 
 register = Library()
@@ -77,3 +77,10 @@ def group_by_canvas(inner_hits, limit=3):
 def get_headers(block_list):
     # filter to get just the headers in a wagtail page, in order to render a table of contents
     return list(filter(lambda b: b.value and b.block_type == "heading_block", block_list))
+
+
+@register.filter
+def vimeo_embed_url(vimeo_url):
+    # get the embed url from a vimeo link
+    # i.e. https://vimeo.com/76979871 --> https://player.vimeo.com/video/76979871
+    return re.sub(r"vimeo\.com\/(\d+)", r"player.vimeo.com/video/\1", vimeo_url)

apps/templates/_home/_video.html

@@ -1,60 +1,24 @@
+{% load static readux_extras %}
+
 <div class="uk-section uk-section-default uk-padding-remove">
     <div class="uk-container-expand">
         <div class="video-section">
             <div class="video-container" id="videoContainer">
-                <img src="https://i.vimeocdn.com/video/452001751_640.jpg" alt="Vimeo Video Thumbnail" class="video-thumbnail" id="videoThumbnail">
+                <img src="{% static 'images/video_thumbnail.jpg' %}" alt="Vimeo Video Thumbnail" class="video-thumbnail" id="videoThumbnail">
                 <div class="transparent-overlay" id="transparentOverlay"></div>
-                <iframe src="https://player.vimeo.com/video/76979871" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen id="vimeoPlayer"></iframe>
+                <iframe src="{{ page.featured_video_url|vimeo_embed_url }}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen id="vimeoPlayer"></iframe>
                 <div class="video-overlay" id="videoOverlay">
-                    <h1 style="color:white; font-size: 3rem; font-weight: bold; margin-bottom: 2rem;">Watch the Video</h1>
+                    <h1 style="color:white; font-size: 3rem; font-weight: bold; margin-bottom: 2rem;">
+                        {{ page.featured_video_title|default:"Watch the Video" }}
+                    </h1>
                     <div class="play-icon" uk-icon="icon: play-circle; ratio: 6" style="margin-bottom: 2rem;"></div>
-                    <div style="color:white; font-size: 1.5rem;">Readux is an open-source platform and a web-based space to engage with digitized print materials.</div>
+                    {% if page.featured_video_tagline %}
+                        <div style="color:white; font-size: 1.5rem;">
+                            {{ page.featured_video_tagline }}
+                        </div>
+                    {% endif %}
                 </div>
             </div>
         </div>
     </div>
 </div>
-
-
-<script src="https://player.vimeo.com/api/player.js"></script>
-<script>
-    var iframe = document.getElementById('vimeoPlayer');
-    var player = new Vimeo.Player(iframe);
-    var thumbnail = document.getElementById('videoThumbnail');
-    var overlay = document.getElementById('videoOverlay');
-
-    document.getElementById('videoOverlay').addEventListener('click', function() {
-        // Hide the overlay and thumbnail
-        overlay.style.display = 'none';
-        thumbnail.style.display = 'none';
-
-        // Show the iframe and play the video in full screen
-        iframe.style.display = 'block';
-
-        player.play().then(function() {
-            return player.requestFullscreen();
-        }).catch(function(error) {
-            console.error('Error playing the video:', error);
-        });
-    });
-
-    player.on('ended', function() {
-        // Hide the iframe and show the overlay and thumbnail again
-        iframe.style.display = 'none';
-        overlay.style.display = 'block';
-        thumbnail.style.display = 'block';
-    });
-
-    player.on('fullscreenchange', function(data) {
-        if (!data.fullscreen) {
-            player.pause().then(function() {
-                // Hide the iframe and show the overlay and thumbnail again
-                iframe.style.display = 'none';
-                overlay.style.display = 'block';
-                thumbnail.style.display = 'block';
-            }).catch(function(error) {
-                console.error('Error pausing the video:', error);
-            });
-        }
-    });
-</script>