video list add new file type

.gitignore

@@ -154,6 +154,9 @@ AutoTest.Net/
 # Video Files
 assets/videos/*
 
+# API Files
+assets/API/*
+
 # Installshield output folder
 [Ee]xpress/
 

script/js/video-list.js

@@ -1,5 +1,9 @@
 $(document).ready(function () {
-    initList(".");
+    if(folderFromVideoPlay != ""){
+        initList(folderFromVideoPlay);
+    }else{
+        initList("videos");
+    }
 });
 
 function initList(dir) {
@@ -13,12 +17,12 @@ function initList(dir) {
     }).done(function (result) {
 
         $("#video-list").empty();
-
         dir_names = result["dir_names"];
         file_tables = result["file_tables"];
+        console.log("dir: " + dir_names + " ,file: " + file_tables);
         if (result["parent"] != undefined)
             parent = result["parent"];
-
+            
         //directory
         for (i = 0; i < dir_names.length; i++) {
             $("#video-list").append('<div class="col-md-3">' +
@@ -40,18 +44,31 @@ function initList(dir) {
             if (file_tables[j]["file_path"].includes(".m3u8")) {
                 $("#video-list").append('<div class="col-md-3">' +
                     '<section class="panel">' +
-                    "<a href='#' onclick='getVideo(" + file_tables[j]["id"] + ")'>" +
+                    "<a href='#' onclick='getVideo(" + file_tables[j]["id"] + ",\"" + file_tables[j]["file_path"].split("/")[file_tables[j]["file_path"].split("/").length-2] + "\")'>" +
                     '<img class="video-static" src="' + file_tables[j]["file_path"].replace("m3u8", "jpg") + '">' +
                     '<img class="video-active" src="' + file_tables[j]["file_path"].replace("m3u8", "gif") +
                     '">' +
                     '</a>' +
                     '<div class="panel-body" id="">' +
                     '<div class="video-text">' +
-                    "<p style='font-size: 20px;'><i class='fa fa-video-camera'></i><a class='video-font' href='#' onclick='getVideo(" + file_tables[j]["title"].split("-")[0] + ")'>" + file_tables[j]["title"] + "</a></p>" +
+                    "<p style='font-size: 20px;'><i class='fa fa-video-camera'></i><a class='video-font' href='#' onclick='getVideo(" + file_tables[j]["id"] + ",\"" + file_tables[j]["file_path"].split("/")[file_tables[j]["file_path"].split("/").length-2] + "\")'>" + file_tables[j]["title"] + "</a></p>" +
                     '</div>' +
                     '</div>' +
                     '</section>' +
                     '</div>');
+            }else if(file_tables[j]["file_path"].includes(".pdf")){
+                $("#video-list").append('<div class="col-md-3">' +
+                '<section class="panel">' +
+                "<a target='_blank' href='" + file_tables[j]["file_path"] + "'>" +
+                '<img class="video-active" src="/BIM-Monitor/assets/images/PDF-icon.png">' +
+                '</a>' +
+                '<div class="panel-body" id="">' +
+                '<div class="video-text">' +
+                "<p style='font-size: 20px;'><i class='fa fa-file-pdf-o'></i><a class='video-font' target='_blank' href='" + file_tables[j]["file_path"] + "'>" + file_tables[j]["title"] + "</a></p>" +
+                '</div>' +
+                '</div>' +
+                '</section>' +
+                '</div>');
             }
         }
     }).error(function (error) {
@@ -59,8 +76,9 @@ function initList(dir) {
     });
 }
 
-function getVideo(id) {
+function getVideo(id, folder) {
     $.redirect('./video-play.php', {
-        'id': id
+        'id': id,
+        'folder': folder
     });
 }

script/js/video-play.js

@@ -8,10 +8,10 @@ const fileType = {
     "pdf": "fa-file-pdf-o",
     "zip": "fa-file-archive-o",
     "rar": "fa-file-archive-o",
+    "png": "fa-file-image-o",
 }
 
 $(document).ready(function () {
-
     getVideoInfo();
     getVideoFile();
     $('#video').bind('contextmenu', function () {
@@ -57,23 +57,22 @@ function getVideoList(dir) {
         let files = result["File_Table"];
         $("#video-list").empty();
         for (j = 0; j < videos.length; j++) {
-            if (videos[j].id == id)
-                $("#video-list").append("<li><a class='list-a' style='color:#0088CC;background-color:#B3E5FF' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
-            else
-                $("#video-list").append("<li><a class='list-a' style='color:#0088CC;' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
+            if (videos[j].file_path.includes(".m3u8")) {
+                if (videos[j].id == id)
+                    $("#video-list").append("<li><a class='list-a' style='color:#0088CC;background-color:#B3E5FF' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
+                else
+                    $("#video-list").append("<li><a class='list-a' style='color:#0088CC;' href = '#' onclick='getVideo(" + videos[j].id + ")'><i class = 'fa fa-video-camera'></i><span>" + videos[j].title + '</span></a></li>');
+            }
         }
         for (j = 0; j < files.length; j++) {
             $("#file-list").append("<li><a class='list-a' style='color:#0088CC;' class='video' href = '#' onclick='getFile(" + files[j].id + ")'><i class = 'fa " + fileType[files[j].type] + "'></i><span>" + files[j].title + "." + files[j].type + '</span></a></li>');
         }
-
-
     }).error(function (error) {
         console.log(error);
     });
 }
 
 function getDescription(description) {
-
     if (description == null) {
         description = "暫無描述";
     }
@@ -96,11 +95,10 @@ function getVideoFile() {
         var video = videojs("video");
         video.src({
             src: result,
-        });
+        }); 
         video.on("canplay", function () {
             video.poster(result.replace("m3u8", "jpg"));
         });
-
     }).error(function (error) {
         console.log("e:" + error);
     });
@@ -114,4 +112,10 @@ function getVideo(id) {
     $.redirect('./video-play.php', {
         'id': id
     });
+}
+
+function returnToList(folder) {
+    $.redirect('./video-list.php', {
+        'folder': folder
+    });
 }

script/php/video/getList.php

@@ -6,7 +6,7 @@ if (isset($_POST["dir"])) {
     $result = [];
     $Video_Table = [];
     $File_Table = [];
-    $sql = "SELECT [id],[title] FROM [BIMComponents].[dbo].[Video_Table] WHERE [dir_name] = '" . $dir . "';";
+    $sql = "SELECT [id],[title],[file_path] FROM [BIMComponents].[dbo].[Video_Table] WHERE [dir_name] = '" . $dir . "';";
     $fetchResult = sqlsrv_query($conn, $sql);
     while ($row = sqlsrv_fetch_array($fetchResult, SQLSRV_FETCH_ASSOC)) {
         array_push($Video_Table, $row);

video-list.php

@@ -5,6 +5,11 @@ if (!isset($_SESSION['loggedin'])) {
 	header('Location: pages-signin.html');
 	exit;
 }
+$folder = "";
+if (isset($_POST["folder"])) {
+    $folder = $_POST["folder"];
+}
+
 ?>
 <!doctype html>
 <html class="fixed">
@@ -15,7 +20,7 @@ if (!isset($_SESSION['loggedin'])) {
 	<script src="./script/js/global.js"></script>
 	<script>
 		var userName = '<?php echo $_SESSION['name']; ?>';
-
+		var folderFromVideoPlay = '<?php echo ($folder); ?>';;
 		pageHeader = "亞新教育訓練平台";
 	</script>
 </head>

video-play.php

@@ -4,6 +4,7 @@
 session_start();
 if (isset($_POST["id"])) {
     $id = $_POST["id"];
+    $folder = $_POST["folder"];
 }
 
 ?>
@@ -18,7 +19,6 @@ if (isset($_POST["id"])) {
 
     <script>
         var userName = '<?php echo $_SESSION['name']; ?>';
-
         pageHeader = "亞新教育訓練平台";
     </script>
 </head>
@@ -35,18 +35,17 @@ if (isset($_POST["id"])) {
             <section role="main" class="content-body">
                 <header class="page-header">
                     <h2 id="header">{{pageHeader}}</h2>
+                    <button class="mb-xs mt-xs mr-xs btn btn-default right" type="button" style="float: right;" onclick="returnToList(folder)">回上層</button>
                 </header>
                 <div class="row">
                     <div class="col-md-9">
                         <section class="panel" id="video-body">
-
                             <video class="video-js vjs-big-play-centered vjs-16-9" controls="" width="100%" data-setup="{}" id="video" poster="./assets/images/video-loading.gif" preload="auto">
                                 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
                             </video>
                             <div class="panel-body" style="color:black;">
                                 <h4>課程簡介</h4>
                                 <text id="description"></text>
-
                             </div>
                         </section>
                     </div>
@@ -74,8 +73,8 @@ if (isset($_POST["id"])) {
     <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
     <script>
         vm.mount('.body');
-
         var id = '<?php echo ($id); ?>';
+        var folder = '<?php echo ($folder); ?>';
     </script>
     <script src="./script/js/video-play.js"></script>
     <?php include("bim-support-body.html"); ?>