From b757eea5afb08c1bce9a4e537657e880668165d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P=2Et?= <nicolo.paraciani@cnr.it>
Date: Thu, 30 Sep 2021 12:18:44 +0200
Subject: [PATCH] iframe for Vimeo videos

---
 js/fara.js | 61 ++++++++++++++++++++++++++++++++++++++++--------------
 js/ui.js   | 10 ++++-----
 video.html | 14 +++++++++++--
 3 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/js/fara.js b/js/fara.js
index 9b42af4..c4f3bf8 100644
--- a/js/fara.js
+++ b/js/fara.js
@@ -1,4 +1,6 @@
 //use strict;
+localStorage.setItem('online', true);
+
 /**
  * 'Slide' background images
  * in landing page
@@ -14,19 +16,20 @@ export function sliderBg()
         /*** Fade in??*/
         //opacity = 1;
 
-    let images = [
-            'img/lp-bg/fara_bg_1.jpg',
-            'img/lp-bg/fara_bg_2.jpg',
-            'img/lp-bg/fara_bg_3.jpg',
-            'img/lp-bg/fara_bg_4.jpg',
-            'img/lp-bg/fara_bg_5.jpg',
+        let images = [
+                'img/lp-bg/fara_bg_1.jpg',
+                'img/lp-bg/fara_bg_2.jpg',
+                'img/lp-bg/fara_bg_3.jpg',
+                'img/lp-bg/fara_bg_4.jpg',
+                'img/lp-bg/fara_bg_5.jpg',
         ];
-        
-    if (nextimage >= images.length) {
-        nextimage = 0;
-    }
-    header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
-    setTimeout(slider, 2000);
+            
+        if (nextimage >= images.length) {
+            nextimage = 0;
+        }
+ 
+        header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
+        setTimeout(slider, 2000);
    }
 }
 /**
@@ -52,8 +55,6 @@ export function slideshow()
             slideIndex = 1;
         }
         
-        //console.log(slides);
-
         slides[slideIndex-1].classList.remove("hide");
         slides[slideIndex-1].classList.add("show");
         
@@ -61,7 +62,7 @@ export function slideshow()
     }
 }
 /**
- * @todo
+ * @todo Interactive SVG?
  * The canvas should be drawn into an overlay
  * container (always fullscreen)
  */
@@ -156,16 +157,46 @@ export function openVideo(a)
         .trim();
             
     let vStr = '';
+    let vimeoVids = {
+        'thumb_prologo'     : '478632535',
+        'thumb_viaggiatore' : '562518107',
+        'thumb_faresi'      : '562529310',
+        'thumb_piazza'      : '443587380',
+        'thumb_antonio'     : '606341398',
+        'thumb_francesco'   : '471773781',
+        'thumb_nobili'      : '562534835',
+        'thumb_rocco'       : '606346781',
+        'thumb_alberto'     : '606372910',
+        'thumb_disputa'     : '471537982',
+        'thumb_duomo'       : '606343917',
+        'thumb_loredana'    : '513080769',
+        'thumb_pietro'      : '455576197',
+        'thumb_castello'    : '562536148',
+        'thumb_sabini'      : '542321131',
+        'thumb_monumento'   : '606362546',
+        'thumb_eva'         : '606352547',
+        'thumb_toto'        : '606348670',
+        'thumb_fuori'       : '606358668',
+        'thumb_carro'       : '562262086',
+    };
     
+    let vimeoLink = 'https://player.vimeo.com/video/';
+
     aNodes.forEach(n => {
         if (n.src) {
             vStr = n.src;
             vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
                 .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
+    
+            vimeoLink += vimeoVids[n.src.substr(n.src.lastIndexOf('/')+1, n.src.length)
+                .replace(/\.(png|jpg)/, '')];
+            
+            vimeoLink += '?autoplay=1';
         }
     });
 
     localStorage.setItem('vidURI', vStr);
+    localStorage.setItem('vimeo', vimeoLink);
     localStorage.setItem('vidTitle', title);
     /**
      * Go to video page
diff --git a/js/ui.js b/js/ui.js
index e22298a..79c0fe9 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -44,7 +44,7 @@ if (window.location.href.includes('itinerario')) {
  */
 if (window.location.href.includes('video')) {
     document.addEventListener('readystatechange', () => {
-        let vStr = localStorage.getItem('vidURI');
+        let vimeoLink = localStorage.getItem('vimeo');
         let vidTitle = localStorage.getItem('vidTitle');
 
         document.querySelector('h1').innerHTML = vidTitle;
@@ -57,12 +57,12 @@ if (window.location.href.includes('video')) {
             window.history.go(-1);
         });
 
-        let source = document.querySelector('source');
-        let video = source.parentNode;
+        let iframe = document.querySelector('iframe');
+        //let video = source.parentNode;
             
-        source.src = `assets/video/${vStr}`;
+        iframe.src = vimeoLink;
         
-        video.load();
+        //video.load();
     });
 }
 /**
diff --git a/video.html b/video.html
index 027ab50..c5c36d1 100644
--- a/video.html
+++ b/video.html
@@ -19,10 +19,20 @@
                 </div>
                 </div>
                 <div class="container">
-                    <video class="video-responsive" controls autoplay>
+                    <div class="video-responsive">
+                        <iframe src="" frameborder="0" allowfullscreen allow="autoplay"></iframe>
+                    </div>
+                    <!--https://player.vimeo.com/video/578170143?autoplay=1
+                        <video class="video-responsive" controls autoplay>
                         <source src="" type="video/mp4">
                         Il browser non supporta i video integrati
-                    </video>
+                        <div style="padding:56.25% 0 0 0;position:relative;">
+                            <iframe src="https://player.vimeo.com/video/578170143?h=c62122f89b&autoplay=1" 
+                            style="position:absolute;top:0;left:0;width:100%;height:100%;"
+                            frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
+                            allowfullscreen></iframe>
+                        </div>
+                    </video>-->
                 </div>
             </div>
         </main>