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

(function ($) {
    $(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) {
            $("#video-list").empty();
            dir_names = result["dir_names"];
            file_tables = result["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">' +
                    '<section class="panel">' +
                    "<a href='#' onclick='initList(\"" + dir_names[i]["dir_name"] + "\")'>" +
                    '<img class="video-active" src="./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);
        });
    }
})(jQuery);