From 13e60e121c60538861f6c9d0d0d701058b8e848b Mon Sep 17 00:00:00 2001
From: jacky <sz2ghzy@163.com>
Date: Wed, 11 Aug 2021 11:05:35 +0800
Subject: [PATCH] add list view for playlist

---
 js/moovie.js                    | 1319 ++++++++++++++++---------------
 js/plugins/playlist/README.md   |    4 +
 js/plugins/playlist/playlist.js |  193 ++++-
 3 files changed, 858 insertions(+), 658 deletions(-)

diff --git a/js/moovie.js b/js/moovie.js
index 2d41ffc..0c53498 100644
--- a/js/moovie.js
+++ b/js/moovie.js
@@ -1,4 +1,3 @@
-
 /*-------------------------
 moovie.js - HTML5 Media player made for movies
 Made by: Bruno Vieira
@@ -8,34 +7,34 @@ class Moovie {
     constructor(options) {
 
         const defaults = {
-            selector : 'defaultId',
-            dimensions : {
-              width: "100%"
+            selector: 'defaultId',
+            dimensions: {
+                width: "100%"
             },
-            config : {
-                storage : {
+            config: {
+                storage: {
                     captionOffset: false,
                     playrateSpeed: false,
                     captionSize: false
                 },
-                controls : {
-                    playtime : true,
-                    mute : true,
-                    volume : true,
-                    subtitles : true,
-                    config : true,
-                    fullscreen : true,
-                    submenuCaptions : true,
-                    submenuOffset : true,
-                    submenuSpeed : true,
-                    allowLocalSubtitles : true  
+                controls: {
+                    playtime: true,
+                    mute: true,
+                    volume: true,
+                    subtitles: true,
+                    config: true,
+                    fullscreen: true,
+                    submenuCaptions: true,
+                    submenuOffset: true,
+                    submenuSpeed: true,
+                    allowLocalSubtitles: true
                 },
-                i18n : {
-                    play : "(Play:Pause)",
-                    mute : "(Mute:Unmute)",
-                    subtitles : "(Enable:Disable) Subtitles",
-                    config : "Settings",
-                    fullscreen : "(Enter:Exit) Fullscreen",
+                i18n: {
+                    play: "(Play:Pause)",
+                    mute: "(Mute:Unmute)",
+                    subtitles: "(Enable:Disable) Subtitles",
+                    config: "Settings",
+                    fullscreen: "(Enter:Exit) Fullscreen",
                     main_topic: "settings:",
                     main_caption: "Captions",
                     main_offset: "Caption Offset",
@@ -49,40 +48,35 @@ class Moovie {
                     speed_topic: "Speed Adjust"
                 }
             },
-            icons : {
+            icons: {
                 path: "./icons/"
             },
-            customEvents: [
-                  {
-                    type: "",
-                    to: "",
-                    starttime: "",
-                    endtime: "",
-                    content: "",
-                    position: "",
-                    class: ""
-                  }
-            ]
-        };      
+            customEvents: [{
+                type: "",
+                to: "",
+                starttime: "",
+                endtime: "",
+                content: "",
+                position: "",
+                class: ""
+            }]
+        };
 
         // Player Random ID
         var randomID = Math.floor(Math.random() * (9999 - 0 + 1)) + 0;
-        
+
         // Get Defaults Controls
         options.config == undefined ? options.config = defaults.config : options.config;
         options.config.controls == undefined ? options.config.controls = defaults.config.controls : options.config.controls
-        for(var key in defaults.config.controls)
-        { options.config.controls[key] == undefined ? options.config.controls[key] = defaults.config.controls[key] :  options.config.controls[key] = options.config.controls[key]; }
+        for (var key in defaults.config.controls) { options.config.controls[key] == undefined ? options.config.controls[key] = defaults.config.controls[key] : options.config.controls[key] = options.config.controls[key]; }
 
         // Get default storage
         options.config.storage == undefined ? options.config.storage = defaults.config.storage : options.config.storage
-        for(var key in defaults.config.storage)
-        { options.config.storage[key] == undefined ? options.config.storage[key] = defaults.config.storage[key] :  options.config.storage[key] = options.config.storage[key];}
+        for (var key in defaults.config.storage) { options.config.storage[key] == undefined ? options.config.storage[key] = defaults.config.storage[key] : options.config.storage[key] = options.config.storage[key]; }
 
         // Get default i18n
         options.config.i18n == undefined ? options.config.i18n = defaults.config.i18n : options.config.i18n
-        for(var key in defaults.config.i18n)
-        { options.config.i18n[key] == undefined ? options.config.i18n[key] = defaults.config.i18n[key] :  options.config.i18n[key] = options.config.i18n[key];}
+        for (var key in defaults.config.i18n) { options.config.i18n[key] == undefined ? options.config.i18n[key] = defaults.config.i18n[key] : options.config.i18n[key] = options.config.i18n[key]; }
 
         this.selector = options.selector.substring(1) || defaults.selector.substring(1);
         this.dimensions = options.dimensions || defaults.dimensions;
@@ -97,7 +91,7 @@ class Moovie {
             captions: {
                 name: false,
                 subtitles: false
-            }, 
+            },
             offset: {
                 value: false
             }
@@ -105,7 +99,15 @@ class Moovie {
 
         // Global
         var _this = this;
-        var parts, video, subtitles = 0, fullyloaded = 0, cuevalue = 0, speed = 1, moovie_el_play, moovie_el_buffered, moovie_el_mute, moovie_el_subtitles, moovie_el_fullscreen, moovie_el_locally, moovie_ul_soundv, moovie_el_sinput, moovie_el_rinput, hassubtitles = 0, moovie_el_range, moovie_el_localsub, moovie_el_speed, moovie_ishiden = 0, moovie_el_cuetimer, moovie_el_player, moovie_elprogress, moovie_el_toggle, ranges, fullscreen, offsettime=0, isopen = 0, moovie_el_volume, moovie_el_video, moovie_el_poster, moovie_el_submenu, moovie_el_controls,  moovie_el_progress, moovie_el_captions, moovie_el_submain;
+        var parts, video, subtitles = 0,
+            fullyloaded = 0,
+            cuevalue = 0,
+            speed = 1,
+            moovie_el_play, moovie_el_buffered, moovie_el_mute, moovie_el_subtitles, moovie_el_fullscreen, moovie_el_locally, moovie_ul_soundv, moovie_el_sinput, moovie_el_rinput, hassubtitles = 0,
+            moovie_el_range, moovie_el_localsub, moovie_el_speed, moovie_ishiden = 0,
+            moovie_el_cuetimer, moovie_el_player, moovie_elprogress, moovie_el_toggle, ranges, fullscreen, offsettime = 0,
+            isopen = 0,
+            moovie_el_volume, moovie_el_video, moovie_el_poster, moovie_el_submenu, moovie_el_controls, moovie_el_progress, moovie_el_captions, moovie_el_submain;
         var selectedCaption = [];
         var icons = this.icons;
         var config = this.config;
@@ -114,58 +116,57 @@ class Moovie {
         var customEvents = this.customEvents;
 
         // Main menu object
-        var mainmenu = this.mainmenu = [
-            {
+        var mainmenu = this.mainmenu = [{
                 name: "play_button",
-                element: "<button class='player__button toggle' id='tooglebutton_"+randomID+"'><img id='moovie_bplay_"+randomID+"' src='"+icons.path+"play.svg'></button>",
+                element: "<button class='player__button toggle' id='tooglebutton_" + randomID + "'><img id='moovie_bplay_" + randomID + "' src='" + icons.path + "play.svg'></button>",
                 opcional: false,
                 tooltip: this.i18n.play
             },
             {
                 name: "progress_bar",
-                element: "<div class='moovie_cuetime' id='moovie_cue_timer_"+randomID+"'>loading...</div><div id='moovie_moovie_el_progressbar_"+randomID+"' class='moovie_progress player__slider' top:15px;><input type='range' id='range_progress_"+randomID+"' class='styled-slider slider-progress' min='0' value='0' step='0.01' autocomplete='off' style='width: 100%; cursor:pointer;' /><canvas id='moovie_buffered_"+randomID+"' style='position: absolute; bottom: 14px; left: 0; opacity: 0.4;  width: 100%; height:5px;'></canvas></div>", 
+                element: "<div class='moovie_cuetime' id='moovie_cue_timer_" + randomID + "'>loading...</div><div id='moovie_moovie_el_progressbar_" + randomID + "' class='moovie_progress player__slider' top:15px;><input type='range' id='range_progress_" + randomID + "' class='styled-slider slider-progress' min='0' value='0' step='0.01' autocomplete='off' style='width: 100%; cursor:pointer;' /><canvas id='moovie_buffered_" + randomID + "' style='position: absolute; bottom: 14px; left: 0; opacity: 0.4;  width: 100%; height:5px;'></canvas></div>",
                 opcional: false,
-                tooltip: false          
+                tooltip: false
             },
             {
                 name: "playtime",
-                element: "<div id='moovie_el_current_"+randomID+"' class='player__button player_button_disabled moovie_currentime'><span id='moovie_currentime_"+randomID+"'>00:00</span> / <span id='moovie_fulltime_"+randomID+"'></span></div>",
+                element: "<div id='moovie_el_current_" + randomID + "' class='player__button player_button_disabled moovie_currentime'><span id='moovie_currentime_" + randomID + "'>00:00</span> / <span id='moovie_fulltime_" + randomID + "'></span></div>",
                 opcional: true,
-                tooltip: false 
+                tooltip: false
             },
             {
                 name: "mute",
-                element: "<button id='mooviegrid_mute_"+randomID+"' class='player__button'><img id='icon_volume_"+randomID+"' src='"+icons.path+"volume.svg'></button>",
+                element: "<button id='mooviegrid_mute_" + randomID + "' class='player__button'><img id='icon_volume_" + randomID + "' src='" + icons.path + "volume.svg'></button>",
                 opcional: true,
                 tooltip: this.i18n.mute
             },
             {
                 name: "volume",
-                element: "<input type='range' id='mooviegrid_volume_"+randomID+"' style='max-width:100px; min-width:50px;' name='volume' class='moovie_progress_sound' min=0 max='1' step='0.01' value='1'>",
+                element: "<input type='range' id='mooviegrid_volume_" + randomID + "' style='max-width:100px; min-width:50px;' name='volume' class='moovie_progress_sound' min=0 max='1' step='0.01' value='1'>",
                 opcional: true,
                 tooltip: false
             },
             {
                 name: "subtitles",
-                element: "<button id='moovie_subtitle_"+randomID+"' style='margin-left:5px' class='player__button'><img class='opacity_svg' id='moovie_subtitle_svg_"+randomID+"' src='"+icons.path+"cc.svg'></button>",
+                element: "<button id='moovie_subtitle_" + randomID + "' style='margin-left:5px' class='player__button'><img class='opacity_svg' id='moovie_subtitle_svg_" + randomID + "' src='" + icons.path + "cc.svg'></button>",
                 opcional: true,
-                tooltip:  this.i18n.subtitles
+                tooltip: this.i18n.subtitles
             },
             {
                 name: "config",
-                element: "<button id='moovie_el_cog_"+randomID+"' class='player__button'><img src='"+icons.path+"cog.svg'></button>",
+                element: "<button id='moovie_el_cog_" + randomID + "' class='player__button'><img src='" + icons.path + "cog.svg'></button>",
                 opcional: true,
                 tooltip: this.i18n.config
             },
             {
                 name: "fullscreen",
-                element: "<button id='fullscreen_"+randomID+"' class='player__button fullscreen_button'><img src='"+icons.path+"fullscreen.svg'></button>",
+                element: "<button id='fullscreen_" + randomID + "' class='player__button fullscreen_button'><img src='" + icons.path + "fullscreen.svg'></button>",
                 opcional: true,
                 tooltip: this.i18n.fullscreen
             },
             {
                 name: "Main Submenu",
-                element: "<div style='display:none;' class='moovie_submenu menuclosed' id='moovie_submenu_"+randomID+"'></div>",
+                element: "<div style='display:none;' class='moovie_submenu menuclosed' id='moovie_submenu_" + randomID + "'></div>",
                 opcional: false,
                 tooltip: false
             }
@@ -173,57 +174,54 @@ class Moovie {
 
         // Main submenu object
         var submenu = this.submenu = {
-            mainSubmenu : {
-                mainElement : "<ul id='moovie_submenu_main_"+randomID+"'></ul>",
-                parentID : "moovie_submenu_main_",
-                elements : [
-                    {
+            mainSubmenu: {
+                mainElement: "<ul id='moovie_submenu_main_" + randomID + "'></ul>",
+                parentID: "moovie_submenu_main_",
+                elements: [{
                         name: "topic",
-                        element: "<li class='topic_submenu'>"+this.i18n.main_topic+"</li>",
-                        opcional: false 
+                        element: "<li class='topic_submenu'>" + this.i18n.main_topic + "</li>",
+                        opcional: false
                     },
                     {
                         name: "submenuCaptions",
-                        element: "<li id='this.moovie_el_topicCaption_"+randomID+"'><span>"+this.i18n.main_caption+"</span><span class='option_submenu' id='option_submenu_caption_"+randomID+"'>"+this.i18n.main_disabled+"</span></li>",
+                        element: "<li id='this.moovie_el_topicCaption_" + randomID + "'><span>" + this.i18n.main_caption + "</span><span class='option_submenu' id='option_submenu_caption_" + randomID + "'>" + this.i18n.main_disabled + "</span></li>",
                         opcional: true
-                    },      
+                    },
                     {
                         name: "submenuOffset",
-                        element: "<li id='moovie_el_capoffset_"+randomID+"'><span >"+this.i18n.main_offset+"</span><span class='option_submenu' id='option_submenu_range_"+randomID+"'>0s</span></li>",
+                        element: "<li id='moovie_el_capoffset_" + randomID + "'><span >" + this.i18n.main_offset + "</span><span class='option_submenu' id='option_submenu_range_" + randomID + "'>0s</span></li>",
                         opcional: true
-                    },  
+                    },
                     {
                         name: "submenuSpeed",
-                        element: "<li id='topic_submenu_speed_"+randomID+"'><span>"+this.i18n.main_speed+"</span><span class='option_submenu' id='option_submenu_speed_"+randomID+"'>"+this.i18n.main_default+"</span></li>",
+                        element: "<li id='topic_submenu_speed_" + randomID + "'><span>" + this.i18n.main_speed + "</span><span class='option_submenu' id='option_submenu_speed_" + randomID + "'>" + this.i18n.main_default + "</span></li>",
                         opcional: true
-                    }  
+                    }
                 ]
             },
-            captionSubmenu : {
-                mainElement : "<ul style='display:none;' id='moovie_submenu_captions_"+randomID+"'><input style='display:none;' type='file' id='localsub_"+randomID+"'><li class='topic_submenu'>"+this.i18n.caption_topic+"</li><li id='moovie_el_capback_"+randomID+"' style='font-weight:bold;'>"+this.i18n.caption_back+"</li></ul>",
-                parentID : "moovie_submenu_captions_",
-                elements: [
-                    {
-                        name: "allowLocalSubtitles",
-                        element: "<li id='locally_"+randomID+"' style='font-weight:bold;'>"+this.i18n.caption_load+"</li>",
-                        opcional: true 
-                    }
-                ] 
+            captionSubmenu: {
+                mainElement: "<ul style='display:none;' id='moovie_submenu_captions_" + randomID + "'><input style='display:none;' type='file' id='localsub_" + randomID + "'><li class='topic_submenu'>" + this.i18n.caption_topic + "</li><li id='moovie_el_capback_" + randomID + "' style='font-weight:bold;'>" + this.i18n.caption_back + "</li></ul>",
+                parentID: "moovie_submenu_captions_",
+                elements: [{
+                    name: "allowLocalSubtitles",
+                    element: "<li id='locally_" + randomID + "' style='font-weight:bold;'>" + this.i18n.caption_load + "</li>",
+                    opcional: true
+                }]
+            },
+            rangeSubmenu: {
+                mainElement: "<ul style='display:none; width:250px;' id='moovie_range_captions_" + randomID + "'><li class='topic_submenu'>" + this.i18n.offset_topic + "<output style='position:absolute; right:22px;' id='valoffset_" + randomID + "'>0</output></li><li class='topic_submenu'><span>-5s</span><span style='float: right;'>+5s</span><input type='range' oninput='valoffset_" + randomID + ".value = offset_range_input_" + randomID + ".value' id='offset_range_input_" + randomID + "' min='-5' max='5' step='0.2'></li>",
+                parentID: "moovie_range_captions_",
             },
-            rangeSubmenu : {
-                mainElement : "<ul style='display:none; width:250px;' id='moovie_range_captions_"+randomID+"'><li class='topic_submenu'>"+this.i18n.offset_topic+"<output style='position:absolute; right:22px;' id='valoffset_"+randomID+"'>0</output></li><li class='topic_submenu'><span>-5s</span><span style='float: right;'>+5s</span><input type='range' oninput='valoffset_"+randomID+".value = offset_range_input_"+randomID+".value' id='offset_range_input_"+randomID+"' min='-5' max='5' step='0.2'></li>",
-                parentID : "moovie_range_captions_",
-           },
-            speedSubmenu : {
-                mainElement : "<ul style='display:none; width:250px;' id='moovie_range_speed_"+randomID+"'><li class='topic_submenu'>"+this.i18n.speed_topic+"<output style='position:absolute; right:22px;' id='valoffset_speed_"+randomID+"'>1</output></li><li class='topic_submenu'><span>0.1x</span><span style='float: right;'>8x</span><input type='range' value='1' oninput='valoffset_speed_"+randomID+".value = offset_range_speed_"+randomID+".value' id='offset_range_speed_"+randomID+"' min='0.1' max='8' step='0.1'></li>",
-                parentID : "moovie_range_speed_"
+            speedSubmenu: {
+                mainElement: "<ul style='display:none; width:250px;' id='moovie_range_speed_" + randomID + "'><li class='topic_submenu'>" + this.i18n.speed_topic + "<output style='position:absolute; right:22px;' id='valoffset_speed_" + randomID + "'>1</output></li><li class='topic_submenu'><span>0.1x</span><span style='float: right;'>8x</span><input type='range' value='1' oninput='valoffset_speed_" + randomID + ".value = offset_range_speed_" + randomID + ".value' id='offset_range_speed_" + randomID + "' min='0.1' max='8' step='0.1'></li>",
+                parentID: "moovie_range_speed_"
             }
-        }  
+        }
 
         /*
-        ** Custom Events
-        */
-        
+         ** Custom Events
+         */
+
         // Caption Change
         let captionchange = new CustomEvent("captionchange", {
             detail: this.events.captions,
@@ -245,15 +243,25 @@ class Moovie {
             bubbles: false,
             cancelable: false
         });
-             
+
+        // Control Panel toggle
+        var togglecontrolpanel = new CustomEvent("togglecontrolpanel", {
+            detail: {
+                show: false
+            },
+            bubbles: false,
+            cancelable: false
+        });
+
         /*
-        ** Main throttle function
-        */
-        function throttle (func, interval) {
+         ** Main throttle function
+         */
+        function throttle(func, interval) {
             var timeout;
             return function() {
-                var context = this, args = arguments;
-                var later = function () {
+                var context = this,
+                    args = arguments;
+                var later = function() {
                     timeout = false;
                 };
                 if (!timeout) {
@@ -265,17 +273,16 @@ class Moovie {
         }
 
         /*
-        ** function to set new current time
-        */
-        function SetCurrentTime(currentT)
-        {
-            _this.video.currentTime = currentT; 
+         ** function to set new current time
+         */
+        function SetCurrentTime(currentT) {
+            _this.video.currentTime = currentT;
             _this.moovie_el_progressbar.value = currentT;
         }
 
         /*
-        ** function that handles custom events
-        */
+         ** function that handles custom events
+         */
         var handleCustomEvents = this.handleCustomEvents = function handleCustomEvents() {
 
             // Loop all events
@@ -284,54 +291,52 @@ class Moovie {
                 let toGo = customEvents[i].to;
                 let eventID = Math.floor(Math.random() * (9999 - 0 + 1)) + 0;
 
-                if(customEvents[i].hasOwnProperty("fired") && customEvents[i].fired){
+                if (customEvents[i].hasOwnProperty("fired") && customEvents[i].fired) {
 
                     // Remove event after its time
-                    if(video.currentTime > customEvents[i].endtime)
-                    {
-                      customEvents[i].fired = false;
-                      document.getElementById("moovie_ce_"+customEvents[i].eventID).remove();
+                    if (video.currentTime > customEvents[i].endtime) {
+                        customEvents[i].fired = false;
+                        document.getElementById("moovie_ce_" + customEvents[i].eventID).remove();
                     }
 
                 } else {
 
-                    if(video.currentTime > customEvents[i].starttime && video.currentTime < customEvents[i].endtime)
-                    {
+                    if (video.currentTime > customEvents[i].starttime && video.currentTime < customEvents[i].endtime) {
                         // Assign new keys and infos
-                        Object.assign(customEvents[i], {fired: true});
-                        Object.assign(customEvents[i], {eventID: eventID});
+                        Object.assign(customEvents[i], { fired: true });
+                        Object.assign(customEvents[i], { eventID: eventID });
 
-                        moovie_el_video.insertAdjacentHTML("beforeend", "<div id='moovie_ce_"+eventID+"' class='moovie_cevent "+customEvents[i].position+" "+customEvents[i].class+"'>"+customEvents[i].content+"</div>");
-                        let eventElement = document.getElementById("moovie_ce_"+eventID);
+                        moovie_el_video.insertAdjacentHTML("beforeend", "<div id='moovie_ce_" + eventID + "' class='moovie_cevent " + customEvents[i].position + " " + customEvents[i].class + "'>" + customEvents[i].content + "</div>");
+                        let eventElement = document.getElementById("moovie_ce_" + eventID);
 
                         // Check what type of button it is and give it's instructions
-                        switch(customEvents[i].type) {
+                        switch (customEvents[i].type) {
                             case "skip":
-                                if(customEvents[i].to <= video.duration && !isNaN(customEvents[i].to) && customEvents[i].to){
+                                if (customEvents[i].to <= video.duration && !isNaN(customEvents[i].to) && customEvents[i].to) {
                                     // Add Skip event listener
                                     eventElement.addEventListener("click", function() {
-                                      SetCurrentTime(toGo)
-                                    }); 
+                                        SetCurrentTime(toGo)
+                                    });
                                 }
-                            break;
+                                break;
                             case "redirect":
-                                if(customEvents[i].to){
+                                if (customEvents[i].to) {
                                     // Add Redirect event listener
                                     eventElement.addEventListener("click", function() {
-                                      window.location.href = toGo;
-                                    }); 
+                                        window.location.href = toGo;
+                                    });
                                 }
-                            break;
+                                break;
                             case "function":
-                                if(customEvents[i].to){
+                                if (customEvents[i].to) {
                                     // Add Redirect event listener
                                     eventElement.addEventListener("click", function() {
-                                      toGo();
-                                    }); 
+                                        toGo();
+                                    });
                                 }
-                            break;
+                                break;
                             default:
-                            console.log("No action was added to this event");
+                                console.log("No action was added to this event");
                         }
                     }
                 }
@@ -339,48 +344,55 @@ class Moovie {
         }
 
         /*
-        ** function that handles internal storage
-        */
+         ** function that handles internal storage
+         */
         var handleStorage = this.handleStorage = function handleStorage(order, variable, value) {
-            switch(order) {
+            switch (order) {
                 case "set":
                     localStorage.setItem(variable, value);
-                break;
-                case "get": break;
+                    break;
+                case "get":
+                    break;
                 case "setStorage":
-                    if (config["storage"]["captionOffset"]){ moovie_el_rinput.value = localStorage.getItem("captionOffset"); OffsetChange();}
-                    if (config["storage"]["playrateSpeed"]){ moovie_el_sinput.value = localStorage.getItem("playrateSpeed"); SpeedChange();}
-                    if (config["storage"]["captionSize"]){ document.getElementById("caption_track_"+randomID).style.fontSize = localStorage.getItem("captionSize")+"px"; }
-                break;
+                    if (config["storage"]["captionOffset"]) {
+                        moovie_el_rinput.value = localStorage.getItem("captionOffset");
+                        OffsetChange();
+                    }
+                    if (config["storage"]["playrateSpeed"]) {
+                        moovie_el_sinput.value = localStorage.getItem("playrateSpeed");
+                        SpeedChange();
+                    }
+                    if (config["storage"]["captionSize"]) { document.getElementById("caption_track_" + randomID).style.fontSize = localStorage.getItem("captionSize") + "px"; }
+                    break;
             }
         }
 
         /*
-        ** Change play/pause function and change all icons
-        */
+         ** Change play/pause function and change all icons
+         */
         var togglePlay = this.togglePlay = function togglePlay() {
 
             // Remove poster background.
-            document.getElementById("poster_layer_"+randomID).style.backgroundImage = "none";
+            document.getElementById("poster_layer_" + randomID).style.backgroundImage = "none";
             if (video.paused == true) {
                 video.play();
-                document.getElementById("moovie_bplay_"+randomID).src = icons.path+"pause.svg"
+                document.getElementById("moovie_bplay_" + randomID).src = icons.path + "pause.svg"
                 togglePoster("hide");
                 ChangeTooltip("play_button", 1);
             } else {
                 video.pause();
-                document.getElementById("moovie_bplay_"+randomID).src = icons.path+"play.svg"
+                document.getElementById("moovie_bplay_" + randomID).src = icons.path + "play.svg"
                 togglePoster("show");
                 ChangeTooltip("play_button", 0);
             }
         }
 
         /*
-        ** Fullscreen handler
-        */
+         ** Fullscreen handler
+         */
         var SetFullScreen = this.SetFullScreen = function SetFullScreen(order) {
-            switch(order) {
-            case "toggleFullscreen":
+            switch (order) {
+                case "toggleFullscreen":
 
                     if (moovie_el_player.requestFullscreen) {
                         moovie_el_player.requestFullscreen();
@@ -406,27 +418,27 @@ class Moovie {
 
                     Submenu("CAll");
 
-            break;
-            case "checkFullscreen":
-                if (1 >= outerHeight - innerHeight) { ChangeTooltip("fullscreen", 1);} else { ChangeTooltip("fullscreen", 0); }
-            break;
+                    break;
+                case "checkFullscreen":
+                    if (1 >= outerHeight - innerHeight) { ChangeTooltip("fullscreen", 1); } else { ChangeTooltip("fullscreen", 0); }
+                    break;
                 default:
             }
         }
 
         /*
-        ** Buffered Video
-        */
+         ** Buffered Video
+         */
         function bufferedVideo() {
-            
+
             // Canvas element
             var canvasHandler = moovie_el_buffered.getContext('2d');
-            var b = _this.video.buffered,       // Buffer object
-                i = b.length,                   // counter for loop
-                w = moovie_el_buffered.width,   // cache canvas width and height
+            var b = _this.video.buffered, // Buffer object
+                i = b.length, // counter for loop
+                w = moovie_el_buffered.width, // cache canvas width and height
                 h = moovie_el_buffered.height,
-                vl = _this.video.duration,      // total video duration in seconds
-                x1, x2;                         // buffer segment mark positions
+                vl = _this.video.duration, // total video duration in seconds
+                x1, x2; // buffer segment mark positions
 
             // Clear canvas
             canvasHandler.clearRect(0, 0, w, h);
@@ -443,13 +455,13 @@ class Moovie {
         }
 
         /*
-        ** Focus player to add keybinds
-        */
+         ** Focus player to add keybinds
+         */
         function focusPlayer() { video.focus(); }
 
         /*
-        ** Toggle Poster
-        */
+         ** Toggle Poster
+         */
         function togglePoster(order) {
             if (order == "show") {
                 moovie_el_poster.style.display = "block";
@@ -463,84 +475,84 @@ class Moovie {
         }
 
         /*
-        ** Skips video on click
-        */
+         ** Skips video on click
+         */
         function skip() {
             video.currentTime += parseFloat(this.dataset.skip);
         }
 
         /*
-        ** Range value update
-        */
+         ** Range value update
+         */
         function handleRangeUpdate() {
             video[this.name] = this.value;
         }
 
         /*
-        ** Current time handler
-        */
+         ** Current time handler
+         */
         function movieVideo(time, direction) {
             switch (direction) {
                 case "left":
                     var vid_currentTime = video.currentTime;
                     video.currentTime = vid_currentTime - time;
                     var ncurrentTime = moovie_el_progress.value;
-                    moovie_el_progress.value = Number(ncurrentTime)-5;
-                break;
+                    moovie_el_progress.value = Number(ncurrentTime) - 5;
+                    break;
                 case "right":
                     var vid_currentTime = video.currentTime;
                     video.currentTime = vid_currentTime + time;
                     var ncurrentTime = moovie_el_progress.value;
-                    moovie_el_progress.value = Number(ncurrentTime)+5;
-                break;
-             }
+                    moovie_el_progress.value = Number(ncurrentTime) + 5;
+                    break;
+            }
         }
 
         /*
-        ** Slide position
-        */
+         ** Slide position
+         */
         function calcSliderPos(e) {
-            return (e.offsetX / e.target.clientWidth) *  parseInt(e.target.getAttribute('max'));
+            return (e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute('max'));
         }
 
         /*
-        ** Progress bar cue timer function
-        */
+         ** Progress bar cue timer function
+         */
         function cueTime(e) {
             cuevalue = calcSliderPos(e).toFixed(2);
             moovie_el_cuetimer.style.opacity = "1";
-            moovie_el_cuetimer.style.left = e.offsetX+"px";
+            moovie_el_cuetimer.style.left = e.offsetX + "px";
             moovie_el_cuetimer.innerHTML = player_time(cuevalue);
         }
 
         /*
-        ** Detect touchscreen function so it can be added diff eventlisteners
-        */
+         ** Detect touchscreen function so it can be added diff eventlisteners
+         */
         function detectTouchScreen() {
             var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
             return isMobile;
         }
 
         /*
-        ** Detect OS
-        */
+         ** Detect OS
+         */
         function androidOrIOS() {
             const userAgent = navigator.userAgent;
-            if (/android/i.test(userAgent)){
+            if (/android/i.test(userAgent)) {
                 return 'android';
             }
-            if (/iPad|iPhone|iPod/i.test(userAgent)){
+            if (/iPad|iPhone|iPod/i.test(userAgent)) {
                 return 'ios';
             }
         }
 
         /*
-        ** Formar player time
-        */
+         ** Format player time
+         */
         function player_time(secs) {
-            var t = new Date(1970,0,1);
+            var t = new Date(1970, 0, 1);
             t.setSeconds(secs);
-            var s = t.toTimeString().substr(0,8);
+            var s = t.toTimeString().substr(0, 8);
             if (secs > 86399) {
                 s = Math.floor((t - Date.parse("1/1/70")) / 3600000) + s.substr(2);
             }
@@ -552,53 +564,56 @@ class Moovie {
         }
 
         /*
-        ** Update moovie time on "timeupdate" event listener
-        */
+         ** Update moovie time on "timeupdate" event listener
+         */
         function updateTime() {
             // Update current times
-            if (moovie_ishiden == 0){ document.getElementById("moovie_currentime_"+randomID).innerHTML = player_time(video.currentTime); }
-            if (video.currentTime >= video.duration) { video.currentTime = 0; moovie_el_progress.value = 0; togglePlay(); }
+            if (moovie_ishiden == 0) { document.getElementById("moovie_currentime_" + randomID).innerHTML = player_time(video.currentTime); }
+            if (video.currentTime >= video.duration) {
+                video.currentTime = 0;
+                moovie_el_progress.value = 0;
+                togglePlay();
+            }
         }
 
         /*
-        ** Handle local subtitles
-        */
+         ** Handle local subtitles
+         */
         function localSubtitles() {
 
             const allowedFormats = [".vtt", ".srt"];
             const toBase64 = file => new Promise((resolve, reject) => {
-                  const reader = new FileReader();
-                  reader.readAsDataURL(file);
-                  reader.onload = () => resolve(reader.result);
-                  reader.onerror = error => reject(error);
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = error => reject(error);
             });
 
-            let promise = new Promise( async function(resolve, reject) { 
-               
-               const file = document.querySelector('#localsub_'+randomID).files[0];
-               var CheckFormat = file["name"].substr(file["name"].length - 4);
+            let promise = new Promise(async function(resolve, reject) {
 
-               // Check if format is allowed
-               if(allowedFormats.includes(CheckFormat))
-               {
-                    document.querySelectorAll('#moovie_submenu_captions_'+randomID+' .caption_track').forEach((item) => { item.remove(); });
+                const file = document.querySelector('#localsub_' + randomID).files[0];
+                var CheckFormat = file["name"].substr(file["name"].length - 4);
+
+                // Check if format is allowed
+                if (allowedFormats.includes(CheckFormat)) {
+                    document.querySelectorAll('#moovie_submenu_captions_' + randomID + ' .caption_track').forEach((item) => { item.remove(); });
                     const CaptionSrc = await toBase64(file);
-                    let tname = file["name"].substring(0,10);
-                    document.getElementById(selector).insertAdjacentHTML("beforeend", "<track label='"+tname+"...' format='"+CheckFormat+"' srclang='Local' src='"+CaptionSrc+"'>");
-                    
+                    let tname = file["name"].substring(0, 10);
+                    document.getElementById(selector).insertAdjacentHTML("beforeend", "<track label='" + tname + "...' format='" + CheckFormat + "' srclang='Local' src='" + CaptionSrc + "'>");
+
                     resolve();
 
-               } else { console.log("Only .vtt and .srt formats are allowed.");}
-            }); 
-            promise.then(function () { 
+                } else { console.log("Only .vtt and .srt formats are allowed."); }
+            });
+            promise.then(function() {
                 GetCaptions();
                 console.log("Local caption added successfully.");
             });
         }
 
         /*
-        ** Progress bar
-        */
+         ** Progress bar
+         */
         var handleProgress = throttle(function() {
 
             // Get percentage buffered
@@ -607,21 +622,21 @@ class Moovie {
             // Set current time moovie_el_progressbar
             if (!video.paused) {
                 var ncurrentTime = moovie_el_progress.value;
-                moovie_el_progress.value = Number(ncurrentTime)+1;
+                moovie_el_progress.value = Number(ncurrentTime) + 1;
             }
 
         }, 1000);
 
         /*
-        ** Offset change function
-        */
+         ** Offset change function
+         */
         var OffsetChange = this.OffsetChange = function OffsetChange() {
-            offsettime =  document.getElementById("offset_range_input_"+randomID).value;
-            document.getElementById("option_submenu_range_"+randomID).innerHTML = offsettime+"s";
-            document.getElementById("valoffset_"+randomID).value = offsettime;
+            offsettime = document.getElementById("offset_range_input_" + randomID).value;
+            document.getElementById("option_submenu_range_" + randomID).innerHTML = offsettime + "s";
+            document.getElementById("valoffset_" + randomID).value = offsettime;
 
             // Save info in internal storage if true
-            if (config["storage"]["captionOffset"]){ handleStorage("set", "captionOffset", offsettime); }
+            if (config["storage"]["captionOffset"]) { handleStorage("set", "captionOffset", offsettime); }
 
             // Update object to event listener
             _this.events.offset.value = offsettime;
@@ -631,38 +646,39 @@ class Moovie {
         }
 
         /*
-        ** Speed change functions
-        */
+         ** Speed change functions
+         */
         var SpeedChange = this.SpeedChange = function SpeedChange() {
-            speed = document.getElementById("offset_range_speed_"+randomID).value;
-            document.getElementById("valoffset_speed_"+randomID).value = speed;
+            speed = document.getElementById("offset_range_speed_" + randomID).value;
+            document.getElementById("valoffset_speed_" + randomID).value = speed;
 
-            if (speed == 1){ document.getElementById("option_submenu_speed_"+randomID).innerHTML = _this.i18n.main_default; } else {
-            document.getElementById("option_submenu_speed_"+randomID).innerHTML = speed+"x"; }
+            if (speed == 1) { document.getElementById("option_submenu_speed_" + randomID).innerHTML = _this.i18n.main_default; } else {
+                document.getElementById("option_submenu_speed_" + randomID).innerHTML = speed + "x";
+            }
 
             video.playbackRate = speed;
 
             // Save info in internal storage if true
-            if (config["storage"]["playrateSpeed"]){ handleStorage("set", "playrateSpeed", speed); }
+            if (config["storage"]["playrateSpeed"]) { handleStorage("set", "playrateSpeed", speed); }
         }
 
         /*
-        ** Handler progress bar click/mousemove/touch events
-        */
+         ** Handler progress bar click/mousemove/touch events
+         */
         function Scrub(e) {
 
             if (!detectTouchScreen()) {
                 var offsetEvent = e.offsetX;
                 let scrubTime = (offsetEvent / moovie_elprogress.offsetWidth) * video.duration;
-                if (scrubTime >= video.duration){ scrubTime = video.duration; }
+                if (scrubTime >= video.duration) { scrubTime = video.duration; }
                 video.currentTime = scrubTime;
             } else {
-                var offsetEvent = document.getElementById("range_progress_"+randomID).value;
+                var offsetEvent = document.getElementById("range_progress_" + randomID).value;
 
                 if (offsetEvent == undefined) {
                     offsetEvent = e.touches[0].clientX;
                     let scrubTime = (offsetEvent / moovie_elprogress.offsetWidth) * video.duration;
-                    if (scrubTime >= video.duration){ scrubTime = video.duration; }
+                    if (scrubTime >= video.duration) { scrubTime = video.duration; }
                     video.currentTime = scrubTime;
                 } else {
                     video.currentTime = offsetEvent;
@@ -671,8 +687,8 @@ class Moovie {
         }
 
         /*
-        ** Handler progress bar click/mousemove/touch events
-        */
+         ** Handler progress bar click/mousemove/touch events
+         */
         function ScrubSound(e) {
             video.volume = moovie_ul_soundv.value;
             // Save Sound variable
@@ -681,93 +697,95 @@ class Moovie {
         }
 
         /*
-        ** Hide Controls
-        */
+         ** Hide Controls
+         */
         function HideControls(order) {
             if (order == "close") {
                 if (isopen == 0 && video.paused == false) {
                     Submenu("CAll");
-                    document.getElementById("moovie__controls_"+randomID).style.opacity = 0;
-                    document.getElementById("caption_track_"+randomID).style.marginBottom = "0px";
+                    document.getElementById("moovie__controls_" + randomID).style.opacity = 0;
+                    document.getElementById("caption_track_" + randomID).style.marginBottom = "0px";
+                    togglecontrolpanel.detail.show = false;
+                    _this.video.dispatchEvent(togglecontrolpanel);
                 }
-            } else if (order == "open"){
-                
+            } else if (order == "open") {
+
                 // Check if video is fully loaded, to it can display the control bar
-                if(fullyloaded == 1)
-                {
-                    document.getElementById("caption_track_"+randomID).style.marginBottom = "40px";
-                    document.getElementById("moovie__controls_"+randomID).style.opacity = 1;
+                if (fullyloaded == 1) {
+                    document.getElementById("caption_track_" + randomID).style.marginBottom = "40px";
+                    document.getElementById("moovie__controls_" + randomID).style.opacity = 1;
+                    togglecontrolpanel.detail.show = true;
+                    _this.video.dispatchEvent(togglecontrolpanel);
                 }
             }
         }
 
         /*
-        ** Change Tooltip
-        */
+         ** Change Tooltip
+         */
         var ChangeTooltip = _this.ChangeTooltip = function ChangeTooltip(elemName, defaultState) {
-         
+
             // Get tooltip element
             let ele = _this.tooltips_menu[elemName].element;
             var toolText = 0;
             for (var i = 0; i < _this.mainmenu.length; i++) {
-                if(_this.mainmenu[i].name == elemName)
+                if (_this.mainmenu[i].name == elemName)
                     toolText = _this.mainmenu[i].tooltip;
             }
 
             // Check for brackets
-            if (toolText.indexOf('(') > -1)
-            {
+            if (toolText.indexOf('(') > -1) {
                 // Get everything between brackets
                 var betweenBrackets = toolText.substring(toolText.lastIndexOf("(") + 1, toolText.lastIndexOf(")"));
                 parts = betweenBrackets.split(":");
-                
+
                 // Remove everything between brackets
                 var getNumBracketsString = toolText.replace(/\(.*\)/, '');
                 getNumBracketsString = getNumBracketsString.replace(" ", "");
 
                 // Final tootip
-                var finalTooltip = parts[defaultState]+" "+getNumBracketsString;
+                var finalTooltip = parts[defaultState] + " " + getNumBracketsString;
             }
 
-            if(finalTooltip)
+            if (finalTooltip)
                 ele.innerText = finalTooltip;
 
             // Calculates the offset position of the tooltip
-            let calculatePos = (ele.offsetWidth/2)-7; 
-            ele.style.marginLeft = "-"+calculatePos+"px"; 
+            let calculatePos = (ele.offsetWidth / 2) - 7;
+            ele.style.marginLeft = "-" + calculatePos + "px";
 
             // Check overflow (max) 
-            if((ele.offsetLeft+ele.offsetWidth) >= _this.moovie_el_controlbar.offsetWidth) {
-               
+            if ((ele.offsetLeft + ele.offsetWidth) >= _this.moovie_el_controlbar.offsetWidth) {
+
                 // calculates how much it has overflowed 
-                let getOverflows = (ele.offsetLeft+ele.offsetWidth) - _this.moovie_el_controlbar.offsetWidth;
-                getOverflows = (calculatePos+getOverflows)+5; // plus 10 for margin
-                ele.style.marginLeft = "-"+getOverflows+"px"; 
+                let getOverflows = (ele.offsetLeft + ele.offsetWidth) - _this.moovie_el_controlbar.offsetWidth;
+                getOverflows = (calculatePos + getOverflows) + 5; // plus 10 for margin
+                ele.style.marginLeft = "-" + getOverflows + "px";
 
             }
             // Check overflow (min) 
-            if(ele.offsetLeft <= 0) {   
-                ele.style.marginLeft = "-19px"; 
+            if (ele.offsetLeft <= 0) {
+                ele.style.marginLeft = "-19px";
             }
 
         }
 
         /*
-        ** Activate Subtitles
-        */
+         ** Activate Subtitles
+         */
         var ActivateSubtitles = this.ActivateSubtitles = function ActivateSubtitles() {
             if (hassubtitles == 1) {
                 if (subtitles == 0) {
-                    subtitles = 1; 
-                    document.getElementById("moovie_subtitle_svg_"+randomID).classList.remove("opacity_svg");
+                    subtitles = 1;
+                    document.getElementById("moovie_subtitle_svg_" + randomID).classList.remove("opacity_svg");
                     ChangeTooltip("subtitles", 1);
 
                     // Update object to event listener
                     _this.events.captions.subtitles = true;
 
                 } else if (subtitles == 1) {
-                    subtitles = 0; 
-                    document.getElementById("moovie_subtitle_svg_"+randomID).classList.add("opacity_svg");
+                    subtitles = 0;
+                    document.getElementById("moovie_subtitle_svg_" + randomID).classList.add("opacity_svg");
                     ChangeTooltip("subtitles", 0);
 
                     // Update object to event listener
@@ -782,10 +800,10 @@ class Moovie {
         }
 
         /*
-        ** Sound overall handler
-        */
+         ** Sound overall handler
+         */
         var checkSoundLevel = this.checkSoundLevel = function checkSoundLevel(order) {
-            switch(order) {
+            switch (order) {
 
                 case "checkMute":
 
@@ -794,18 +812,18 @@ class Moovie {
                         video.muted = false;
                         moovie_ul_soundv.value = localStorage.getItem("scrubsound");
                         video.volume = localStorage.getItem("scrubsound");
-                        document.getElementById("icon_volume_"+randomID).src = icons.path+"mute.svg";
+                        document.getElementById("icon_volume_" + randomID).src = icons.path + "mute.svg";
                         ChangeTooltip("mute", 1);
-                   
+
                     } else {
-                        document.getElementById("icon_volume_"+randomID).src = icons.path+"volume.svg";
+                        document.getElementById("icon_volume_" + randomID).src = icons.path + "volume.svg";
                         ChangeTooltip("mute", 0);
                     }
 
-                break;
+                    break;
                 case "toogleMute":
-                    if (video.muted == true) { checkSoundLevel("unmutePlayer"); } else {  checkSoundLevel("mutePlayer"); }
-                break;  
+                    if (video.muted == true) { checkSoundLevel("unmutePlayer"); } else { checkSoundLevel("mutePlayer"); }
+                    break;
                 case "checkStorage":
 
                     if (localStorage.getItem("scrubsound")) {
@@ -818,40 +836,40 @@ class Moovie {
                     }
                     checkSoundLevel("checkMute");
 
-                break; 
+                    break;
                 case "mutePlayer":
 
-                        video.muted = true;
-                        video.volume = 0;
-                        document.getElementById("icon_volume_"+randomID).src = icons.path+"mute.svg";
-                        document.getElementById("mooviegrid_volume_"+randomID).value = "0";
-                        ChangeTooltip("mute", 1);
-                break;
+                    video.muted = true;
+                    video.volume = 0;
+                    document.getElementById("icon_volume_" + randomID).src = icons.path + "mute.svg";
+                    document.getElementById("mooviegrid_volume_" + randomID).value = "0";
+                    ChangeTooltip("mute", 1);
+                    break;
                 case "unmutePlayer":
 
-                        video.muted = false;
+                    video.muted = false;
 
-                        checkSoundLevel("checkMute");
-                        if (localStorage.getItem("scrubsound")) {
-                            moovie_ul_soundv.value = localStorage.getItem("scrubsound");
-                        } else { 
-                            moovie_ul_soundv.value = "1";
-                        }
-                        ChangeTooltip("mute", 0);
+                    checkSoundLevel("checkMute");
+                    if (localStorage.getItem("scrubsound")) {
+                        moovie_ul_soundv.value = localStorage.getItem("scrubsound");
+                    } else {
+                        moovie_ul_soundv.value = "1";
+                    }
+                    ChangeTooltip("mute", 0);
 
-                        if(video.volume != 0)
-                        document.getElementById("icon_volume_"+randomID).src = icons.path+"volume.svg";
+                    if (video.volume != 0)
+                        document.getElementById("icon_volume_" + randomID).src = icons.path + "volume.svg";
 
-                break;                                 
-              default:
+                    break;
+                default:
             }
         }
 
         /*
-        ** Submenu handler function
-        */
+         ** Submenu handler function
+         */
         var Submenu = this.Submenu = function Submenu(order) {
-            switch(order) {
+            switch (order) {
 
                 case "toggleSubmenu": // Close caption menu
 
@@ -874,7 +892,7 @@ class Moovie {
                         isopen = 0;
                     }
 
-                break;
+                    break;
                 case "CAll": // Close caption menu
 
                     // Close all other submenus
@@ -887,39 +905,39 @@ class Moovie {
                     moovie_el_submenu.classList.add("menuclosed");
                     isopen = 0;
 
-                break;
+                    break;
                 case "OCaption": // Open menu caption
 
                     moovie_el_submain.style.display = "none";
                     moovie_el_captions.style.display = "block";
 
-                break;
+                    break;
                 case "CCaption": // Close caption menu
 
                     moovie_el_submain.style.display = "block";
                     moovie_el_captions.style.display = "none";
 
-                break;
+                    break;
                 case "OSpeed": // Open menu caption
 
                     moovie_el_submain.style.display = "none";
-                    document.getElementById("moovie_range_speed_"+randomID).style.display = "block";
+                    document.getElementById("moovie_range_speed_" + randomID).style.display = "block";
 
-                break;
+                    break;
                 case "ORange": // Close caption menu
 
                     moovie_el_submain.style.display = "none";
-                    document.getElementById("moovie_range_captions_"+randomID).style.display = "block";
+                    document.getElementById("moovie_range_captions_" + randomID).style.display = "block";
 
-                break;
-              default:
+                    break;
+                default:
 
             }
         }
 
         /*
-        ** Responsive Improveness
-        */
+         ** Responsive Improveness
+         */
         var TransformPlayer = this.TransformPlayer = function TransformPlayer(caption) {
 
             var containerWidth = moovie_el_video.offsetWidth;
@@ -927,8 +945,8 @@ class Moovie {
                 // Set Flag
                 moovie_ishiden = 1;
                 // Set player transformations
-                document.getElementById("moovie_el_current_"+randomID).style.display = "none";
-                document.getElementById("moovie_moovie_el_progressbar_"+randomID).classList.add("responsive_bar");
+                document.getElementById("moovie_el_current_" + randomID).style.display = "none";
+                document.getElementById("moovie_moovie_el_progressbar_" + randomID).classList.add("responsive_bar");
                 moovie_el_cuetimer.classList.add("moovie_cuetime_small");
 
             } else {
@@ -936,49 +954,49 @@ class Moovie {
                 // Set Flag
                 moovie_ishiden = 0;
                 // Set player transformations
-                document.getElementById("moovie_el_current_"+randomID).style.display = "block";
-                document.getElementById("moovie_moovie_el_progressbar_"+randomID).classList.remove("responsive_bar");
-                document.getElementById("moovie_fulltime_"+randomID).innerHTML = player_time(video.duration);
+                document.getElementById("moovie_el_current_" + randomID).style.display = "block";
+                document.getElementById("moovie_moovie_el_progressbar_" + randomID).classList.remove("responsive_bar");
+                document.getElementById("moovie_fulltime_" + randomID).innerHTML = player_time(video.duration);
                 moovie_el_cuetimer.classList.remove("moovie_cuetime_small");
             }
 
         }
 
         /*
-        ** Set caption size when container changes size
-        */
+         ** Set caption size when container changes size
+         */
         var SetCaptionSize = this.SetCaptionSize = function SetCaptionSize(value) {
 
-            const captionSize = document.getElementById("caption_track_"+randomID);
+            const captionSize = document.getElementById("caption_track_" + randomID);
             var computedFontSize = window.getComputedStyle(captionSize).fontSize;
 
             if (!value) {
                 var containerSize = moovie_el_video.offsetWidth;
-                var fontSizeCap = containerSize*0.10;
-                captionSize.style.fontSize = fontSizeCap+"%";
-                captionSize.style.lineHeight = (fontSizeCap/3)+"px";
+                var fontSizeCap = containerSize * 0.10;
+                captionSize.style.fontSize = fontSizeCap + "%";
+                captionSize.style.lineHeight = (fontSizeCap / 3) + "px";
             } else {
 
                 if (value == "sizeUp") {
                     computedFontSize = computedFontSize.slice(0, -2);
-                    computedFontSize = Number(computedFontSize)+Number(1);
-                    captionSize.style.fontSize = computedFontSize+"px";
+                    computedFontSize = Number(computedFontSize) + Number(1);
+                    captionSize.style.fontSize = computedFontSize + "px";
 
                 } else if (value == "sizeDown") {
                     computedFontSize = computedFontSize.slice(0, -2);
-                    computedFontSize = Number(computedFontSize)-Number(1);
-                    captionSize.style.fontSize = computedFontSize+"px";
+                    computedFontSize = Number(computedFontSize) - Number(1);
+                    captionSize.style.fontSize = computedFontSize + "px";
                 }
 
                 // Save info in internal storage if true
-                if (config["storage"]["captionSize"]){ handleStorage("set", "captionSize", computedFontSize); }
+                if (config["storage"]["captionSize"]) { handleStorage("set", "captionSize", computedFontSize); }
 
             }
         }
 
         /*
-        **  Play Captions
-        */
+         **  Play Captions
+         */
         var PlayCaption = this.PlayCaption = function PlayCaption(caption) {
 
             // Reset variables
@@ -987,11 +1005,11 @@ class Moovie {
             // Format time
             function sec2time(timeInSeconds) {
                 var pad = function(num, size) { return ('000' + num).slice(size * -1); },
-                time = parseFloat(timeInSeconds).toFixed(3),
-                hours = Math.floor(time / 60 / 60),
-                minutes = Math.floor(time / 60) % 60,
-                seconds = Math.floor(time - minutes * 60),
-                milliseconds = time.slice(-3);
+                    time = parseFloat(timeInSeconds).toFixed(3),
+                    hours = Math.floor(time / 60 / 60),
+                    minutes = Math.floor(time / 60) % 60,
+                    seconds = Math.floor(time - minutes * 60),
+                    milliseconds = time.slice(-3);
                 return pad(hours, 2) + ':' + pad(minutes, 2) + ':' + pad(seconds, 2) + '.' + pad(milliseconds, 3);
             }
 
@@ -1005,27 +1023,27 @@ class Moovie {
                         var cap_endtime = selectedCaption[i]['endtime'];
 
                         if (offsettime >= 0) {
-                            var RealcurrentTime = video.currentTime-offsettime;
+                            var RealcurrentTime = video.currentTime - offsettime;
                         } else {
                             var offsettimeBelow0 = String(offsettime).substring(1);
-                            var RealcurrentTime = video.currentTime+Number(offsettimeBelow0);
+                            var RealcurrentTime = video.currentTime + Number(offsettimeBelow0);
                         }
 
                         RealcurrentTime = sec2time(RealcurrentTime);
 
                         // Add caption if current time is between Start and End
-                        if (RealcurrentTime >= cap_starttime && RealcurrentTime <= cap_endtime && subtitles == 1){
+                        if (RealcurrentTime >= cap_starttime && RealcurrentTime <= cap_endtime && subtitles == 1) {
 
                             // Check if theres a undefined line
-                            if (selectedCaption[i]["text2"] != undefined ) {
-                                document.getElementById("caption_track_"+randomID).innerHTML = selectedCaption[i]['text1']+"<br>"+selectedCaption[i]['text2'];
+                            if (selectedCaption[i]["text2"] != undefined) {
+                                document.getElementById("caption_track_" + randomID).innerHTML = selectedCaption[i]['text1'] + "<br>" + selectedCaption[i]['text2'];
                             } else {
-                                document.getElementById("caption_track_"+randomID).innerHTML = selectedCaption[i]['text1'];
+                                document.getElementById("caption_track_" + randomID).innerHTML = selectedCaption[i]['text1'];
                             }
                         }
 
                         // After current time passes it removes caption
-                        if (RealcurrentTime > cap_endtime){document.getElementById("caption_track_"+randomID).innerHTML = "";}
+                        if (RealcurrentTime > cap_endtime) { document.getElementById("caption_track_" + randomID).innerHTML = ""; }
                     }
                 }
             }
@@ -1035,9 +1053,8 @@ class Moovie {
             request.open('GET', caption["attributes"]["src"]["nodeValue"], true);
 
             // Check if it has format attribute, if yes, came via local
-            if(caption["attributes"]["format"]) 
-            {
-                var capFormat = caption["attributes"]["src"]["nodeValue"]+caption["attributes"]["format"]["nodeValue"];
+            if (caption["attributes"]["format"]) {
+                var capFormat = caption["attributes"]["src"]["nodeValue"] + caption["attributes"]["format"]["nodeValue"];
             } else {
                 var capFormat = caption["attributes"]["src"]["nodeValue"];
             }
@@ -1053,81 +1070,85 @@ class Moovie {
 
                     // if it is .SRT format, add a cue to the beginning of the file to match VTT style
                     var CheckFormat = capFormat.substr(capFormat.length - 4);
-                    if (CheckFormat == '.srt') { resp = "STR\n\n"+resp; }
+                    if (CheckFormat == '.srt') { resp = "STR\n\n" + resp; }
 
-                        resp.split("\n\n").map(function (item) {
+                    resp.split("\n\n").map(function(item) {
 
-                            parts = item.split("\n");
+                        parts = item.split("\n");
 
-                            if (parts[1] != undefined) {
+                        if (parts[1] != undefined) {
 
-                                if (isNaN(parts[0])) { // If VTT Doesnt have cue number
+                            if (isNaN(parts[0])) { // If VTT Doesnt have cue number
 
-                                    var timeString = parts[0].replace(/-/g, '');
-                                    var checkEmptyString = timeString;
-                                    checkEmptyString = checkEmptyString.replace(/ /g, '');
+                                var timeString = parts[0].replace(/-/g, '');
+                                var checkEmptyString = timeString;
+                                checkEmptyString = checkEmptyString.replace(/ /g, '');
 
-                                    if(checkEmptyString)
-                                    {
-                                        if (CheckFormat == '.srt'){ timeString = parts[0].replace(/,/g, '.'); }
+                                if (checkEmptyString) {
+                                    if (CheckFormat == '.srt') { timeString = parts[0].replace(/,/g, '.'); }
 
-                                        // Get starttime
-                                        var starttime = timeString.substr(0, timeString.indexOf('>'));
-                                        starttime = starttime.replace(/ /g, '');
-                                       
-                                        // Get endtime
-                                        var endtime = timeString.split('>', 2);
-                                        endtime = endtime[1].replace(/ /g, '');
+                                    // Get starttime
+                                    var starttime = timeString.substr(0, timeString.indexOf('>'));
+                                    starttime = starttime.replace(/ /g, '');
 
-                                        starttime = starttime.replace(/--/g, '');
-                                        endtime = endtime.replace(/--/g, '');
+                                    // Get endtime
+                                    var endtime = timeString.split('>', 2);
+                                    endtime = endtime[1].replace(/ /g, '');
 
-                                        // If it is .srt, change ","" to ".""
-                                        if (CheckFormat == '.srt'){ endtime = endtime.replace(/,/g, '.'); starttime = starttime.replace(/,/g, '.'); }
+                                    starttime = starttime.replace(/--/g, '');
+                                    endtime = endtime.replace(/--/g, '');
 
-                                        // Push array with all info
-                                        selectedCaption.push(({'starttime': starttime, 'endtime': endtime, 'text1': parts[1], 'text2': parts[2]}));
+                                    // If it is .srt, change ","" to ".""
+                                    if (CheckFormat == '.srt') {
+                                        endtime = endtime.replace(/,/g, '.');
+                                        starttime = starttime.replace(/,/g, '.');
                                     }
 
-                                } else {
-
-                                    var timeString = parts[1].replace(/-/g, '');
-                                    var checkEmptyString = timeString;
-                                    checkEmptyString = checkEmptyString.replace(/ /g, '');
-                                   
-                                    if(checkEmptyString)
-                                    {
-                                        // Get starttime
-                                        var starttime = timeString.substr(0, timeString.indexOf('>'));
-                                        starttime = starttime.replace(/ /g, '');
-                                        
-                                        // Get endtime
-                                        var endtime = timeString.split('>', 2);
-                                        endtime = endtime[1].replace(/ /g, '');
-
-                                        // If it is .srt, change ","" to ".""
-                                        if (CheckFormat == '.srt'){ endtime = endtime.replace(/,/g, '.'); starttime = starttime.replace(/,/g, '.'); }
-
-                                        // Push array with all info
-                                        selectedCaption.push(({'starttime': starttime, 'endtime': endtime, 'text1': parts[2], 'text2': parts[3]}));
-                                    }                        
+                                    // Push array with all info
+                                    selectedCaption.push(({ 'starttime': starttime, 'endtime': endtime, 'text1': parts[1], 'text2': parts[2] }));
                                 }
 
                             } else {
 
-                                // Push array with all info
-                                selectedCaption.push(({'starttime': undefined, 'endtime': undefined, 'text1': undefined, 'text2': undefined}));
+                                var timeString = parts[1].replace(/-/g, '');
+                                var checkEmptyString = timeString;
+                                checkEmptyString = checkEmptyString.replace(/ /g, '');
+
+                                if (checkEmptyString) {
+                                    // Get starttime
+                                    var starttime = timeString.substr(0, timeString.indexOf('>'));
+                                    starttime = starttime.replace(/ /g, '');
+
+                                    // Get endtime
+                                    var endtime = timeString.split('>', 2);
+                                    endtime = endtime[1].replace(/ /g, '');
 
+                                    // If it is .srt, change ","" to ".""
+                                    if (CheckFormat == '.srt') {
+                                        endtime = endtime.replace(/,/g, '.');
+                                        starttime = starttime.replace(/,/g, '.');
+                                    }
+
+                                    // Push array with all info
+                                    selectedCaption.push(({ 'starttime': starttime, 'endtime': endtime, 'text1': parts[2], 'text2': parts[3] }));
+                                }
                             }
-                        })
-                    }
+
+                        } else {
+
+                            // Push array with all info
+                            selectedCaption.push(({ 'starttime': undefined, 'endtime': undefined, 'text1': undefined, 'text2': undefined }));
+
+                        }
+                    })
                 }
+            }
 
-                request.send();
+            request.send();
 
-                // Run caption
-                video.addEventListener('timeupdate', RunCaption, true);
-                if (hassubtitles == 1) { video.removeEventListener('timeupdate', RunCaption, true); } else {
+            // Run caption
+            video.addEventListener('timeupdate', RunCaption, true);
+            if (hassubtitles == 1) { video.removeEventListener('timeupdate', RunCaption, true); } else {
 
                 // Set flag on hassubtitles
                 hassubtitles = 1;
@@ -1136,12 +1157,12 @@ class Moovie {
             }
 
             // Dispatch event listener
-             _this.video.dispatchEvent(captionchange);
+            _this.video.dispatchEvent(captionchange);
         }
 
         /*
-        ** Add Captions
-        */
+         ** Add Captions
+         */
         var SetCaptions = this.SetCaptions = function SetCaptions(caption) {
 
             // Get Caption Format
@@ -1150,20 +1171,20 @@ class Moovie {
             // Generating a random ID for each caption
             var captionIDRandom = Math.floor(Math.random() * (9999 - 0 + 1)) + 0;
 
-            if(caption["attributes"]["format"])  {  CaptionFormat = caption["attributes"]["format"]["nodeValue"];} 
+            if (caption["attributes"]["format"]) { CaptionFormat = caption["attributes"]["format"]["nodeValue"]; }
 
             // Add caption to list and add event listener to play it
-            moovie_el_captions.insertAdjacentHTML('beforeend', "<li class='caption_track' id='captionid_"+captionIDRandom+"'><span>"+capLabel+"</span><span class='labelformat'>"+CaptionFormat+"</span></li>");
-            document.getElementById("captionid_"+captionIDRandom).addEventListener("click", function() {
+            moovie_el_captions.insertAdjacentHTML('beforeend', "<li class='caption_track' id='captionid_" + captionIDRandom + "'><span>" + capLabel + "</span><span class='labelformat'>" + CaptionFormat + "</span></li>");
+            document.getElementById("captionid_" + captionIDRandom).addEventListener("click", function() {
                 PlayCaption(caption);
-                document.getElementById("option_submenu_caption_"+randomID).innerHTML = capLabel;
+                document.getElementById("option_submenu_caption_" + randomID).innerHTML = capLabel;
                 Submenu("toggleSubmenu"); // Close menu
             });
         }
 
         /*
-        ** Get Captions
-        */
+         ** Get Captions
+         */
         var GetCaptions = this.GetCaptions = function GetCaptions() {
 
             // Get all captions inside video tag
@@ -1174,41 +1195,40 @@ class Moovie {
         }
 
         /*
-        ** Keybinds
-        */
+         ** Keybinds
+         */
         var Keybinds = this.Keybinds = function Keybinds() {
 
             // Accepted shortcuts
-            const acceptedShortcuts = 
-            {
-                keycode_32(){ togglePlay(); },                      // [Space Bar]
-                keycode_75(){ togglePlay(); },                      // [K]
-                keycode_70(){ SetFullScreen("toggleFullscreen"); }, // [F]
-                keycode_39(){ movieVideo(5,"right"); },             // [Right Arrow]
-                keycode_37(){ movieVideo(5,"left"); },              // [Left Arrow]
-                keycode_77(){ checkSoundLevel("toogleMute"); },     // [M]
-                keycode_67(){ ActivateSubtitles(); },               // [C]
-                keycode_shift87(){ SetCaptionSize("sizeUp"); },     // [Shift + W]
-                keycode_shift83(){ SetCaptionSize("sizeDown"); }    // [Shift + S]
+            const acceptedShortcuts = {
+                keycode_32() { togglePlay(); }, // [Space Bar]
+                keycode_75() { togglePlay(); }, // [K]
+                keycode_70() { SetFullScreen("toggleFullscreen"); }, // [F]
+                keycode_39() { movieVideo(5, "right"); }, // [Right Arrow]
+                keycode_37() { movieVideo(5, "left"); }, // [Left Arrow]
+                keycode_77() { checkSoundLevel("toogleMute"); }, // [M]
+                keycode_67() { ActivateSubtitles(); }, // [C]
+                keycode_shift87() { SetCaptionSize("sizeUp"); }, // [Shift + W]
+                keycode_shift83() { SetCaptionSize("sizeDown"); } // [Shift + S]
             }
 
             // Listen to keyboard
-            video.addEventListener('keydown', function (event) {
+            video.addEventListener('keydown', function(event) {
                 let ShortCut;
                 if (event.keyCode == 32 || event.shiftKey && event.keyCode == 87 || event.shiftKey && event.keyCode == 83) { event.preventDefault(); }
-                if(event.shiftKey) { ShortCut = acceptedShortcuts['keycode_shift'+event.keyCode]; } else { ShortCut = acceptedShortcuts['keycode_'+event.keyCode]; }
-                if(ShortCut) ShortCut();
+                if (event.shiftKey) { ShortCut = acceptedShortcuts['keycode_shift' + event.keyCode]; } else { ShortCut = acceptedShortcuts['keycode_' + event.keyCode]; }
+                if (ShortCut) ShortCut();
             });
         }
 
         /*
-        ** Setup Events
-        */
+         ** Setup Events
+         */
         var SetupLogic = this.SetupLogic = function SetupLogic() {
 
             // Get elements
-            moovie_el_player = document.querySelector('#moovie__video_'+randomID);
-            video = moovie_el_player.querySelector("#moovie_vid_"+randomID);
+            moovie_el_player = document.querySelector('#moovie__video_' + randomID);
+            video = moovie_el_player.querySelector("#moovie_vid_" + randomID);
             this.video = video;
 
             // Wait media to load, to make sure it doesnt add eventlisteners to a empty container
@@ -1222,8 +1242,8 @@ class Moovie {
                 // Update movie direction
                 moovie_el_progress.setAttribute("max", video.duration);
 
-                if (moovie_ishiden == 0){
-                    document.getElementById("moovie_fulltime_"+randomID).innerHTML = player_time(video.duration);
+                if (moovie_ishiden == 0) {
+                    document.getElementById("moovie_fulltime_" + randomID).innerHTML = player_time(video.duration);
                 }
 
                 // Get buffered video
@@ -1259,10 +1279,10 @@ class Moovie {
             this.moovie_el_speedinput.addEventListener('change', SpeedChange);
 
             // volume element 
-            moovie_ul_soundv = document.getElementById("mooviegrid_volume_"+randomID);
+            moovie_ul_soundv = document.getElementById("mooviegrid_volume_" + randomID);
 
             // Mute
-            document.getElementById("mooviegrid_mute_"+randomID).addEventListener("click", function() { checkSoundLevel("toogleMute"); }, false);
+            document.getElementById("mooviegrid_mute_" + randomID).addEventListener("click", function() { checkSoundLevel("toogleMute"); }, false);
 
             // Progress bar
             moovie_elprogress = moovie_el_player.querySelector('.moovie_progress');
@@ -1291,7 +1311,7 @@ class Moovie {
                 moovie_ul_soundv.addEventListener('mouseup', () => mousedowns = false);
 
                 // Poster Functions
-                moovie_el_poster = moovie_el_player.querySelector('#poster_layer_'+randomID);
+                moovie_el_poster = moovie_el_player.querySelector('#poster_layer_' + randomID);
                 moovie_el_poster.addEventListener('click', togglePlay);
                 video.addEventListener('click', togglePlay);
 
@@ -1300,8 +1320,8 @@ class Moovie {
                 moovie_el_localsub.addEventListener('change', localSubtitles);
 
                 // Cue Time
-                document.getElementById('range_progress_'+randomID).addEventListener('mousemove', function(e) { cueTime(e); });
-                document.getElementById('range_progress_'+randomID).addEventListener('mouseleave', function(e) { moovie_el_cuetimer.style.opacity = 0; });
+                document.getElementById('range_progress_' + randomID).addEventListener('mousemove', function(e) { cueTime(e); });
+                document.getElementById('range_progress_' + randomID).addEventListener('mouseleave', function(e) { moovie_el_cuetimer.style.opacity = 0; });
 
                 moovie_elprogress.addEventListener('mousedown', () => mousedown = true);
                 moovie_elprogress.addEventListener('mouseup', () => mousedown = false);
@@ -1310,13 +1330,23 @@ class Moovie {
                 moovie_el_controls.addEventListener('mouseleave', e => { isopen = 0; });
 
                 moovie_el_progress.addEventListener("input", function(event) { video.pause(); }, false);
-                moovie_el_progress.addEventListener("change", function(event) { togglePlay(); togglePoster("hide"); }, false);
+                moovie_el_progress.addEventListener("change", function(event) {
+                    togglePlay();
+                    togglePoster("hide");
+                }, false);
 
                 // Hide div on mouse stop
                 HideControls("close");
                 var i = null;
-                moovie_el_video.addEventListener('mousemove', e => { clearTimeout(i);  HideControls("open");  i = setTimeout(function(){ HideControls("close"); }, 2000); });
-                moovie_el_video.addEventListener('mouseleave', e => { clearTimeout(i); HideControls("close"); });
+                moovie_el_video.addEventListener('mousemove', e => {
+                    clearTimeout(i);
+                    HideControls("open");
+                    i = setTimeout(function() { HideControls("close"); }, 2000);
+                });
+                moovie_el_video.addEventListener('mouseleave', e => {
+                    clearTimeout(i);
+                    HideControls("close");
+                });
 
             } else {
 
@@ -1329,158 +1359,172 @@ class Moovie {
                 }
 
                 // Touch related eventListeners
-                moovie_el_progress.addEventListener("touchmove", function(event) { Scrub(event); video.pause(); });
-                moovie_el_progress.addEventListener("change", function(event) { Scrub(event); if (!video.pause()){togglePlay();} togglePoster("hide"); }, false);
-                moovie_el_poster.addEventListener("touchend", function(event) { if (!video.pause()){togglePlay(); }  });
+                moovie_el_progress.addEventListener("touchmove", function(event) {
+                    Scrub(event);
+                    video.pause();
+                });
+                moovie_el_progress.addEventListener("change", function(event) {
+                    Scrub(event);
+                    if (!video.pause()) { togglePlay(); }
+                    togglePoster("hide");
+                }, false);
+                moovie_el_poster.addEventListener("touchend", function(event) { if (!video.pause()) { togglePlay(); } });
 
                 // Volume EventListeners
-                moovie_ul_soundv.addEventListener("touchmove", function(event) { ScrubSound(event);  });
-                moovie_ul_soundv.addEventListener("change", function(event) { ScrubSound(event);  }, false);
+                moovie_ul_soundv.addEventListener("touchmove", function(event) { ScrubSound(event); });
+                moovie_ul_soundv.addEventListener("change", function(event) { ScrubSound(event); }, false);
                 moovie_el_locally.style.display = "none";
-               
+
                 // Hide div on mouse stop
                 var i = null;
-                moovie_el_video.addEventListener('touchstart', e => {clearTimeout(i);  HideControls("open");  i = setTimeout(function(){ HideControls("close");  }, 4000); });
+                moovie_el_video.addEventListener('touchstart', e => {
+                    clearTimeout(i);
+                    HideControls("open");
+                    i = setTimeout(function() { HideControls("close"); }, 4000);
+                });
                 moovie_el_video.addEventListener('touchmove', e => { clearTimeout(i); });
-                moovie_el_video.addEventListener('touchend', e => { clearTimeout(i); i = setTimeout(function(){ HideControls("close");  }, 4000); });
+                moovie_el_video.addEventListener('touchend', e => {
+                    clearTimeout(i);
+                    i = setTimeout(function() { HideControls("close"); }, 4000);
+                });
             }
         }
 
         /*
-        ** Player Menu
-        */
+         ** Player Menu
+         */
         var SetupMenu = this.SetupMenu = function SetupMenu() {
 
-                // Main Menu
-                for (var i = 0; i < mainmenu.length; i++) {
+            // Main Menu
+            for (var i = 0; i < mainmenu.length; i++) {
 
-                    if(this.config.controls[mainmenu[i].name] != undefined && this.config.controls[mainmenu[i].name] == true || mainmenu[i].opcional == false)
-                    { 
-                        moovie_el_controls.insertAdjacentHTML('beforeend', mainmenu[i].element);
-                    } else { 
-                        moovie_el_controls.insertAdjacentHTML('beforeend',"<div style='display:none;'>"+mainmenu[i].element+"</div>"); 
-                    }
+                if (this.config.controls[mainmenu[i].name] != undefined && this.config.controls[mainmenu[i].name] == true || mainmenu[i].opcional == false) {
+                    moovie_el_controls.insertAdjacentHTML('beforeend', mainmenu[i].element);
+                } else {
+                    moovie_el_controls.insertAdjacentHTML('beforeend', "<div style='display:none;'>" + mainmenu[i].element + "</div>");
                 }
+            }
 
-                var tooltips_menu = this.tooltips_menu = [];
+            var tooltips_menu = this.tooltips_menu = [];
 
-                // Tooltips
-                for (var i = 0; i < mainmenu.length; i++) {
+            // Tooltips
+            for (var i = 0; i < mainmenu.length; i++) {
 
-                    if(mainmenu[i].tooltip)
-                    {
-                        // Parse from string to get id of menu
-                        let doc = new DOMParser().parseFromString(mainmenu[i].element, "text/html");
-                      
-                        // Insert tooltip inside button
-                        document.getElementById(doc["body"]["firstChild"]["id"]).insertAdjacentHTML('beforeend', "<div id='moovie_"+mainmenu[i].name+"_tooltip_"+randomID+"' class='moovie_tooltip'>"+mainmenu[i].tooltip+"</div>");
-                
-                        // Properties of the menu
-                        let targetNode = document.getElementById(doc["body"]["firstChild"]["id"]);
-                        // Properties of the tooltip
-                        let targetNodeTool = document.getElementById("moovie_"+mainmenu[i].name+"_tooltip_"+randomID);
-                        
-                        tooltips_menu[mainmenu[i].name] = ({'element': targetNodeTool});
-                        this.ChangeTooltip(mainmenu[i].name, 0);
-                    }
+                if (mainmenu[i].tooltip) {
+                    // Parse from string to get id of menu
+                    let doc = new DOMParser().parseFromString(mainmenu[i].element, "text/html");
+
+                    // Insert tooltip inside button
+                    document.getElementById(doc["body"]["firstChild"]["id"]).insertAdjacentHTML('beforeend', "<div id='moovie_" + mainmenu[i].name + "_tooltip_" + randomID + "' class='moovie_tooltip'>" + mainmenu[i].tooltip + "</div>");
+
+                    // Properties of the menu
+                    let targetNode = document.getElementById(doc["body"]["firstChild"]["id"]);
+                    // Properties of the tooltip
+                    let targetNodeTool = document.getElementById("moovie_" + mainmenu[i].name + "_tooltip_" + randomID);
+
+                    tooltips_menu[mainmenu[i].name] = ({ 'element': targetNodeTool });
+                    this.ChangeTooltip(mainmenu[i].name, 0);
                 }
+            }
 
-                // Submenu base
-                moovie_el_submenu = document.getElementById("moovie_submenu_"+randomID);
+            // Submenu base
+            moovie_el_submenu = document.getElementById("moovie_submenu_" + randomID);
 
-                // Submenu Options
-                for (let key in submenu) {
+            // Submenu Options
+            for (let key in submenu) {
 
-                    moovie_el_submenu.insertAdjacentHTML('beforeend', submenu[key]["mainElement"]);
+                moovie_el_submenu.insertAdjacentHTML('beforeend', submenu[key]["mainElement"]);
 
-                    if(submenu[key].hasOwnProperty('elements'))
-                    {
-                        for (var i = 0; i < submenu[key]["elements"].length; i++) {
-                            if(this.config.controls[submenu[key]["elements"][i]['name']] != undefined && this.config.controls[submenu[key]["elements"][i]['name']] == true || submenu[key]["elements"][i]['opcional'] == false)
-                            {   
-                                document.getElementById(submenu[key]["parentID"]+randomID).insertAdjacentHTML('beforeend', submenu[key]["elements"][i]['element']);
-                            } else {
-                                document.getElementById(submenu[key]["parentID"]+randomID).insertAdjacentHTML('beforeend', "<div style='display:none;'>"+submenu[key]["elements"][i]['element']);
-                            }
+                if (submenu[key].hasOwnProperty('elements')) {
+                    for (var i = 0; i < submenu[key]["elements"].length; i++) {
+                        if (this.config.controls[submenu[key]["elements"][i]['name']] != undefined && this.config.controls[submenu[key]["elements"][i]['name']] == true || submenu[key]["elements"][i]['opcional'] == false) {
+                            document.getElementById(submenu[key]["parentID"] + randomID).insertAdjacentHTML('beforeend', submenu[key]["elements"][i]['element']);
+                        } else {
+                            document.getElementById(submenu[key]["parentID"] + randomID).insertAdjacentHTML('beforeend', "<div style='display:none;'>" + submenu[key]["elements"][i]['element']);
                         }
                     }
                 }
+            }
 
-            moovie_el_progress = document.getElementById("range_progress_"+randomID);
-            moovie_el_captions = document.getElementById("moovie_submenu_captions_"+randomID);
-            moovie_el_range = document.getElementById("moovie_range_captions_"+randomID);
-            moovie_el_speed = document.getElementById("moovie_range_speed_"+randomID);
+            moovie_el_progress = document.getElementById("range_progress_" + randomID);
+            moovie_el_captions = document.getElementById("moovie_submenu_captions_" + randomID);
+            moovie_el_range = document.getElementById("moovie_range_captions_" + randomID);
+            moovie_el_speed = document.getElementById("moovie_range_speed_" + randomID);
 
             // Update variables
-            this.moovie_el_topicCaption = document.getElementById("this.moovie_el_topicCaption_"+randomID);
-            this.moovie_el_topicSpeed = document.getElementById("topic_submenu_speed_"+randomID);
-            this.moovie_el_capback = document.getElementById("moovie_el_capback_"+randomID);
-            this.moovie_el_capoffset = document.getElementById("moovie_el_capoffset_"+randomID);
-            this.moovie_el_speedinput = moovie_el_sinput = document.getElementById("offset_range_speed_"+randomID);
-            this.moovie_el_rangeinput = moovie_el_rinput = document.getElementById("offset_range_input_"+randomID);
+            this.moovie_el_topicCaption = document.getElementById("this.moovie_el_topicCaption_" + randomID);
+            this.moovie_el_topicSpeed = document.getElementById("topic_submenu_speed_" + randomID);
+            this.moovie_el_capback = document.getElementById("moovie_el_capback_" + randomID);
+            this.moovie_el_capoffset = document.getElementById("moovie_el_capoffset_" + randomID);
+            this.moovie_el_speedinput = moovie_el_sinput = document.getElementById("offset_range_speed_" + randomID);
+            this.moovie_el_rangeinput = moovie_el_rinput = document.getElementById("offset_range_input_" + randomID);
             this.moovie_el_progressbar = moovie_el_progress;
-            this.moovie_el_volume = moovie_el_volume = document.getElementById("mooviegrid_volume_"+randomID);
-            this.moovie_el_cuetimer = moovie_el_cuetimer = document.getElementById("moovie_cue_timer_"+randomID);
+            this.moovie_el_volume = moovie_el_volume = document.getElementById("mooviegrid_volume_" + randomID);
+            this.moovie_el_cuetimer = moovie_el_cuetimer = document.getElementById("moovie_cue_timer_" + randomID);
             this.moovie_el_submenuBase = moovie_el_submenu;
-            this.moovie_el_localsub = moovie_el_localsub = document.getElementById("localsub_"+randomID);
-            this.moovie_el_locally = moovie_el_locally = document.getElementById("locally_"+randomID);
-            this.moovie_el_submain = moovie_el_submain = document.getElementById("moovie_submenu_main_"+randomID);
-            this.moovie_el_buffered = moovie_el_buffered = document.getElementById("moovie_buffered_"+randomID);
+            this.moovie_el_localsub = moovie_el_localsub = document.getElementById("localsub_" + randomID);
+            this.moovie_el_locally = moovie_el_locally = document.getElementById("locally_" + randomID);
+            this.moovie_el_submain = moovie_el_submain = document.getElementById("moovie_submenu_main_" + randomID);
+            this.moovie_el_buffered = moovie_el_buffered = document.getElementById("moovie_buffered_" + randomID);
 
             // Control buttons
             this.control_buttons = {
-                "play" : this.moovie_el_play = moovie_el_play = document.getElementById("tooglebutton_"+randomID),
-                "mute" : this.moovie_el_mute = moovie_el_mute = document.getElementById("mooviegrid_mute_"+randomID),
-                "subtitles" : this.moovie_el_subtitles = moovie_el_subtitles = document.getElementById("moovie_subtitle_"+randomID),
-                "config" : this.moovie_el_cog = document.getElementById("moovie_el_cog_"+randomID),
-                "fullscreen": this.moovie_el_fullscreen = moovie_el_fullscreen = document.getElementById("fullscreen_"+randomID)
+                "play": this.moovie_el_play = moovie_el_play = document.getElementById("tooglebutton_" + randomID),
+                "mute": this.moovie_el_mute = moovie_el_mute = document.getElementById("mooviegrid_mute_" + randomID),
+                "subtitles": this.moovie_el_subtitles = moovie_el_subtitles = document.getElementById("moovie_subtitle_" + randomID),
+                "config": this.moovie_el_cog = document.getElementById("moovie_el_cog_" + randomID),
+                "fullscreen": this.moovie_el_fullscreen = moovie_el_fullscreen = document.getElementById("fullscreen_" + randomID)
             };
         }
 
         /*
-        ** Player Structure
-        */
+         ** Player Structure
+         */
         var SetupPlayer = this.SetupPlayer = function SetupPlayer() {
 
             // Get video source
             var vsource = this.element.getAttribute("src");
-            if(vsource == null && this.element.getElementsByTagName("source")[0] != undefined) {  
+            if (vsource == null && this.element.getElementsByTagName("source")[0] != undefined) {
                 vsource = this.element.getElementsByTagName("source")[0].src
-            } else { 
+            } else {
                 console.log("No video source found. Read documentation to a add video source dynamically.");
             }
 
             // Get poster if exists
             var vposter = document.getElementById(this.selector).getAttribute("poster");
-            
+
             // Hide video tag
             this.element.style.display = "none";
 
             // Main Div
-            this.element.insertAdjacentHTML('afterend', "<div style='width:"+dimensions['width']+"' id='moovie__video_"+randomID+"' class='moovie'></div>");
-            this.moovie_el_video = moovie_el_video = document.getElementById("moovie__video_"+randomID);
+            this.element.insertAdjacentHTML('afterend', "<div style='width:" + dimensions['width'] + "' id='moovie__video_" + randomID + "' class='moovie'></div>");
+            this.moovie_el_video = moovie_el_video = document.getElementById("moovie__video_" + randomID);
 
             // Video tag
-            moovie_el_video.insertAdjacentHTML('beforeend', "<video tabindex='1' id='moovie_vid_"+randomID+"' preload='auto' class='player__video viewer' style='width:100%; height:100%;' src='"+vsource+"' playsinline></video>");
-            
+            moovie_el_video.insertAdjacentHTML('beforeend', "<video tabindex='1' id='moovie_vid_" + randomID + "' preload='auto' class='player__video viewer' style='width:100%; height:100%;' src='" + vsource + "' playsinline></video>");
+
             // Player Controls
-            moovie_el_video.insertAdjacentHTML('beforeend', "<div style='opacity:0;' id='moovie__controls_"+randomID+"' class='moovie_controls'></div>");
-            this.moovie_el_controlbar = moovie_el_controls = document.getElementById("moovie__controls_"+randomID);
+            moovie_el_video.insertAdjacentHTML('beforeend', "<div style='opacity:0;' id='moovie__controls_" + randomID + "' class='moovie_controls'></div>");
+            this.moovie_el_controlbar = moovie_el_controls = document.getElementById("moovie__controls_" + randomID);
 
             // Set main Play control when video is stopped
-            moovie_el_video.insertAdjacentHTML('afterbegin', "<div id='medialoading_"+randomID+"' class='loadingv'><div class='loading animated fadeIn'><div class='moovie_bg'></div></div></div><div class='poster_layer posteron' id='poster_layer_"+randomID+"'></div>");
-            this.medialoading = document.getElementById("medialoading_"+randomID);
-
-            this.moovie_el_poster = moovie_el_poster = document.getElementById("poster_layer_"+randomID);
-            moovie_el_poster.insertAdjacentHTML('afterbegin', "<div class='poster_center' id='poster_center_"+randomID+"' style=''></div>");
-            document.getElementById("poster_center_"+randomID).insertAdjacentHTML('afterbegin', "<div class='poster_button'><img src='"+icons.path+"play.svg' style='width: 24px; position: relative; left: 3px;'></div>");
-            if (vposter != null){  moovie_el_poster.style.backgroundImage = "url("+vposter+")"; moovie_el_poster.style.backgroundSize = "100%"; moovie_el_poster.style.backgroundPositionY = "center"; }
+            moovie_el_video.insertAdjacentHTML('afterbegin', "<div id='medialoading_" + randomID + "' class='loadingv'><div class='loading animated fadeIn'><div class='moovie_bg'></div></div></div><div class='poster_layer posteron' id='poster_layer_" + randomID + "'></div>");
+            this.medialoading = document.getElementById("medialoading_" + randomID);
+
+            this.moovie_el_poster = moovie_el_poster = document.getElementById("poster_layer_" + randomID);
+            moovie_el_poster.insertAdjacentHTML('afterbegin', "<div class='poster_center' id='poster_center_" + randomID + "' style=''></div>");
+            document.getElementById("poster_center_" + randomID).insertAdjacentHTML('afterbegin', "<div class='poster_button'><img src='" + icons.path + "play.svg' style='width: 24px; position: relative; left: 3px;'></div>");
+            if (vposter != null) {
+                moovie_el_poster.style.backgroundImage = "url(" + vposter + ")";
+                moovie_el_poster.style.backgroundSize = "100%";
+                moovie_el_poster.style.backgroundPositionY = "center";
+            }
 
             // Add caption spot
-            moovie_el_video.insertAdjacentHTML('beforeend', "<div class='moovie_captionspot caption_size'><p class='moovie_caption' id='caption_track_"+randomID+"'></p></div>");
-           
+            moovie_el_video.insertAdjacentHTML('beforeend', "<div class='moovie_captionspot caption_size'><p class='moovie_caption' id='caption_track_" + randomID + "'></p></div>");
+
             // Call events
-            this.SetupMenu(); 
+            this.SetupMenu();
             this.SetupLogic();
             this.GetCaptions();
             this.Keybinds();
@@ -1502,64 +1546,64 @@ class Moovie {
     }
 
     /*
-    ** Methods
-    */
+     ** Methods
+     */
 
     // Trigger toggle play
-    togglePlay(){ this.togglePlay(); }
-    // Trigger toggle subtitles
-    toggleSubtitles(){ this.ActivateSubtitles(); }
-    // Trigger toggle Fullscreen
-    toggleFullscreen(){ this.SetFullScreen("toggleFullscreen"); }
-    // Destroy all moovie elements and unbinds all its events
-    destroy(){ this.moovie_el_video.remove(); }
-    // Rebuild moovie player
-    build(){ this.SetupPlayer(); }
-    // Add new track
-    addTrack(properties){
+    togglePlay() { this.togglePlay(); }
+        // Trigger toggle subtitles
+    toggleSubtitles() { this.ActivateSubtitles(); }
+        // Trigger toggle Fullscreen
+    toggleFullscreen() { this.SetFullScreen("toggleFullscreen"); }
+        // Destroy all moovie elements and unbinds all its events
+    destroy() { this.moovie_el_video.remove(); }
+        // Rebuild moovie player
+    build() { this.SetupPlayer(); }
+        // Add new track
+    addTrack(properties) {
+
+            // OnComplete Callback
+            function onComplete(callback) {
+                if (typeof callback == "function") { callback(); }
+            }
 
-        // OnComplete Callback
-        function onComplete(callback) { 
-            if (typeof callback == "function") { callback();}
-        } 
-
-        if (properties.options && typeof(properties.options) === 'object') {
-            // Loop object and add new options to original select box
-            var prop = Object.keys(properties.options).length;
-            for (var i = 0; i < prop; i++) {
-
-                var addlabel, srclang, tracksrc;
-                if (properties.options[i].label){ addlabel = "label='"+properties.options[i].label+"'"; } else {  addlabel = "label='New Subtitle'"; }
-                if (properties.options[i].srclang){ srclang = "srclang='"+properties.options[i].srclang+"'" } else { srclang = "srclang='New'" }
-                if (properties.options[i].src){ tracksrc = "src='"+properties.options[i].src+"'" } else { tracksrc = ""; }
-
-                if (!tracksrc) { console.log("Error, 'src' can not be empty.");} else {
-                    document.getElementById(this.selector).insertAdjacentHTML("beforeend", "<track "+addlabel+" "+srclang+" "+tracksrc+">");
+            if (properties.options && typeof(properties.options) === 'object') {
+                // Loop object and add new options to original select box
+                var prop = Object.keys(properties.options).length;
+                for (var i = 0; i < prop; i++) {
+
+                    var addlabel, srclang, tracksrc;
+                    if (properties.options[i].label) { addlabel = "label='" + properties.options[i].label + "'"; } else { addlabel = "label='New Subtitle'"; }
+                    if (properties.options[i].srclang) { srclang = "srclang='" + properties.options[i].srclang + "'" } else { srclang = "srclang='New'" }
+                    if (properties.options[i].src) { tracksrc = "src='" + properties.options[i].src + "'" } else { tracksrc = ""; }
+
+                    if (!tracksrc) { console.log("Error, 'src' can not be empty."); } else {
+                        document.getElementById(this.selector).insertAdjacentHTML("beforeend", "<track " + addlabel + " " + srclang + " " + tracksrc + ">");
+                    }
                 }
-            }
 
-            // Remove all caption itens
-            document.querySelectorAll('#moovie_submenu_captions_'+this.randomID+' .caption_track').forEach((item) => {
-               item.remove();
-            });
+                // Remove all caption itens
+                document.querySelectorAll('#moovie_submenu_captions_' + this.randomID + ' .caption_track').forEach((item) => {
+                    item.remove();
+                });
 
-            // fetch all track itens again
-            this.GetCaptions();
+                // fetch all track itens again
+                this.GetCaptions();
 
-            // if is "onComplete" is a function, call it back.
-            if (typeof properties.onComplete == "function") { onComplete(properties.onComplete); }
+                // if is "onComplete" is a function, call it back.
+                if (typeof properties.onComplete == "function") { onComplete(properties.onComplete); }
 
-        } else {
-            console.error("Options must be and Object. Read documentation.");
+            } else {
+                console.error("Options must be and Object. Read documentation.");
+            }
         }
-    }
-    // Apply changes to current player
-    change(properties){
+        // Apply changes to current player
+    change(properties) {
 
         // OnComplete Callback
-        function onComplete(callback) { 
-            if (typeof callback == "function") { callback();}
-        } 
+        function onComplete(callback) {
+            if (typeof callback == "function") { callback(); }
+        }
 
         if (properties.video && typeof(properties.video) === 'object') {
             // Check if Video Source is empty or not
@@ -1572,14 +1616,14 @@ class Moovie {
             // Check if Poster source is empty or not
             if (properties.video.posterSrc) {
                 this.element.setAttribute('poster', properties.video.posterSrc);
-                this.moovie_el_poster.style.backgroundImage = "url("+properties.video.posterSrc+")";
+                this.moovie_el_poster.style.backgroundImage = "url(" + properties.video.posterSrc + ")";
             }
 
             if (properties.captions && typeof(properties.captions) === 'object') {
                 // Check if captions clear is true or false
                 if (properties.captions.clearCaptions) {
                     // Remove all caption itens
-                    document.querySelectorAll('#moovie_submenu_captions_'+this.randomID+' .caption_track').forEach((item) => {
+                    document.querySelectorAll('#moovie_submenu_captions_' + this.randomID + ' .caption_track').forEach((item) => {
                         item.remove();
                     });
                 }
@@ -1592,71 +1636,92 @@ class Moovie {
             console.error("Options must be and Object. Read documentation.");
         }
     }
-    
+
     /*
-    ** API > Gets
-    */
+     ** API > Gets
+     */
 
     // Get player element
     get playerElement() { return this.video; }
-    // Get playing state
+        // Get playing state
     get playing() { return Boolean(this.video.ready && !this.video.paused && !this.video.ended); }
-    // Get stopped state
-    get paused() {  return Boolean(this.video.paused); }
-    // Get stopped state
-    get stopped() {  return Boolean(this.video.paused && this.video.currentTime === 0); }
-    // Get ended state
+        // Get stopped state
+    get paused() { return Boolean(this.video.paused); }
+        // Get stopped state
+    get stopped() { return Boolean(this.video.paused && this.video.currentTime === 0); }
+        // Get ended state
     get ended() { return Boolean(this.video.ended); }
-    // Get duration
+        // Get duration
     get duration() {
-        const Duration = parseFloat(this.video.duration);
-        const realDuration = (this.video.media || {}).duration;
-        const duration = realDuration || realDuration === Infinity ? 0 : realDuration;
-        return Duration || duration;
-    }
-    // Get Seeking
+            const Duration = parseFloat(this.video.duration);
+            const realDuration = (this.video.media || {}).duration;
+            const duration = realDuration || realDuration === Infinity ? 0 : realDuration;
+            return Duration || duration;
+        }
+        // Get Seeking
     get seeking() { return Boolean(this.video.seeking); }
-    // Get CurrentTime
+        // Get CurrentTime
     get currentTime() { return Number(this.video.currentTime); }
-    // Get CurrentTime
-    get volume() {  return this.video.volume; }
-    // Get muted state
-    get muted() {  return Boolean(this.video.muted); }
-    // Get playrate
+        // Get CurrentTime
+    get volume() { return this.video.volume; }
+        // Get muted state
+    get muted() { return Boolean(this.video.muted); }
+        // Get playrate
     get speed() { return Number(this.video.playbackRate); }
-    // Get Mininum Speed
+        // Get Mininum Speed
     get minimumSpeed() { return 0.1; }
-    // Get Maximum Speed
+        // Get Maximum Speed
     get maximumSpeed() { return 8; }
-    // Get Mininum Offset
+        // Get Mininum Offset
     get minimumOffset() { return -5; }
-    // Get Maximum Offset
+        // Get Maximum Offset
     get maximumOffset() { return 5; }
-    // Get Source
+        // Get Source
     get source() { return this.video.currentSrc; }
-    // Get Source
+        // Get Source
     get captionOffset() { return this.moovie_el_rangeinput.value; }
 
     /*
-    ** API > Sets
-    */
+     ** API > Sets
+     */
 
     // Set current time
-    set currentTime (input) { this.video.currentTime = input; this.moovie_el_progressbar.value = input; }
-    // Set volume
-    set volume (input) { this.video.volume = input; this.moovie_el_volume.value = input; this.checkSoundLevel("checkMute"); }
-    // Set speed
-    set speed (input) { if (input < -0.1 || input > 8) { return "Value must be between -0.1 and 8"; } else { this.video.playbackRate = input; this.moovie_el_speedinput.value = input; this.SpeedChange();}}
-    // Set caption offset
-    set captionOffset (input) { if (input < -5 || input > 5) { return "Value must be between -5 and 5"; } else { this.moovie_el_rangeinput.value = input; this.OffsetChange();}}
-    // Change source
-    set source (input) { this.video.pause(); this.video.src = input; this.video.play(); }
-    // Set Muted
-    set muted (input) {if(input){ this.checkSoundLevel("mutePlayer");} else { this.checkSoundLevel("unmutePlayer");}}
+    set currentTime(input) {
+            this.video.currentTime = input;
+            this.moovie_el_progressbar.value = input;
+        }
+        // Set volume
+    set volume(input) {
+            this.video.volume = input;
+            this.moovie_el_volume.value = input;
+            this.checkSoundLevel("checkMute");
+        }
+        // Set speed
+    set speed(input) {
+            if (input < -0.1 || input > 8) { return "Value must be between -0.1 and 8"; } else {
+                this.video.playbackRate = input;
+                this.moovie_el_speedinput.value = input;
+                this.SpeedChange();
+            }
+        }
+        // Set caption offset
+    set captionOffset(input) {
+            if (input < -5 || input > 5) { return "Value must be between -5 and 5"; } else {
+                this.moovie_el_rangeinput.value = input;
+                this.OffsetChange();
+            }
+        }
+        // Change source
+    set source(input) {
+            this.video.pause();
+            this.video.src = input;
+            this.video.play();
+        }
+        // Set Muted
+    set muted(input) { if (input) { this.checkSoundLevel("mutePlayer"); } else { this.checkSoundLevel("unmutePlayer"); } }
 }
 
 // Export module to use it in browser and NodeJS
 try {
-   module.exports = exports = Moovie;
-} catch (e) {}
-
+    module.exports = exports = Moovie;
+} catch (e) {}
\ No newline at end of file
diff --git a/js/plugins/playlist/README.md b/js/plugins/playlist/README.md
index 36c46e0..dcd4e97 100644
--- a/js/plugins/playlist/README.md
+++ b/js/plugins/playlist/README.md
@@ -17,6 +17,10 @@ var demo = new Moovie({selector: "#example"});
 // Call External Plugin
 var PlaylistPlugin = new _Moovie_Playlist({
   reference: demo, // variable that initializated moovie
+  dimensions: {
+                width: "240px", // width for list view width
+                height: "100%" //height for list view height
+            },
   sources: [
       {
         src: "<<source-to-video>>",
diff --git a/js/plugins/playlist/playlist.js b/js/plugins/playlist/playlist.js
index 142956a..8612f54 100644
--- a/js/plugins/playlist/playlist.js
+++ b/js/plugins/playlist/playlist.js
@@ -1,4 +1,3 @@
-
 /*-------------------------
 moovie.js | Playlist Plugin
 Made by: Bruno Vieira
@@ -9,67 +8,199 @@ class _Moovie_Playlist {
     constructor(options) {
 
         const defaults = {
-            reference : 'defaultId',
-            sources : [
-                {
-                  src: false,
-                  title: false
-                }
-            ]
-        };      
+            reference: 'defaultId',
+            dimensions: {
+                width: "240px",
+                height: "100%"
+            },
+            sources: [{
+                src: false,
+                title: false
+            }]
+        };
 
         this.reference = options.reference || defaults.reference;
         this.sources = options.sources || defaults.sources;
+        this.dimensions = options.dimensions || defaults.dimensions;
         var mooviePlayer = this.reference;
         var loopSrc = 0;
         var sources = this.sources;
 
         /*
-        ** Plugin Structure
-        */
+         ** Plugin Structure
+         */
         var InitModule = this.InitModule = function InitModule() {
 
-            mooviePlayer.video.addEventListener("ended", function() {
-            mooviePlayer.medialoading.style.display = "block";
-            mooviePlayer.moovie_el_controlbar.style.opacity = 0;
+            // Add List Style
+            const listStyle = `
+                .moovie_play_list {
+                    z-index: 3;
+                    right: calc(25px - ${this.dimensions.width});
+                    top: 0px;
+                    position: absolute;
+                    height: 100%;
+                    width: ${this.dimensions.width};
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+                    transition: transform 250ms,opacity .2s ease-in-out;
+                }
+                .moovie_play_list.show {
+                    transform: translateX(calc(25px - ${this.dimensions.width}));
+                }
+                .moovie_play_list_content {
+                    width: 100%;
+                    height: ${this.dimensions.height};
+                    display: flex;
+                    align-items: center;
+                }
+
+                .moovie_play_list_arrow {
+                    width: 25px;
+                    height: 100px;
+                    background: var(--moovie_bg_controls);
+                    font-weight:900;
+                    color:white;
+                    border-radius:20px 0px 0px 20px;
+                    text-align:center;
+                    line-height:100px;
+                }
+                .moovie_play_list_arrow p{
+                    transition: transform 250ms;
+                }
+                .moovie_play_list_arrow.show p{
+                    transform:rotate(180deg);
+                }
 
-            // Wait function 100ms
-            setTimeout(function(){ 
 
+                .moovie_play_list_table_item{
+                    color:white;
+                    padding:5px 10px 5px 10px;
+                }
+                .moovie_play_list_table_item:hover{
+                    background:rgb(134 141 152 / 74%);
+                }
+                .moovie_play_list_table_item.selected{
+                    color:var(--moovie_main_color);
+                }
+            `;
+            const style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = listStyle;
+            document.getElementsByTagName('head')[0].appendChild(style);
+
+            // Add List Panel
+            mooviePlayer.moovie_el_video.insertAdjacentHTML('beforeend', "<div id='moovie_play_list_" + mooviePlayer.randomID + "' class='moovie_play_list'>" +
+                "<div id='moovie_play_list_content_" + mooviePlayer.randomID + "' class='moovie_play_list_content'>" +
+                "<div id='moovie_play_list_arrow_" + mooviePlayer.randomID + "' class='moovie_play_list_arrow'><p><</p></div>" +
+                "<div id='moovie_play_list_table_" + mooviePlayer.randomID + "' style='height: 100%;background: var(--moovie_bg_controls);flex: 1;padding:10px 0px 10px 0px;overflow:auto;border-radius:5px 0px 0px 5px;'></div>" +
+                "</div></div>");
+
+            // Add Control Show Event to List Panel
+            let listElement = document.getElementById("moovie_play_list_" + mooviePlayer.randomID);
+            mooviePlayer.video.addEventListener("togglecontrolpanel", function(evt) {
+                if (evt.detail.show) {
+                    listElement.style.opacity = 1;
+                } else {
+                    listElement.style.opacity = 0;
+                }
+            })
+
+            //Arror Toggle
+            var arrowElement = document.getElementById("moovie_play_list_arrow_" + mooviePlayer.randomID);
+            arrowElement.addEventListener("click", function() {
+                let list = document.getElementById("moovie_play_list_" + mooviePlayer.randomID);
+                if (list.classList.contains("show")) {
+                    list.classList.remove("show");
+                    arrowElement.classList.remove('show');
+                } else {
+                    list.classList.add("show");
+                    arrowElement.classList.add('show');
+                }
+            });
+
+            var listTable = document.getElementById("moovie_play_list_table_" + mooviePlayer.randomID);
+            for (let index = 0; index < this.sources.length; index++) {
+                const element = this.sources[index];
+                let item = document.createElement("div");
+                item.classList.add("moovie_play_list_table_item");
+                item.innerText = element.title;
+                // Add Click Event
+                item.addEventListener("click", function() {
+                    itemOnClick(index);
+                });
+
+                //change current Playing Index and Style
+                //Be careful that src maybe encoded somewhere and make this code failed.
+                if (mooviePlayer.video.src === element.src) {
+                    item.classList.add("selected");
+                    loopSrc = index;
+                }
+
+                listTable.appendChild(item);
+            }
+
+            function itemOnClick(index) {
+
+                //check if same index
+                if (loopSrc === index) { return; }
+
+                playAtIndex(index);
+            }
+
+            function nextLoopSrc() {
+                // Moves to new sourc
+                let targetIndex = loopSrc + 1;
+                if (targetIndex >= sources.length) targetIndex = 0;
+                return targetIndex;
+            }
+
+            function playAtIndex(index) {
                 // Check if src is the same
-                if(mooviePlayer.video.src == sources[loopSrc].src) {
+                if (mooviePlayer.video.src == sources[index].src) {
                     mooviePlayer.video.currentTime = 0;
                     mooviePlayer.medialoading.style.display = "none";
                     mooviePlayer.moovie_el_controlbar.style.opacity = 1;
                 } else {
 
                     // Change Source
-                    mooviePlayer.video.src = sources[loopSrc].src; 
+                    mooviePlayer.video.src = sources[index].src;
 
                     // New src is ready to play
                     mooviePlayer.video.addEventListener("loadedmetadata", function() {
 
-                    mooviePlayer.medialoading.style.display = "none";
-                    mooviePlayer.moovie_el_controlbar.style.opacity = 1;
-                    mooviePlayer.video.play();
+                        mooviePlayer.medialoading.style.display = "none";
+                        mooviePlayer.moovie_el_controlbar.style.opacity = 1;
+                        mooviePlayer.video.play();
 
                     }, true);
+
+                    //Change Style
+                    listTable.children[index].classList.add("selected");
+                    listTable.children[loopSrc].classList.remove("selected");
+
+                    loopSrc = index;
                 }
+            }
 
-                console.log("Now playing: "+sources[loopSrc].title);
-      
-                // Moves to new sourc
-                loopSrc = loopSrc+1;
-                if(loopSrc >= sources.length) loopSrc = 0;
 
-             }, 100);
+            mooviePlayer.video.addEventListener("ended", function() {
+                mooviePlayer.medialoading.style.display = "block";
+                mooviePlayer.moovie_el_controlbar.style.opacity = 0;
+
+                // Wait function 100ms
+                setTimeout(function() {
+
+                    playAtIndex(nextLoopSrc());
 
-        }, true);
+                    console.log("Now playing: " + sources[loopSrc].title);
+
+                }, 100);
+
+            }, true);
         }
 
         // Setup
         this.InitModule();
     }
-}
-
-
+}
\ No newline at end of file