Merge pull request #342 from Xpirix/page_load

Optimise page loads
qgis · Jul 15, 2024 · 65fe8b3 · 65fe8b3
2 parents b5151d5 + 0d2fe1f
commit 65fe8b3
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 22 deletions.
diff --git a/playwright/ci-test/tests/fixtures/home-page.ts b/playwright/ci-test/tests/fixtures/home-page.ts
@@ -109,8 +109,7 @@ export class HomePage {
             name: "Free download",
         });
         this.youTubeVideoThumbnailOverlayImage = this.page
-            .frameLocator('iframe[title="YouTube video player"]')
-            .locator(".ytp-cued-thumbnail-overlay-image");
+            .locator('.youtube');
         this.startUsingQGISHeading = this.page.getByRole("heading", {
             name: "Start using QGIS 🚀",
         });
@@ -139,8 +138,7 @@ export class HomePage {
             ".explore > .columns > div > figure > img",
         );
         this.changeLogVideo = this.page
-            .frameLocator('iframe[title="YouTube video player"]')
-            .locator(".ytp-cued-thumbnail-overlay-image");
+            .locator('.youtube');
         this.otherSupporters = this.page
             .locator(".container > div:nth-child(3)")
             .first();

diff --git a/static/img/explore.jpg b/static/img/explore.jpg
diff --git a/static/img/hegobg1.jpg b/static/img/hegobg1.jpg
diff --git a/static/img/main-create.png b/static/img/main-create.png
diff --git a/static/img/main-edit.png b/static/img/main-edit.png
diff --git a/static/img/main-share.png b/static/img/main-share.png
diff --git a/static/img/youtube.svg b/static/img/youtube.svg
diff --git a/themes/hugo-bulma-blocks-theme/assets/sass/bulma/layout/main.sass b/themes/hugo-bulma-blocks-theme/assets/sass/bulma/layout/main.sass
@@ -261,13 +261,30 @@
       padding: 0rem
 
 
-  iframe
+  .youtube
     border-radius: 20px
+    width: 560px
+    height: 315px
+    background-size: cover
+    background-position: center center
+    position: relative
+    cursor: pointer
+    overflow: hidden
 
     +until-fullhd
       height: 400px
       width: 100%
 
+  .play-button
+    width: 85px
+    height: 60px
+    background: url('img/youtube.svg') no-repeat
+    background-size: cover
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
   .is-vertical
     +until-fullhd
       order: 2

diff --git a/themes/hugo-bulma-blocks-theme/layouts/partials/explore.html b/themes/hugo-bulma-blocks-theme/layouts/partials/explore.html
@@ -69,15 +69,49 @@ <h2>Start using QGIS 🚀</h2>
         </div>
     </div>
     <div class="tile video">
-        <iframe
-            width="560"
-            height="315"
-            src="https://www.youtube.com/embed/oktjj7xBZ54"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen
-        ></iframe>
+        <div class="youtube" data-video-id="oktjj7xBZ54">
+            <div class="play-button"></div>
+        </div>
+
     </div>
 </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var youtubeElements = document.querySelectorAll('.youtube');
+
+    youtubeElements.forEach(function(element) {
+        var videoId = element.getAttribute('data-video-id');
+        var maxResThumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
+        var fallbackThumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
+
+        // Check if the max resolution thumbnail is available
+        var img = new Image();
+        img.onload = function() {
+            if (img.width > 120) {
+                element.style.backgroundImage = 'url(' + maxResThumbnailUrl + ')';
+            } else {
+                element.style.backgroundImage = 'url(' + fallbackThumbnailUrl + ')';
+            }
+        };
+        img.onerror = function() {
+            element.style.backgroundImage = 'url(' + fallbackThumbnailUrl + ')';
+        };
+        img.src = maxResThumbnailUrl;
+
+        element.addEventListener('click', function() {
+            var iframe = document.createElement('iframe');
+            iframe.setAttribute('width', '560');
+            iframe.setAttribute('height', '315');
+            iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
+            iframe.setAttribute('frameborder', '0');
+            iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
+            iframe.setAttribute('allowfullscreen', 'true');
+            this.innerHTML = '';
+            this.appendChild(iframe);
+        });
+    });
+});
+
+</script>
diff --git a/themes/hugo-bulma-blocks-theme/layouts/partials/header.html b/themes/hugo-bulma-blocks-theme/layouts/partials/header.html
@@ -81,7 +81,7 @@
             when piping them in a single line.
         */}}
         {{ $bulmasass := resources.Get "sass/bulma.sass" }}
