small improve

Co-authored-by: AHOHNMYC <24810600+AHOHNMYC@users.noreply.github.com>

assets/js/embed.js

@@ -73,9 +73,10 @@ function return_message(message,target_window){
     if (widgetid !== null) {
         additional_info.widgetid = widgetid;
     }
-    if(message.message_kind==='event'&&message.eventname==='timeupdate'||message.eventname==='loadedmetadata'){
-        let add_value = {getvolume:player.volume(),getduration:player.duration(),getcurrenttime:player.currentTime(),getplaystatus:player.paused(),getplaybackrate:player.playbackRate(),getloopstatus:player.loop(),getmutestatus:player.muted(),getfullscreenstatus:player.isFullscreen(),getavailableplaybackrates:options.playbackRates,gettitle:player_data.title};
-        additional_info['value'] = add_value;
+    if (message.message_kind === 'event') {
+        if (message.eventname === 'timeupdate' || message.eventname === 'loadedmetadata') {
+            additional_info['value'] = { getvolume: player.volume(), getduration: player.duration(), getcurrenttime: player.currentTime(), getplaystatus: player.paused(), getplaybackrate: player.playbackRate(), getloopstatus: player.loop(), getmutestatus: player.muted(), getfullscreenstatus: player.isFullscreen(), getavailableplaybackrates: options.playbackRates, gettitle: player_data.title };
+        }
     }
     if (message.eventname === 'error') {
         additional_info['value'] = { geterrorcode: player.error().code };
@@ -86,11 +87,16 @@ function return_message(message,target_window){
 }
 
 function control_embed_iframe(message) {
-    let url_params = new URLSearchParams(location.search);
-    let origin = url_params.get('origin');
-    if(origin===null||origin===message.origin){
-        let widgetid = url_params.get('widgetid');
-        if((widgetid===null&&message.data.widgetid===null)||widgetid===message.data.widgetid&&message.data.target==='invidious_control'){
+    const url_params = new URLSearchParams(location.search);
+    const origin = url_params.get('origin');
+    const origin_equal = origin === null || origin === message.origin;
+    if (origin_equal) {
+        const widgetid = url_params.get('widgetid');
+        const widgetid_equal = (widgetid === null && message.data.widgetid === null) || widgetid === message.data.widgetid;
+        const target_name_equal = message.data.target === 'invidious_control';
+        const eventname_string_check = typeof message.data.eventname === 'string';
+        if (widgetid_equal && target_name_equal && eventname_string_check) {
+            let message_return_value;
             switch (message.data.eventname) {
                 case 'play':
                     player.play();
@@ -98,64 +104,67 @@ function control_embed_iframe(message){
                 case 'pause':
                     player.pause();
                     break;
-                case 'getvolume':
-                    return_message({command:'getvolume',value:player.volume(),message_kind:'info_return'},message.source);
-                    break;
+
                 case 'setvolume':
                     player.volume(message.data.value);
                     break;
-                case 'getduration':
-                    return_message({command:'getduration',value:player.duration(),message_kind:'info_return'},message.source);
-                    break;
-                case 'getcurrenttime':
-                    return_message({command:'getcurrenttime',value:player.currentTime(),message_kind:'info_return'},message.source);
-                    break;
                 case 'seek':
                     const duration = player.duration();
                     let newTime = helpers.clamp(message.data.value, 0, duration);
                     player.currentTime(newTime);
                     break;
-                case 'getplaystatus':
-                    return_message({command:'getplaystatus',value:player.paused(),message_kind:'info_return'},message.source);
-                    break;
-                case 'getplaybackrate':
-                    return_message({command:'getplaybackrate',value:player.playbackRate(),message_kind:'info_return'},message.source);
-                    break;
                 case 'setplaybackrate':
                     player.playbackRate(message.data.value);
                     break;
-                case 'getavailableplaybackrates':
-                    return_message({command:'getavailableplaybackrates',value:options.playbackRates,message_kind:'info_return'},message.source);
-                    break;
-                case 'getloopstatus':
-                    return_message({command:'getloopstatus',value:player.loop(),message_kind:'info_return'},message.source);
-                    break;
                 case 'setloopstatus':
                     player.loop(message.data.value);
                     break;
-                case 'getmutestatus':
-                    return_message({command:'getmutestatus',value:player.muted(),message_kind:'info_return'},message.source);
-                    break;
-                case 'setmutestatus':
-                    player.muted(message.data.value);
-                    break;
-                case 'gettitle':
-                    return_message({command:'gettitle',value:player_data.title,message_kind:'info_return'},message.source);
-                    break;
-                case 'getfullscreenstatus':
-                    return_message({command:'getfullscreenstatus',value:player.isFullscreen(),message_kind:'info_return'},message.source);
-                    break;
                 case 'requestfullscreen':
                     player.requestFullscreen();
                     break;
                 case 'exitfullscreen':
                     player.exitFullscreen();
                     break;
-                case 'geterrorcode':
-                    return_message({command:'geterrorcode',value:player.error().code,message_kind:'info_return'},message.source);
-                    break;
-                case 'getplaylist':
 
+                case 'getvolume':
+                    message_return_value = player.volume();
+                    break;
+                case 'getduration':
+                    message_return_value = player.duration();
+                    break;
+                case 'getcurrenttime':
+                    message_return_value = player.currentTime();
+                    break;
+                case 'getplaystatus':
+                    message_return_value = player.paused();
+                    break;
+                case 'getplaybackrate':
+                    message_return_value = player.playbackRate();
+                    break;
+                case 'getavailableplaybackrates':
+                    message_return_value = options.playbackRates;
+                    break;
+                case 'getloopstatus':
+                    message_return_value = player.loop();
+                    break;
+                case 'getmutestatus':
+                    message_return_value = player.muted();
+                    break;
+                case 'gettitle':
+                    message_return_value = player_data.title;
+                    break;
+                case 'getfullscreenstatus':
+                    message_return_value = player.isFullscreen();
+                    break;
+                case 'geterrorcode':
+                    message_return_value = player.error().code;
+                    break;
+                default:
+                    console.info("Unhandled event name: " + message.data.eventname);
+                    break;
+            }
+            if (message_return_value !== undefined) {
+                return_message({ command: message.data.eventname, value: message_return_value, message_kind: 'info_return' }, message.source);
             }
         }
     }
@@ -163,16 +172,8 @@ function control_embed_iframe(message){
 
 if (new URLSearchParams(location.search).get('enablejsapi') === '1') {
     window.addEventListener('message', control_embed_iframe);
-    player.on('ended',function(){return_message({message_kind:'event',eventname:'ended'})});
-    player.on('error',function(){return_message({message_kind:'event',eventname:'error'})});
-    player.on('ratechange',function(){return_message({message_kind:'event',eventname:'ratechange'})});
-    player.on('volumechange',function(){return_message({message_kind:'event',eventname:'volumechange'})});
-    player.on('waiting',function(){return_message({message_kind:'event',eventname:'waiting'})});
-    player.on('timeupdate',function(){return_message({message_kind:'event',eventname:'timeupdate'})});
-    player.on('loadedmetadata',function(){return_message({message_kind:'event',eventname:'loadedmetadata'})});
-    player.on('play',function(){return_message({message_kind:'event',eventname:'play'})});
-    player.on('seeking',function(){return_message({message_kind:'event',eventname:'seeking'})});
-    player.on('seeked',function(){return_message({message_kind:'event',eventname:'seeked'})});
-    player.on('playerresize',function(){return_message({message_kind:'event',eventname:'playerresize'})});
-    player.on('pause',function(){return_message({message_kind:'event',eventname:'pause'})});
+    const event_list = ['ended', 'error', 'ratechange', 'volumechange', 'waiting', 'timeupdate', 'loadedmetadata', 'play', 'seeking', 'seeked', 'playerresize', 'pause'];
+    event_list.forEach(event_name => {
+        player.on(event_name, function () { return_message({ message_kind: 'event', eventname: event_name }) });
+    });
 }

assets/js/invidious_iframe_api.js

@@ -1,34 +1,35 @@
 class invidious_embed {
     static widgetid = 0;
     static eventname_table = { onPlaybackRateChange: 'ratechange', onStateChange: 'statechange', onerror: 'error' };
+    static available_event_name = ['ended', 'error', 'ratechange', 'volumechange', 'waiting', 'timeupdate', 'loadedmetadata', 'play', 'seeking', 'seeked', 'playerresize', 'pause'];
     static api_promise = false;
+    static invidious_instance = '';
     addEventListener(eventname, func) {
         if (eventname in invidious_embed.eventname_table) {
             this.eventobject[invidious_embed.eventname_table[eventname]].push(func);
         }
         else {
-            try{
             this.eventobject[eventname].push(func);
         }
-            catch{}
-        }
     }
+
     removeEventListner(eventname, func) {
-        var internal_eventname;
+        let internal_eventname;
         if (eventname in invidious_embed.eventname_table) {
             internal_eventname = invidious_embed.eventname_table[eventname];
         }
-        else{
+        else if (invidious_embed.available_event_name.includes(eventname)) {
             internal_eventname = eventname;
         }
         this.eventobject[internal_eventname] = this.eventobject[internal_eventname].fillter(x => x !== func);
     }
+
     Player(element, options) {
         this.player_status = -1;
         this.error_code = 0;
         this.volume = 100;
         this.eventobject = { ready: [], ended: [], error: [], ratechange: [], volumechange: [], waiting: [], timeupdate: [], loadedmetadata: [], play: [], seeking: [], seeked: [], playerresize: [], pause: [], statechange: [] };
-        var replace_elemnt;
+        let replace_elemnt;
         if (element === undefined || element === null) {
             throw 'Please, pass element id or HTMLElement as first argument';
         }
@@ -38,10 +39,13 @@ class invidious_embed{
         else {
             replace_elemnt = element;
         }
-        var iframe_src = '';
+        let iframe_src = '';
         if (options.host !== undefined && options.host !== "") {
             iframe_src = new URL(options.host).origin;
         }
+        else if (invidious_embed.invidious_instance !== '') {
+            iframe_src = invidious_embed.invidious_instance;
+        }
         else {
             iframe_src = 'https://vid.puffyan.us';//I set most hot instanse but this may need discuss or change ay to default instanse
         }
@@ -54,8 +58,9 @@ class invidious_embed{
         else {
             this.error_code = 2;
             this.event_executor('error');
+            return;
         }
-        var search_params = new URLSearchParams('');
+        let search_params = new URLSearchParams('');
         search_params.append('widgetid', invidious_embed.widgetid);
         this.widgetid = invidious_embed.widgetid;
         invidious_embed.widgetid++;
@@ -63,7 +68,7 @@ class invidious_embed{
         search_params.append('enablejsapi', '1');
         if (typeof options.playerVars === 'object') {
             this.option_playerVars = options.playerVars;
-            for(var x in options.playerVars){
+            for (let x in options.playerVars) {
                 if (typeof x === 'string' && typeof options.playerVars[x] === 'string') {
                     search_params.append(x, options.playerVars[x]);
                 }
@@ -73,7 +78,7 @@ class invidious_embed{
             }
         }
         iframe_src += "?" + search_params.toString();
-        if(options.events!==undefined&&typeof options.events==='object'){
+        if (typeof options.events === 'object') {
             for (let x in options.events) {
                 this.addEventListener(x, options.events[x]);
             }
@@ -83,7 +88,7 @@ class invidious_embed{
         this.addEventListener('loadedmetadata', () => { this.event_executor('ready'); this.loaded = true });
         this.addEventListener('loadedmetadata', () => { this.setVolume(this.volume) });
         this.player_iframe.src = iframe_src;
-        if(options.width!==undefined&&typeof options.width==='number'){
+        if (typeof options.width === 'number') {
             this.player_iframe.width = options.width;
         }
         else {
@@ -94,7 +99,7 @@ class invidious_embed{
                 this.player_iframe.width = 640;
             }
         }
-        if(options.width!==undefined&&typeof options.width==='number'){
+        if (typeof options.width === 'number') {
             this.player_iframe.width = options.width;
         }
         else {
@@ -105,43 +110,46 @@ class invidious_embed{
         this.eventdata = {};
         return this;
     }
+
     postMessage(data) {
-        var additionalInfo = {'origin':location.origin,'widgetid':String(this.widgetid),'target':'invidious_control'};
+        const additionalInfo = { 'origin': location.origin, 'widgetid': this.widgetid.toString(), 'target': 'invidious_control' };
         data = Object.assign(additionalInfo, data);
         this.player_iframe.contentWindow.postMessage(data, this.target_origin);
     }
+
     event_executor(eventname) {
-        var execute_functions = this.eventobject[eventname];
-        var return_data = {data:undefined,target:this};
+        const execute_functions = this.eventobject[eventname];
+        let return_data = { data: undefined, target: this };
         if (eventname === 'statechange') {
             return_data.data = this.getPlayerState();
         }
-        for(var x=0;x<execute_functions.length;x++){
+        for (let x = 0; x < execute_functions.length; x++) {
             try {
                 execute_functions[x](return_data);
             }
             catch { }
         }
     }
+
     receiveMessage(message) {
         if (message.data.from === 'invidious_control' && message.data.widgetid === String(this.widgetid)) {
             switch (message.data.message_kind) {
                 case 'info_return':
-                    var promise_array = this.message_wait[message.data.command];
-                    for(var x=0;x<promise_array.length;x++){
+                    const promise_array = this.message_wait[message.data.command];
+                    promise_array.forEach(element => {
                         if (message.data.command === 'getvolume') {
-                            promise_array[x](message.data.value*100);
+                            element(message.data.value * 100);
                         }
                         else {
-                            promise_array[x](message.data.value);
-                        }
+                            element(message.data.value);
                         }
+                    });
                     this.message_wait[message.data.command] = [];
                     break;
                 case 'event':
-                    if(message.data.eventname!==undefined&&typeof message.data.eventname==='string'){
+                    if (typeof message.data.eventname === 'string') {
                         this.event_executor(message.data.eventname);
-                        var previous_status = this.player_status;
+                        const previous_status = this.player_status;
                         switch (message.data.eventname) {
                             case 'ended':
                                 this.player_status = 0;
@@ -170,81 +178,96 @@ class invidious_embed{
             }
         }
     }
-    promise_resolve(){
-        var res_outer;
-        var pro = new Promise((res,rej)=>{res_outer=res});
-        return {'promise':pro,'resolve':res_outer};
-    }
+
     promise_send_event(event_name) {
         if (invidious_embed.api_promise) {
-            var pro_object = this.promise_resolve();
-            this.message_wait[event_name].push(pro_object.resolve);
+            const promise_object = new Promise((resolve, reject) => { this.message_wait[event_name].push(resolve) });
             this.postMessage({ eventname: event_name });
-            return pro_object.promise;
+            return promise_object;
         }
         else {
             return this.eventdata[event_name];
         }
     }
+
     getPlayerState() {
         return this.player_status;
     }
+
     playVideo() {
         this.postMessage({ eventname: 'play' });
     }
+
     pauseVideo() {
         this.postMessage({ eventname: 'pause' });
     }
+
     getVolume() {
         return this.promise_send_event('getvolume');
     }
+
     setVolume(volume) {
-        volume = Number(volume);
+        if (typeof volume === 'number') {
             this.volume = volume;
             if (volume !== NaN && volume != undefined && volume >= 0 && volume <= 100) {
                 this.postMessage({ eventname: 'setvolume', value: volume / 100 });
             }
         }
+        else {
+            console.warn("setVolume first argument must be number");
+        }
+    }
+
     getIframe() {
         return this.player_iframe;
     }
+
     destroy() {
         this.player_iframe.remove();
     }
+
     mute() {
         this.postMessage({ eventname: 'setmutestatus', value: true });
     }
+
     unMute() {
         this.postMessage({ eventname: 'setmutestatus', value: false });
     }
+
     isMuted() {
         return this.promise_send_event('getmutestatus');
     }
+
     seekTo(seconds, allowSeekAhead) {//seconds must be a number and allowSeekAhead is ignore
         seconds = Number(seconds);
         if (seconds !== NaN && seconds !== undefined) {
             this.postMessage({ eventname: 'seek', value: seconds });
         }
     }
+
     setSize(width, height) {//width and height must be Number
         this.player_iframe.width = Number(width);
         this.player_iframe.height = Number(height);
     }
+
     getPlaybackRate() {
         return this.promise_send_event('getplaybackrate');
     }
+
     setPlaybackRate(suggestedRate) {//suggestedRate must be number.this player allow not available playback rate such as 1.4
         suggestedRate = Number(suggestedRate);
         if (suggestedRate !== NaN && suggestedRate !== undefined) {
             this.postMessage({ eventname: 'setplaybackrate', value: suggestedRate });
         }
     }
+
     getAvailablePlaybackRates() {
         return this.promise_send_event('getavailableplaybackrates');
     }
+
     playOtherVideoById(option, autoplay, startSeconds_arg) {//internal fuction
         let videoId = '';
-        let startSeconds = -1;
+        let startSeconds = 0;
         let endSeconds = -1;
         let mediaContetUrl = '';
         if (typeof option === 'string') {
@@ -254,31 +277,33 @@ class invidious_embed{
             else {
                 mediaContetUrl = option;
             }
-            if(startSeconds_arg!==undefined&&typeof startSeconds_arg==='number'){
+            if (typeof startSeconds_arg === 'number') {
                 startSeconds = startSeconds_arg;
             }
         }
         else if (typeof option === 'object') {
-            if(option.videoId!==undefined&&typeof option.videoId==='string'){
+            if (typeof option.videoId === 'string') {
                 if (option.videoId.length == 11) {
                     videoId = option.videoId;
                 }
                 else {
                     this.error_code = 2;
                     this.event_executor('error');
+                    return;
                 }
             }
-            else if(option.mediaContentUrl!==undefined&&typeof option.mediaContentUrl==='string'){
+            else if (typeof option.mediaContentUrl === 'string') {
                 mediaContetUrl = option.mediaContentUrl;
             }
             else {
                 this.error_code = 2;
                 this.event_executor('error');
+                return;
             }
-            if(option.startSeconds!==undefined&&typeof option.startSeconds==='number'&&option.startSeconds>=0){
+            if (typeof option.startSeconds === 'number' && option.startSeconds >= 0) {
                 startSeconds = option.startSeconds;
             }
-            if(option.endSeconds!==undefined&&typeof option.endSeconds==='number'&&option.endSeconds>=0){
+            if (typeof option.endSeconds === 'number' && option.endSeconds >= 0) {
                 endSeconds = option.endSeconds;
             }
         }
@@ -297,32 +322,28 @@ class invidious_embed{
             if (tmp_videoId === null || tmp_videoId.length !== 11) {
                 this.error_code = 2;
                 this.event_executor('error');
+                return;
             }
             videoId = tmp_videoId;
         }
-        var iframe_sorce = this.target_origin.slice();
+        let iframe_sorce = this.target_origin.slice();
         iframe_sorce += "/embed/" + videoId;
         this.videoId = videoId;
-        var search_params = new URLSearchParams('');
+        let search_params = new URLSearchParams('');
         search_params.append('origin', location.origin);
         search_params.append('enablejsapi', '1');
         search_params.append('widgetid', invidious_embed.widgetid);
         this.widgetid = invidious_embed.widgetid;
         invidious_embed.widgetid++;
-        if(autoplay){
-            search_params.append('autoplay',1);
-        }
-        else{
-            search_params.append('autoplay',0);
-        }
+        search_params.append('autoplay', Number(autoplay));
         if (this.option_playerVars !== undefined) {
-            for(var x in this.option_playerVars){
-                if(x!=='autoplay'&&x!=='start'&&x!=='end'){
-                    search_params.append(x,this.option_playerVars[x]);
+            Object.keys(this.option_playerVars).forEach(key => {
+                if (key !== 'autoplay' && key !== 'start' && key !== 'end') {
+                    search_params.append(key, this.option_playerVars[key]);
                 }
+            })
         }
-        }
-        if(startSeconds!==-1&&startSeconds>=0){
+        if (startSeconds > 0) {
             search_params.append('start', startSeconds);
         }
         if (endSeconds !== -1 && endSeconds >= 0) {
@@ -330,7 +351,7 @@ class invidious_embed{
                 search_params.append('end', endSeconds);
             }
             else {
-                throw 'invalid end seconds';
+                throw 'Invalid end seconds because end seconds before start seconds';
             }
         }
         iframe_sorce += "?" + search_params.toString();
@@ -340,36 +361,46 @@ class invidious_embed{
         }
         this.eventdata = {};
     }
+
     loadVideoById(option, startSeconds) {
         this.playOtherVideoById(option, true, startSeconds);
     }
+
     cueVideoById(option, startSeconds) {
         this.playOtherVideoById(option, false, startSeconds);
     }
+
     cueVideoByUrl(option, startSeconds) {
         this.playOtherVideoById(option, false, startSeconds);
     }
+
     loadVideoByUrl(option, startSeconds) {
         this.playOtherVideoById(option, true, startSeconds);
     }
+
     getDuration() {
         return this.promise_send_event('getduration');
     }
+
     getVideoUrl() {
         return this.target_origin + "/watch?v=" + this.videoId;
     }
+
     async getVideoEmbedCode() {
         var title = await this.getVideoTitle();
-        return '<iframe width="560" height="315" src="' + this.target_origin + "/embed/" + this.videoId + '" title="' + title.replace('"','') + '" frameborder="0" allow="autoplay;encrypted-media;picture-in-picture; web-share" allowfullscreen></iframe>';
+        return '<iframe width="560" height="315" src="' + this.target_origin + '/embed/' + this.videoId + '" title="' + title.replace('"', "'") + '" frameborder="0" allow="autoplay;encrypted-media;picture-in-picture;web-share" allowfullscreen></iframe>';
     }
+
     getCurrentTime() {
         return this.promise_send_event('getcurrenttime');
     }
+
     constructor(element, options) {
         this.Player(element, options);
         window.addEventListener('message', (ms) => { this.receiveMessage(ms) });
         this.message_wait = { getvolume: [], getmutestatus: [], getduration: [], getcurrenttime: [], getplaybackrate: [], getavailableplaybackrates: [], gettitle: [] };
     }
+    
     async getVideoData() {
         return { video_id: this.videoId, title: await this.promise_send_event('gettitle') };
     }
@@ -379,6 +410,7 @@ function invidious_ready(func){
         func();
     }
 }
+invidious_embed.invidious_instance = new URL(document.currentScript.src).origin;
 const invidious = { Player: invidious_embed, PlayerState: { ENDED: 0, PLAYING: 1, PAUSED: 2, BUFFERING: 3, CUED: 5 }, ready: invidious_ready };
 try {
     onInvidiousIframeAPIReady();