Merge branch 'feature/video-js' into develop

app/javascript/packs/application.js

@@ -9,6 +9,7 @@ require("@rails/activestorage").start()
 require("channels")
 require("packs/direct_uploads")
 require("packs/bulma")
+require("packs/modal")
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
@@ -17,4 +18,6 @@ require("packs/bulma")
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-
+require("video.js/dist/video.js")
+require("video.js/dist/video-js.css")
+require("@videojs/themes/dist/sea/index.css")

app/javascript/packs/modal.js

@@ -0,0 +1,63 @@
+import { appendThumbnails } from './thumbnail'
+import { appendPlayer, removePlayer } from './video'
+
+document.addEventListener("turbolinks:load", function() {
+    console.log("turbolinks:load modal");
+    var parentViewId = 'modal-content';
+    var playerId = 'my-player';
+    var videoUrl = "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8";
+    var videoType = "application/x-mpegURL";
+    var posterUrl = "";
+
+    var thumbnailLinkToOpenModals = document.querySelectorAll('a#open-thumbnail-modal');
+    thumbnailLinkToOpenModals.forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            var dataThumbnails = this.getAttribute("data-thumbnails");
+            var thumbnails = JSON.parse(dataThumbnails);
+            appendThumbnails(thumbnails, parentViewId);
+            var modal = document.querySelector('.modal');  // assuming you have only 1
+            var html = document.querySelector('html');
+            modal.classList.add('is-active');
+            html.classList.add('is-clipped');
+            var closeCompoments = modal.querySelectorAll('.modal-background, .modal-close.is-large');
+            closeCompoments.forEach(function(compoment) {
+                compoment.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    var modalContent = document.getElementById(parentViewId);
+                    while (modalContent.firstChild) {
+                        modalContent.removeChild(modalContent.lastChild);
+                    }
+                    modal.classList.remove('is-active');
+                    html.classList.remove('is-clipped');
+                });
+            });
+        });
+    });
+
+    var playLinkToOpenModals = document.querySelectorAll('a#open-play-modal');
+    playLinkToOpenModals.forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            console.log("data-video" + this.getAttribute("data-video"));
+            console.log("data-poster" + this.getAttribute("data-poster"));
+            console.log("document.querySelector a#open-modal");
+            videoUrl = this.getAttribute("data-video");
+            posterUrl = this.getAttribute("data-poster");
+            appendPlayer(parentViewId, playerId, videoUrl, videoType, posterUrl);
+            var modal = document.querySelector('.modal');  // assuming you have only 1
+            var html = document.querySelector('html');
+            modal.classList.add('is-active');
+            html.classList.add('is-clipped');
+            var closeCompoments = modal.querySelectorAll('.modal-background, .modal-close.is-large');
+            closeCompoments.forEach(function(compoment) {
+                compoment.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    removePlayer(playerId);
+                    modal.classList.remove('is-active');
+                    html.classList.remove('is-clipped');
+                });
+            });
+        });
+    });
+});

app/javascript/packs/thumbnail.js

@@ -0,0 +1,13 @@
+function appendThumbnails(thumbnails, parentViewId) {
+    thumbnails.forEach(function(asset) {
+        if(asset.format == 'image'){
+            var url = asset.url;
+            var img = document.createElement('img');
+            img.setAttribute('src', url);
+            var modalContent = document.getElementById(parentViewId);
+            modalContent.append(img);
+        }
+    });
+}
+
+export { appendThumbnails }

app/javascript/packs/video.js

@@ -0,0 +1,38 @@
+import videojs from 'video.js';
+
+function removePlayer(playerId){
+    var oldPlayer = document.getElementById(playerId);
+    if(oldPlayer){
+        videojs(oldPlayer).dispose();
+    }
+}
+
+function appendPlayer(parentViewId, playerId, videoUrl, videoType, posterUrl) {
+    removePlayer(playerId);
+    var modalContent = document.getElementById(parentViewId);
+    if(modalContent){
+        var v = buildVideoElement(videoUrl, videoType, posterUrl);
+        modalContent.append(v);
+        var player = videojs(v);
+    }
+}
+
+function buildVideoElement(videoUrl, videoType, posterUrl){
+    var obj, source;
+    obj = document.createElement('video');
+    obj.setAttribute('id', 'my-player');
+    obj.setAttribute('class', 'video-js vjs-theme-sea');
+    obj.setAttribute('width', '640');
+    obj.setAttribute('data-height', '264');
+    obj.setAttribute('controls', ' ');
+    obj.setAttribute('poster', posterUrl);
+    obj.setAttribute('preload', 'auto');
+    obj.setAttribute('data-setup', '{}');
+    source = document.createElement('source');
+    source.setAttribute('type', videoType);
+    source.setAttribute('src', videoUrl);
+    obj.append(source);
+    return obj;
+}
+
+export { removePlayer, appendPlayer, buildVideoElement }

app/views/encodes/index.html.erb

@@ -1,3 +1,12 @@
+<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
+<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet">-->
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>-->
+
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content" id="modal-content"></div>
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>
 <h1 class="title">Encode > List</h1>
 <div class="table-container">
   <table class="table is-narrow is-hoverable is-fullwidth" id="encodes">
@@ -11,13 +20,14 @@
       <th>Created at</th>
       <th>Completed</th>
       <th>Thumbnail</th>
+      <th></th>
     </tr>
     </thead>
     <tbody>
     <% @encodes.each do |encode| %>
       <tr id="encode_id" data-encode-id="<%= encode.id %>">
-        <th><%= link_to encode.id, encode, class: "button is-success" %></th>
-        <td><%= link_to encode.title, encode %></td>
+        <th><%= encode.id %></th>
+        <td><%= encode.title %></td>
         <td><%= encode.file.filename if encode.file.attached? %></td>
         <td><%= encode.runtime %></td>
         <td><%= encode.url %></td>
@@ -30,6 +40,11 @@
           </figure>
           <% end %>
         </td>
+        <td>
+          <%= link_to "Show", encode, class: "button is-link" %>
+          <%= link_to "Play", "#", id: "open-play-modal", class: "button is-primary", data: { :video => encode.url, :poster => url_for(encode.thumbnails.first) } if encode.completed %>
+          <%= link_to "Thumbnail", "#", id: "open-thumbnail-modal", class: "button is-info", data: { thumbnails: encode.assets } if encode.completed %>
+        </td>
       </tr>
     <% end %>
     </tbody>

app/views/layouts/application.html.erb

@@ -7,7 +7,7 @@
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= action_cable_meta_tag %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-
+    <%= stylesheet_pack_tag 'application' %>
   </head>
 
   <body>

package.json

@@ -6,7 +6,9 @@
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.2.2",
-    "turbolinks": "^5.2.0"
+    "@videojs/themes": "^1.0.1",
+    "turbolinks": "^5.2.0",
+    "video.js": "^7.12.3"
   },
   "version": "0.1.0",
   "devDependencies": {