Use "sampotts/plyr" library instead of "clappr/clappr"

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

layouts/partials/header.html

@@ -22,6 +22,7 @@
 <link rel="stylesheet" href="{{ "/css/layouts/main.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
 <link rel="stylesheet" href="{{ "/css/navigators/navbar.css" | relURL }}"/>
+<link rel="stylesheet" href="{{ "/css/plyr.css" | relURL }}"/>
 
 <!--=================== cdn ==============================-->
 <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">

layouts/partials/scripts.html

@@ -1,6 +1,7 @@
-<script src="{{ "/js/jquery-3.4.1.min.js" | relURL }}"></script>
-<script src="{{ "/js/popper.min.js" | relURL }}"></script>
-<script src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/jquery-3.4.1.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/popper.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/bootstrap.min.js" | relURL }}"></script>
 
-<script src="{{ "/js/navbar.js" | relURL }}"></script>
-<script src="{{ "/js/main.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>

layouts/shortcodes/video.html

@@ -1,19 +1,13 @@
-<div class="container">
-  <div id="player-wrapper" class="{{ .Get 1 }}"></div>
-</div>
+{{ $src := .Get "src" }}
+{{ $type := .Get "type" }}
+{{/*
+  A page can have multiple videos. We need to generate unique id for them.
+  Here, we are generating a sequence from 1 to 200 and taking the first element after a shuffle.
+  This will give a random number in most cases. However, if the page has many videos, we might have a collision.
+  We should find a better approach for doing this.
+*/}}
+{{ $randNumber :=  index (seq 200 | shuffle) 0 }}
 
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js">
-</script>
-
-<script>
-  var playerElement = document.getElementById("player-wrapper");
-
-  var player = new Clappr.Player({
-    source: {{ .Get 0 }},
-  mute: true,
-    height: 360,
-      width: 640
-  });
-
-  player.attachTo(playerElement);
-</script>
+<video class="video-player" id="video-{{ $randNumber }}" playsinline controls>
+  <source src="{{ $src }}" type="{{ $type | default "video/mp4" }}" />
+</video>

static/js/main.js

@@ -72,6 +72,16 @@ var isMobile = false, isTablet = false, isLaptop = false;
     }
     addSmoothScroll();
 
+    // ===================== Video Player ==================
+    function renderVideoPlayer(){
+      var videos = document.getElementsByClassName("video-player");
+      for (var i =0; i< videos.length; i++ ){
+        const player = new Plyr("#"+videos[i].id);
+      }
+
+    }
+    renderVideoPlayer();
+
     // re-render custom functions on window resize
     window.onresize = function () {
       detectDevice();