From 95358281ef72f487029514527214b15aa6486046 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Sun, 4 Jun 2017 21:54:04 +0200
Subject: [PATCH] fix fullscreen video on click

---
 .../exposure/templates/gallery-index.html     | 22 +++++++++----------
 .../templates/sections/bordered-picture.html  |  2 +-
 .../templates/sections/pictures-group.html    |  2 +-
 .../material/templates/gallery-index.html     | 22 +++++++++----------
 .../templates/sections/bordered-picture.html  |  2 +-
 .../templates/sections/pictures-group.html    |  2 +-
 6 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/prosopopee/themes/exposure/templates/gallery-index.html b/prosopopee/themes/exposure/templates/gallery-index.html
index 521e9df..1f5086c 100644
--- a/prosopopee/themes/exposure/templates/gallery-index.html
+++ b/prosopopee/themes/exposure/templates/gallery-index.html
@@ -79,18 +79,16 @@ $('audio').mediaelementplayer({
 });
 {% endif %}
 
-var video = $("video");
-video.on('click', function(e){
-  var vid = video[0];
-  vid.play();
-  if (vid.requestFullscreen) {
-    vid.requestFullscreen();
-  } else if (vid.mozRequestFullScreen) {
-    vid.mozRequestFullScreen();
-  } else if (vid.webkitRequestFullscreen) {
-    vid.webkitRequestFullscreen();
-  }
-});
+function goFullscreen(id) {
+  var element = document.getElementById(id);
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.webkitRequestFullScreen) {
+    element.webkitRequestFullScreen();
+  }  
+}
 
 $(function() {
   $("img.lazy").lazyload({
diff --git a/prosopopee/themes/exposure/templates/sections/bordered-picture.html b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
index c88f415..d1ab5cf 100644
--- a/prosopopee/themes/exposure/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
@@ -9,7 +9,7 @@
   <section class="bordered-picture baguette" style="position: relative;">
     <div class="caption">
       <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
-      <video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
+      <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
         <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
       </video>
       {% if caption %}
diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html
index 8f2ebe9..563e9ae 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -12,7 +12,7 @@
         {% set format = settings.ffmpeg.extension %}
         {{ video.copy() }}
         <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
-        <video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+        <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
         </video>
         {% if caption %}
diff --git a/prosopopee/themes/material/templates/gallery-index.html b/prosopopee/themes/material/templates/gallery-index.html
index d50019c..c8f4d56 100644
--- a/prosopopee/themes/material/templates/gallery-index.html
+++ b/prosopopee/themes/material/templates/gallery-index.html
@@ -62,18 +62,16 @@ $(document).ready(function(){
   $('.parallax').parallax();
 });    
 
-var video = $("video.lazy");
-video.on('click', function(e){
-  var vid = video[0];
-  vid.play();
-  if (vid.requestFullscreen) {
-    vid.requestFullscreen();
-  } else if (vid.mozRequestFullScreen) {
-    vid.mozRequestFullScreen();
-  } else if (vid.webkitRequestFullscreen) {
-    vid.webkitRequestFullscreen();
-  }
-});
+function goFullscreen(id) {
+  var element = document.getElementById(id);
+  if (element.requestFullscreen) {
+    element.requestFullscreen();
+  } else if (element.mozRequestFullScreen) {
+    element.mozRequestFullScreen();
+  } else if (element.webkitRequestFullScreen) {
+    element.webkitRequestFullScreen();
+  }  
+}
 
 {% if gallery.audio_enabled %}
 $('audio').mediaelementplayer({
diff --git a/prosopopee/themes/material/templates/sections/bordered-picture.html b/prosopopee/themes/material/templates/sections/bordered-picture.html
index 4c9795b..9ae2547 100644
--- a/prosopopee/themes/material/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/material/templates/sections/bordered-picture.html
@@ -12,7 +12,7 @@
   <div class="bordered-picture baguette caption">
     {% if video %}
     <img class="responsive-img lazy z-depth-2" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
-    <video class="lazy responsive-video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
+    <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
       <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
     </video>
     {% else %}
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html
index 9f9eabb..6732a5f 100644
--- a/prosopopee/themes/material/templates/sections/pictures-group.html
+++ b/prosopopee/themes/material/templates/sections/pictures-group.html
@@ -12,7 +12,7 @@
         {% set format = settings.ffmpeg.extension %}
         {{ video.copy() }}
         <img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
-        <video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+        <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
         </video>
         {% if caption %}