Fix handling html5 video. Add play button. Request fullscreen only on images.

layouts/partials/showCaseCommon.html

@@ -1,27 +1,34 @@
+
 {{ if   .Params.gallery }}
-              {{ range  $index, $value :=  (shuffle  .Params.gallery ) }}
+<i id="playButton" class=" fas fa-play"></i>
+{{ range  $index, $value :=  (shuffle  .Params.gallery ) }}
+
+
 
 
+{{ if or (strings.HasPrefix  . "youtube:" )    }}
+<iframe loading="lazy" class="showcaseElement cover youtubeVid"
+  style='display: {{ if not $index }} block  {{else}} none {{end}}' lazy="true"
+  lazy-src="https://www.youtube-nocookie.com/embed/{{ index ( last 1 ( split . ":" )) 0 }}" frameborder="0"
+  allow="accelerometer; autoplay;  encrypted-media; gyroscope; fullscreen"></iframe>
+{{ else if (strings.HasSuffix . ".webm" ) }}
+  <video class="showcaseElement cover" style='display:{{ if not $index }} block  {{else}} none {{end}} ' preload="none"
+    class="cover">
+    <source src="{{ safeURL .}}" type="video/webm">
+  </video>
+</div>
+{{ else if (strings.HasSuffix . ".mp4" ) }}
 
-                {{ if or (strings.HasPrefix  . "youtube:" )    }}
-                    <iframe loading="lazy" class="showcaseElement cover youtubeVid"   style='display: {{ if not $index }} block  {{else}} none {{end}}' 
-                    lazy="true" lazy-src="https://www.youtube-nocookie.com/embed/{{ index ( last 1 ( split . ":" )) 0 }}"
-                    frameborder="0" allow="accelerometer; autoplay;  encrypted-media; gyroscope; fullscreen"></iframe>
-                {{ else if (strings.HasSuffix . ".webm" ) }}
-                  <video class="showcaseElement cover"  style='display:{{ if not $index }} block  {{else}} none {{end}} '  preload="none" autoplay loop muted class="cover">
-                    <source src="{{ safeURL .}}" type="video/webm">
-                  </video>
-                {{ else if (strings.HasSuffix . ".mp4" ) }}
-                    <video  class="showcaseElement cover"   style='display:{{ if not $index }} block  {{else}} none {{end}} '  preload="none" autoplay loop muted class="cover">
-                      <source type="video/mp4">
-                    </video>
-                {{ else }}      
-                <div class="showcaseElement"  style='display:{{ if not $index }} block  {{else}} none {{end}} ' >
-                  <div  class="cover blur" lazy="true" lazy-style="background-image: url('{{ safeURL .  }}'); " style=" "></div>
-                  <div    class="cover" lazy="true" lazy-style="background-image: url('{{ safeURL .  }}'); " style="  "></div>
-                </div>
-                {{ end }}    
-              {{end}}
-            
-  {{end}}
+  <video class="showcaseElement cover" style='display:{{ if not $index }} block  {{else}} none {{end}} ' preload="none"
+     class="cover">
+    <source type="video/mp4">
+  </video>
+{{ else }}
+<div class="showcaseElement" style='display:{{ if not $index }} block  {{else}} none {{end}} '>
+  <div class="cover blur" lazy="true" lazy-style="background-image: url('{{ safeURL .  }}'); " style=" "></div>
+  <div class="cover" lazy="true" lazy-style="background-image: url('{{ safeURL .  }}'); " style="  "></div>
+</div>
+{{ end }}
+{{end}}
 
+{{end}}

static/css/style.less

@@ -1271,6 +1271,25 @@ section#showcase {
     min-height: 40vh;
     .textShadowedIntense();
 
+
+
+
+        #playButton{
+            position:absolute;
+            top:0;
+            left:0;
+            pointer-events: none;
+            width:100%;
+            height:100%;
+            z-index:90;
+            align-items: center;
+            font-size:4rem;
+            display:none;
+
+            justify-content: center;
+        }
+    
+   
     #gameDescription {
         text-align: right !important;
         width: 50%;
@@ -1348,7 +1367,6 @@ section#showcase {
         #gameDescription {
             text-align: center !important;
             width: 100%;
-
         }
 
         #engineDescription {
@@ -1359,4 +1377,4 @@ section#showcase {
 
     }
 
-}
+}

static/js/showcase.js

@@ -4,12 +4,12 @@ const ShowCase=function(showCaseEl){
 
 
 	this.getYoutubeVideos=()=>{
-		const els = showCaseEl.querySelectorAll("iframe.showcaseElement.youtubeVid");
+		const els = showCaseEl.querySelectorAll("iframe.youtubeVid");
 		return els;
 	};
 
 	this.getVideos=()=>{
-		const els = showCaseEl.querySelectorAll("video.showcaseElement");
+		const els = showCaseEl.querySelectorAll("video");
 		return els;
 	};
 
@@ -19,42 +19,61 @@ const ShowCase=function(showCaseEl){
 		return els;
 	};
 
+	this.showPlayButton=(v)=>{
+		const playButton=showCaseEl.querySelector("#playButton");
+		if(playButton){
+				playButton.style.display=v?"flex":"none";
+		}
+	}
 	this.playCurrent=()=>{
 		if(mode=="gallery"){
-			this.getImages().forEach(el=>el.classList.add("gallery"));
+			this.getImages().forEach(el=>{
+				if(!el.getAttribute("enableRequestFullScreen")){
+					el.setAttribute("enableRequestFullScreen",true);
+					el.addEventListener("click", () => el.requestFullscreen());
+				}
+				el.classList.add("gallery")
+			});
+				
 		}else{
 			this.getImages().forEach(el=>el.classList.remove("gallery"));
 		}
 
 		lazyLoad(showCaseEl);
 
+		let showPlayButton=false;
 		this.getVideos().forEach(el=>{
 		
 			if(isVisible(el)){
 				if(mode=="gallery"){
+					showPlayButton=true;
 					el.classList.add("gallery");
-					el.setAttribute("controls", "");
-					el.removeAttribute("loop");
-					el.removeAttribute("autoplay");
-					el.removeAttribute("muted");
 					el.volume=1.0;
 					el.muted = false;
+					el.controls=true;
+					el.loop=false;
+					if(!el.getAttribute("enableHidePlayButtonOnPlay")){
+						el.setAttribute("enableHidePlayButtonOnPlay",true);
+						el.addEventListener("play",()=>this.showPlayButton(false));
+					}
 				}else{
-					el.play();
-					el.removeAttribute("controls", "");
-					el.setAttribute("loop");
-					el.setAttribute("muted");
-					el.setAttribute("autoplay");
 					el.classList.remove("gallery");
 					el.muted = true;
+					el.controls=false;
+					el.loop=true;
+					el.play();
 
 				}
 			}else{
+				console.log("Disable video",el);
 				el.pause();
-				el.currentTime=0;
 			} 
 		});
 
+		this.showPlayButton(showPlayButton);
+
+
+
 		this.ytReloadInc=0;
 		this.getYoutubeVideos().forEach(el=>{
 			let osrc=el.getAttribute("osrc");
@@ -124,7 +143,6 @@ const ShowCase=function(showCaseEl){
 			this.cycleShowCase(1)
 		});
 
-		showCaseEl.addEventListener("click", () => showCaseEl.requestFullscreen());
 	}
 
 	this.playCurrent();