BIM-Monitor/script/js/video-list.js

    $(document).ready(function () {
        if (folderFromVideoPlay != "") {
            initList(folderFromVideoPlay);
        } else {
            initList("videos");
        }
    });

    function initList(dir) {
        $.ajax({
            url: "./script/php/video/getDir.php",
            type: "POST",
            data: {
                dir: dir,
            },
            dataType: "json"
        }).done(function (result) {

            if (result["parent"] != undefined) {
                $("#video-list").empty();
                dir_names = result["dir_names"];
                file_tables = result["file_tables"];
                parent = result["parent"];

                //directory
                for (i = 0; i < dir_names.length; i++) {
                    $("#video-list").append('<div class="col-md-3">' +
                        '<section class="panel">' +
                        "<a href='#' onclick='initList(\"" + dir_names[i]["dir_name"] + "\")'>" +
                        '<img class="video-active" src="/Common/assets/images/folder-icon.png">' +
                        '</a>' +
                        '<div class="panel-body" id="">' +
                        '<div class="video-text">' +
                        "<p style='font-size: 20px;'><i class='fa fa-folder'></i><a class='video-font' href='#' onclick='initList(\"" + dir_names[i]["dir_name"] + "\")'>" + dir_names[i]["dir_name"] + "</a></p>" +
                        '</div>' +
                        '</div>' +
                        '</section>' +
                        '</div>');
                }

                //video
                for (j = 0; j < file_tables.length; j++) {
                    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"] + ",\"" + file_tables[j]["file_path"].split("/")[file_tables[j]["file_path"].split("/").length - 2] + "\")'>" +
                            '<img style="aspect-ratio: 4/3;" class="video-static" src="' + file_tables[j]["file_path"].replace("m3u8", "jpg") + '">' +
                            '<img style="aspect-ratio: 4/3;" 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]["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")) {
                        if ($("#description").length <= 0) {
                            $("#video-list").prepend('<div class="col-md-12">' +
                                '<section class="panel" id="video-body">' +
                                '<div class="panel-body" style="color:black;">' +
                                '<h4>課程簡介</h4>' +
                                '<text id="description"></text>' +
                                '</div>' +
                                '</section>' +
                                '</div>');
                            getVideoInfo(file_tables[j]["id"]);
                        }
                        $("#video-list").append('<div class="col-md-3">' +
                            '<section class="panel">' +
                            "<a target='_blank' href='" + file_tables[j]["file_path"] + "'>" +
                            '<img style="aspect-ratio: 4/3;" class="video-active" src="' + file_tables[j]["file_path"].replace("pdf", "jpg") + '">' +
                            '</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) {
            console.log(error);
        });
    }

    function getVideo(id, folder) {
        $.redirect('./video-play.php', {
            'id': id,
            'folder': folder
        });
    }

    function getVideoInfo(id) {
        $.ajax({
            url: "./script/php/video/getInfo.php",
            type: "POST",
            data: {
                id: id,
            },
            dataType: "json"
        }).done(function (result) {
            if (result[0].description == null) {
                result[0].description = "暫無描述";
            }
            $("#description").text(result[0].description);
        }).error(function (error) {
            console.log(error);
        });
    }

    function search_video(search_word) {
        $.ajax({
            url: "./script/php/video/get_video_search.php",
            type: "POST",
            data: {
                search: search_word,
            },
            dataType: "json"
        }).done(function (result) {
            file_tables = result["file_tables"];

            if(!file_tables.length) {
                $("#video-list").append('<h2 align="center">無符合選項</h2>')
                return
            }

            for (j = 0; j < file_tables.length; j++) {
                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"] + ",\"" + file_tables[j]["file_path"].split("/")[file_tables[j]["file_path"].split("/").length - 2] + "\")'>" +
                        '<img style="aspect-ratio: 4/3;" class="video-static" src="' + file_tables[j]["file_path"].replace("m3u8", "jpg") + '">' +
                        '<img style="aspect-ratio: 4/3;" 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]["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 style="aspect-ratio: 4/3;" class="video-active" src="' + file_tables[j]["file_path"].replace("pdf", "jpg") + '">' +
                        '</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) {
            console.log(error);
        });
    }