richie 2.34.1.dev38__py2.py3-none-any.whl → 2.34.1.dev39__py2.py3-none-any.whl

frontend/js/components/Icon/index.tsx

@@ -64,6 +64,7 @@ export enum IconTypeEnum {
   TWITTER = 'icon-twitter',
   UNIVERSITY = 'icon-univerity',
   WARNING = 'icon-warning',
+  VIDEO_PLAY = 'icon-video-play',
 }
 
 export const Icon = ({ name, title, className = '', size = 'medium', ...props }: Props) => {

frontend/scss/components/_subheader.scss

@@ -170,6 +170,41 @@ $r-subheader-search-title-width: 19rem !default; // aligned on computed search r
       position: relative;
       padding-bottom: 56.25%; // Aspect ratio 16/9
 
+      .video-player-image {
+        img {
+          filter: brightness(0.85);
+          object-fit: cover;
+        }
+        img,
+        span {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+        }
+        span {
+          text-align: center;
+          font: 48px/1.5 sans-serif;
+          fill: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        span svg {
+          transition: 0.5s;
+          width: 85px;
+          height: 85px;
+        }
+        img:hover,
+        span:hover svg {
+          fill-opacity: 1;
+          filter: drop-shadow(3px 3px 30px rgb(0 0 0 / 0.65));
+        }
+        span svg {
+          filter: drop-shadow(3px 3px 12px rgb(0 0 0 / 0.25));
+        }
+      }
       iframe {
         height: 100%;
         position: absolute;

richie/apps/core/context_processors.py

@@ -100,6 +100,10 @@ def site_metas(request: HttpRequest):
             settings.RICHIE_MINIMUM_COURSE_RUNS_ENROLLMENT_COUNT
         )
 
+    context["RICHIE_VIDEO_PLUGIN_LAZY_LOADING"] = getattr(
+        settings, "RICHIE_VIDEO_PLUGIN_LAZY_LOADING", False
+    )
+
     return context
 
 

richie/apps/core/templates/djangocms_video/default/video_player.html

@@ -1,18 +1,71 @@
-{% load i18n cms_tags %}
+{% load i18n cms_tags extra_tags thumbnail static %}
 {% comment %}
 This is a copy of original template from plugin just to clean <iframe> from
 obsolete attribute "frameborder" and invalid "allowfullscreen" attribute value.
+
+For performance reasons instead of loading the video iframe directly, 
+it changes the default template with an hidden iframe that is only visible
+when the user clicks on the image with a big play icon '▶', the image comes 
+from the video poster or the course cover.
+Only after the user clicks on the play icon '▶', the browser loads the external
+video player iframe.
+Additionaly, it tries to autoplay the external video player, this feature depends
+on the browser and external video platform implementations.
 {% endcomment %}
 
 {% if instance.embed_link %}
     {# show iframe if embed_link is provided #}
     <div class="aspect-ratio">
-        <iframe
-            title="{% if instance.label %}{{ instance.label }}{% else %}{% trans "Video" %}{% endif %}"
-            src="{{ instance.embed_link_with_parameters }}"
-            {{ instance.attributes_str }}
-            allowfullscreen
-        ></iframe>
+        {% if RICHIE_VIDEO_PLUGIN_LAZY_LOADING %}
+            <a class="video-player-image" onclick="this.style.display='none'; this.nextSibling.style.display='block'; this.nextSibling.src=this.nextSibling.getAttribute('data-src');" href="javascript:void(0)">
+                {% if instance.poster %}
+                    <img
+                        src='{% thumbnail instance.poster.url 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.poster.subject_location %}'
+                        srcset='
+                        {% thumbnail instance.poster 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.poster.subject_location %} 300w
+                        {% if instance.poster.width >= 600 %},{% thumbnail instance.poster 600x340 replace_alpha='#FFFFFF' crop upscale subject_location=instance.poster.subject_location %} 600w{% endif %}
+                        {% if instance.poster.width >= 900 %},{% thumbnail instance.poster 900x510 replace_alpha='#FFFFFF' crop upscale subject_location=instance.poster.subject_location %} 900w{% endif %}
+                        '
+                        sizes='(max-width:62em) 100vw, 660px'
+                        alt='{% trans "Click to play the teaser for " %} {{ request.current_page.get_title }}'
+                    />
+                {% else %}
+                    {% placeholder_as_plugins "course_cover" as cover_plugins %}
+                    {% blockplugin cover_plugins.0 %}
+                        <img
+                            src='{% thumbnail instance.picture 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %}'
+                            srcset='
+                            {% thumbnail instance.picture 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 300w
+                            {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x340 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
+                            {% if instance.picture.width >= 900 %},{% thumbnail instance.picture 900x510 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}
+                            '
+                            sizes='(max-width:62em) 100vw, 660px'
+                            alt='{% if instance.picture.default_alt_text %}{{ instance.picture.default_alt_text }}{% else %}{% trans 'course cover image' %}{% endif %}'
+                        />
+                    {% endblockplugin %}
+                {% endif %}
+                <span>
+                    <svg aria-hidden="true">
+                        <use href="#icon-video-play" />
+                    </svg>
+                </span>
+            </a>
+            <iframe
+                title="{% if instance.label %}{{ instance.label }}{% else %}{% trans "Video" %}{% endif %}"
+                data-src="{{ instance.embed_link_with_parameters}}{% if '?' not in instance.embed_link_with_parameters %}?{% endif %}&autoplay=1"
+                {{ instance.attributes_str }}
+                allowfullscreen
+                allow="autoplay"
+                style="display: none;"
+            ></iframe>
+        {% else %}
+            <iframe
+                title="{% if instance.label %}{{ instance.label }}{% else %}{% trans "Video" %}{% endif %}"
+                src="{{ instance.embed_link_with_parameters }}"
+                {{ instance.attributes_str }}
+                allowfullscreen
+            ></iframe>
+        {% endif %}
     </div>
     {% with disabled=instance.embed_link %}
         {% for plugin in instance.child_plugin_instances %}
@@ -32,9 +85,9 @@ obsolete attribute "frameborder" and invalid "allowfullscreen" attribute value.
 
 {% comment %}
     # Available variables:
-    {{ instance.template }}
+    {{ instance.template }}
     {{ instance.label }}
     {{ instance.embed_link }}
     {{ instance.poster }}
-    {{ instance.attributes_str }}
+    {{ instance.attributes_str }}
 {% endcomment %}

richie/apps/core/templates/richie/icons.html

@@ -201,5 +201,9 @@
       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
     </symbol>
     
+    <symbol id="icon-video-play" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="12" fill="#fff"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="m9.417 17.781 7.43-4.26c1-.574 1-1.504 0-2.077l-7.43-4.26c-1-.574-1.81-.105-1.81 1.048v8.5c0 1.153.81 1.622 1.81 1.05Z" fill="currentColor"/>
+
   </defs>
 </svg>