TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
							<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <meta name="theme-color" content="#4b75ff">
        <link rel="stylesheet" href="script/semantic/semantic.min.css">
        <script src="../script/jquery.min.js"></script>
        <script src="script/semantic/semantic.min.js"></script>
        <script src="../script/ao_module.js"></script>
        <script src="script/DPlayer.min.js"></script>

        <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
        <title>Video</title>
        <style>
            html, body{
                background-color:rgba(250,250,250,0.95);
                padding:0px !important;
                margin: 0px;
            }
            #dplayer{
                display:inline-block;
                width:70%;
                vertical-align: top;
            }
            .playerwrapper{
                background-color:black;
                width:100%;
                margin-bottom:12px;
            }

            @media only screen and (max-width: 1900px) {
                #dplayer{
                    width:50%;
                }
            }

            @media only screen and (max-width: 1500px) {
                #dplayer{
                    width:60%;
                }
            }

            @media only screen and (max-width: 1024px) {
                #dplayer{
                    width:70%;
                }
            }

            @media only screen and (max-width: 600px) {
                #dplayer{
                    width:100%;
                }
            }
            .playing{
                background-color:#ededed;
            }

            .videoObject{
                padding:6px !important; 
                cursor: pointer;
            }

            .videoObject:hover{
                background-color: #ffdd91;
            }

        </style>
    </head>
    <body>
        <!-- Viewing Panel-->
        <div class="playerwrapper" align="center">
            <div id="dplayer" class="unstyled" align="left"></div>
        </div>
        <!-- PlayList-->
        <div class="ui container">
            <h3 class="ui header">
                <span id="videoname">No Video Loaded</span>
                <div class="sub header"><span id="playlistName">N/A</span> / <span id="ext">[no_mdeia]</span></div>
            </h3>
            <div class="ui segment">
                <p><i class="expand icon"></i>Screen Size</p>
                <!--
                    <button class="ui tiny button" onclick="setScreenSize('50%');">
                        Small
                    </button>
                 -->
                <button class="ui tiny button" onclick="setScreenSize('70%'); previousScreenSize='70%';">
                    Normal
                </button>
                <button class="ui tiny button" onclick="setScreenSize('100%');previousScreenSize='100%';">
                    Full Width
                </button>
                <div class="ui toggle right floated checkbox">
                    <input id="autoplayToggle" type="checkbox" name="autoplay" onchange="setAutoplay(this);">
                    <label>Autoplay</label>
                </div>

            </div>
            <div id="playList" class="ui fluid segment">
                <p><i class="list icon"></i> PlayLists</p>
                <select id="playListSelector" class="ui search fluid dropdown">
                    <option value="">Select Playlist</option>
                </select>
                <br>
                <p><i class="file icon"></i>PlayList Videos</p>
                <div id="videolist" class="ui relaxed divided list">

                </div>
            </div>
            <br><br><br>
        </div>
        
        <script>
            var playerObject;
            var AllPlaylist = [];
            var currentPlaylist = [];
            var currentPlaying;
            //var unsortedVideoFiles = [];
            var autoPlay = false;
            var previousScreenSize = "70%";
            $('.ui.dropdown').dropdown();
            init();
            initPlaylist();

            //Check if there are file dropped into this interface. If yes, redirect to embedded
            var infile = ao_module_loadInputFiles();
            if (infile != null){
                window.location.href = "embedded.html" + window.location.hash;
            }

            autoPlay = (ao_module_storage.loadStorage("Video","autoplay") == "true");
            if (autoPlay){
                $("#autoplayToggle").attr("checked",true);
            }

            function init(){
                //Removed set global volume and isolate two systems
                /*var defaultVol = localStorage.getItem("global_volume");
                if (defaultVol == null || defaultVol == "" || defaultVol == undefined){
                    defaultVol = 0.4;
                }
                */
                const dp = new DPlayer({
                    container: document.getElementById('dplayer'),
                    autoplay: false,
                    //volume: parseFloat(defaultVol),
                    video: {
                        pic: 'img/thumbnail.png',
                    }
                });

                playerObject = dp;

                /*
                dp.on("volumechange",function(){
                    var newVol = dp.volume();
                    if (localStorage){
                        localStorage.setItem("global_volume",newVol);
                    }
                });
                */
                
                //handle autoplay on end
                dp.on('ended', function() {
                    if (autoPlay){
                        //Play next item in list
                        var nextToPlay = 0;
                        for (var i =0; i < currentPlaylist.length; i++){
                            if (currentPlaylist[i].Filename == currentPlaying){
                                nextToPlay = i + 1;
                                if (nextToPlay >= currentPlaylist.length){
                                    //last video. loop back to first esp
                                    nextToPlay = 0;
                                }
                            }
                        }

                        //Play the selected item
                        var nextPlayObject = currentPlaylist[nextToPlay];
                        console.log(currentPlaylist[nextToPlay],nextToPlay);
                        $("#videoname").text(nextPlayObject.Filename);
                        $("#ext").text("[" + nextPlayObject.Ext + "]" );
                        currentPlaying = nextPlayObject.Filename;
                        playVideo("../media?file=" + encodeURIComponent(nextPlayObject.Filepath));
                        $("#videolist").find(".search").val(nextPlayObject.Filename);
                        $(".playing").removeClass("playing");
                        $(".videoObject").each(function(){
                            if ($(this).attr("filename") == nextPlayObject.Filename){
                                $(this).addClass("playing");
                            }
                        });
                    }
                });

                //Handle full screen
                dp.on('fullscreen', function() {
                    //previousScreenSize = $("#dplayer").css("width");
                    setScreenSize("100%");
                });

                dp.on('fullscreen_cancel', function() {
                    setScreenSize(previousScreenSize);
                });

            }

            function setAutoplay(obj){
                autoPlay = obj.checked;
                if (autoPlay){
                    ao_module_storage.setStorage("Video","autoplay","true");
                }else{
                    ao_module_storage.setStorage("Video","autoplay","false");
                }
            }

            $("#playListSelector").on("change",function(){
                var selectedPlaylistName = $(this).val();
                var thisPlaylistDevice = "";
                $("#playListSelector").find(".playlistObject").each(function(){
                    if ($(this).attr("value") == selectedPlaylistName){
                        thisPlaylistDevice = $(this).attr("device");
                    }
                });

                if (thisPlaylistDevice.length == 0){
                    //Unsorted playlist
                    console.log("Listing unsorted playlists");
                    listUnsortedFiles();
                }else{
                    listPlayList(selectedPlaylistName);
                }
                //console.log(thisPlaylistDevice);
            });

            function setScreenSize(size){
                $("#dplayer").css("width",size);
            }   

            function initPlaylist(){
                $.ajax({
                    url: "../system/ajgi/interface?script=Video/backend/buildPlaylist.js",
                    success: function(data){
                        console.log(data);
                        //Initial playlist dropdown
                        $("#playListSelector").html("");
                        $("#playListSelector").append(`<option class="" value="">Select Playlist</option>`);
                       for (var i = 0; i < data.length; i++){
                           var thisDevice = data[i];
                           var thisDeviceName = thisDevice.StorageName;
                           var playlistInThisDevice = thisDevice.PlayLists;
                           //var unsortedVideoInThisDevice = thisDevice.UnsortedVideos;
                           //Append playlist
                           for (var j = 0; j < playlistInThisDevice.length; j++){
                               var thisPlaylistName = playlistInThisDevice[j].Name;
                               AllPlaylist.push(JSON.parse(JSON.stringify(playlistInThisDevice[j])));
                               $("#playListSelector").append(`<option class="playlistObject" value="${thisPlaylistName}" device="${thisDeviceName}">${thisPlaylistName}</option>`);
                           }
                           /*
                           for (var k = 0; k < unsortedVideoInThisDevice.length; k++){
                                unsortedVideoFiles.push(JSON.parse(JSON.stringify(unsortedVideoInThisDevice[k])));
                           }
                           */
                           
                       }
                        //Append unsorted into playlist
                        //$("#playListSelector").append(`<option class="playlistObject" value="unsorted" device="">Unsorted Playlist</option>`);
                        updateWindowEvents();
                    }
                });
            }

            /*
            function listUnsortedFiles(){
                 //Append unsorted files
                 $("#videolist").html("");
                 currentPlaylist = unsortedVideoFiles;
                 for (var k = 0; k < unsortedVideoFiles.length; k++){
                    var thisVideoName = unsortedVideoFiles[k].Filename;
                    var thisFilePath = unsortedVideoFiles[k].Filepath;
                    var ext = unsortedVideoFiles[k].Ext;
                    $("#videolist").append(`<div class="item videoObject" onclick="playThisFile(this);" filename="${thisVideoName}" filepath="${thisFilePath}" ext="${ext}" playlist="Unsorted">
                        <i class="file icon"></i>
                        <div class="content">
                            <a class="header">${thisVideoName}</a>
                            <div class="description">${thisFilePath} / [${ext}]</div>
                        </div>
                    </div>`);
                }
            }
            */

            function listPlayList(playlistName){
                $("#videolist").html("");
                var targetPlaylist;
                for (var i =0; i < AllPlaylist.length; i++){
                    if (AllPlaylist[i].Name == playlistName){
                        targetPlaylist = AllPlaylist[i];
                    }
                }
                currentPlaylist = targetPlaylist.Files;
                //Parse the playlist
                for (var i = 0; i < currentPlaylist.length; i++){
                    var playListName = targetPlaylist.Name;
                    var thisVideoName = currentPlaylist[i].Filename;
                    thisVideoName = thisVideoName.split(".");
                    thisVideoName.pop();
                    thisVideoName = thisVideoName.join(".");
                    var thisFilePath = currentPlaylist[i].Filepath;
                    var ext = currentPlaylist[i].Ext;
                    $("#videolist").append(`<div class="item videoObject" onclick="playThisFile(this);" filename="${thisVideoName}" filepath="${thisFilePath}" ext="${ext}" playlist="${playListName}">
                        <img class="ui top aligned tiny image thumbnail" src="img/no_preview.svg">
                        <div class="content" style="width: calc(100% - 100px);">
                            <p class="header">${thisVideoName}</p>
                            <div class="description">${thisFilePath} <br> ${ext.substr(1)}</div>
                        </div>
                    </div>`);
                }

                //Render the thumbnail
                $(".videoObject").each(function(){
                    let vidDomElet = $(this);
                    ao_module_agirun("Video/backend/getThumbnail.js", {
                        file: $(this).attr("filepath")
                    },function(data){
                        if (data.error == undefined && data.length > 0){
                            //Thumbnail get. Render it to the DOM element
                            $(vidDomElet).find(".thumbnail").attr("src", 'data:image/jpg;base64,' + data);
                        }
                    } );
                });

            }

            function playThisFile(obj){
                $(".playing").removeClass("playing");
                //var fileDescriptor = $(obj).parent().parent();
                var fileDescriptor = $(obj);
                $("#videoname").text(fileDescriptor.attr("filename"));
                $("#playlistName").text(fileDescriptor.attr("playlist"));
                $("#ext").text("[" + fileDescriptor.attr("ext") + "]" );
                currentPlaying = fileDescriptor.attr('filename');
                playVideo("../media?file=" + encodeURIComponent(fileDescriptor.attr("filepath")));
                $(fileDescriptor).addClass("playing");
                window.scrollTo(0, 0); 
            }

            function playVideo(src){
                playerObject.video.src = src;
                playerObject.play()
                updateWindowEvents();
            }
            
            $(window).on("resize",function(){
                updateWindowEvents();
            });

            function updateWindowEvents(){
                $("#dplayer").css("max-height",window.innerHeight);
            }
        </script>
    </body>
</html>