-        {{ $bulmacss := $bulmasass | resources.ExecuteAsTemplate "bulma.scss" . | resources.ToCSS | resources.Fingerprint }}
+        {{ $bulmacss := $bulmasass | resources.ExecuteAsTemplate "bulma.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
         <link href="{{ $bulmacss.RelPermalink }}" rel="stylesheet" />
 
         {{ $menucss := resources.Get "css/menu.css" }}
@@ -94,12 +94,12 @@
         {{ $overridescss := resources.Get "css/bulma-overrides.css" }}
         {{ $cookiecss := resources.Get "css/cookie.css" }}
         {{/* must have the leading slash in css path or gh pages deploy will break */}}
-        {{ $css := slice $menucss $syntaxcss $customcss $animatecss $blockcss $highlightcss $overridescss $cookiecss | resources.Concat "/css/all.css" | resources.Fingerprint }}
+        {{ $css := slice $menucss $syntaxcss $customcss $animatecss $blockcss $highlightcss $overridescss $cookiecss | resources.Concat "/css/all.css" | resources.Minify | resources.Fingerprint }}
         <link href="{{ $css.RelPermalink }}" rel="stylesheet" />
 
         {{/* We can compile SASS too... */}}
         {{ $sass := resources.Get "sass/style.sass" }}
-        {{ $style := $sass | resources.ExecuteAsTemplate "bulma.scss" . | resources.ToCSS | resources.Fingerprint }}
+        {{ $style := $sass | resources.ExecuteAsTemplate "bulma.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
         <link href="{{ $style.RelPermalink }}" rel="stylesheet" />
 
         {{/* Fontawesome related stuff here
@@ -143,7 +143,7 @@
         />
 
         {{/* QR Encoding Logic */}}
-        {{ $qrencodejs := resources.Get "js/qrcodegen-v1.8.0-es6.js" | resources.Fingerprint }}
+        {{ $qrencodejs := resources.Get "js/qrcodegen-v1.8.0-es6.js"| resources.Minify | resources.Fingerprint }}
         <script defer src="{{ $qrencodejs.RelPermalink }}"></script>
 
         {{/* Homegrown JS functions */}}
@@ -154,14 +154,14 @@
         {{ $fusejs := resources.Get "js/fuse.js" }}
         {{ $markjs := resources.Get "js/mark.min.js" }}
         {{/* See https://www.youtube.com/watch?v=T33NN_pPeNI */}}
-        {{ $js := slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs | resources.Concat "js/all.js" | resources.Fingerprint }}
+        {{ $js := slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs | resources.Concat "js/all.js" | resources.Minify | resources.Fingerprint }}
         {{ if (eq .Site.Params.cookiesstate true) }}
             {{ $cookiejs := resources.Get "js/cookie.js" }}
-            {{ $js = slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs $cookiejs | resources.Concat "js/all.js" | resources.Fingerprint }}
+            {{ $js = slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs $cookiejs | resources.Concat "js/all.js" | resources.Minify | resources.Fingerprint }}
         {{ end }}   
         <script defer src="{{ $js.RelPermalink }}"></script> 
         {{/* Search needs to be rendered as a template to ensure urls are correct */}}
-        {{ $searchjs := resources.Get "js/search.js" | resources.ExecuteAsTemplate "search.js" . | resources.Fingerprint }}
+        {{ $searchjs := resources.Get "js/search.js" | resources.ExecuteAsTemplate "search.js" . | resources.Minify | resources.Fingerprint }}
         <script defer src="{{ $searchjs.RelPermalink }}"></script>
         <script
             crossorigin=""

diff --git a/themes/hugo-bulma-blocks-theme/layouts/shortcodes/stripe-widget.html b/themes/hugo-bulma-blocks-theme/layouts/shortcodes/stripe-widget.html
@@ -31,7 +31,7 @@
     </div>
 </div>
 
-{{ $donatejs := resources.Get "js/donate.js" }}
+{{ $donatejs := resources.Get "js/donate.js" | resources.Minify }}
 <script
     src="{{ $donatejs.RelPermalink }}"
 ></script>