fix bugs, rollback event function and readable

This commit is contained in:
bonjinnorenka 2023-09-08 00:46:37 +09:00
parent b1a1e5230d
commit c3ea7fb72c
2 changed files with 119 additions and 54 deletions

View File

@ -22,6 +22,8 @@ function get_playlist(plid) {
player.on('ended', function () { player.on('ended', function () {
var url = new URL('https://example.com/embed/' + response.nextVideo); var url = new URL('https://example.com/embed/' + response.nextVideo);
const search_params = new URLSearchParams(location.search);
url.searchParams.set('list', plid); url.searchParams.set('list', plid);
if (!plid.startsWith('RD')) if (!plid.startsWith('RD'))
url.searchParams.set('index', response.index); url.searchParams.set('index', response.index);
@ -33,6 +35,12 @@ function get_playlist(plid) {
url.searchParams.set('speed', video_data.params.speed); url.searchParams.set('speed', video_data.params.speed);
if (video_data.params.local !== video_data.preferences.local) if (video_data.params.local !== video_data.preferences.local)
url.searchParams.set('local', video_data.params.local); url.searchParams.set('local', video_data.params.local);
if (search_params.get('widgetid') !== null)
url.searchParams.set('widgetid', search_params.get('widgetid'));
if (search_params.get('origin') !== null)
url.searchParams.set('origin', search_params.get('origin'));
if (search_params.get('enablejsapi') !== null)
url.searchParams.set('enablejsapi', search_params.get('enablejsapi'));
location.assign(url.pathname + url.search); location.assign(url.pathname + url.search);
}); });

View File

@ -9,17 +9,41 @@ class invidious_embed {
static videodata_cahce = {}; static videodata_cahce = {};
addEventListener(eventname, func) { addEventListener(eventname, func) {
if (eventname in invidious_embed.eventname_table) { if (typeof func === 'function') {
eventname = invidious_embed.eventname_table[eventname]; if (eventname in invidious_embed.eventname_table) {
this.eventobject[invidious_embed.eventname_table[eventname]].push(func);
} else if (invidious_embed.available_event_name.includes(eventname)) {
this.eventobject[eventname].push(func);
} else {
console.warn('addEventListener cannot find such eventname : ' + eventname);
}
} else {
console.warn("addEventListner secound args must be function");
} }
this.eventElement.addEventListener(eventname,func);
} }
removeEventListener(eventname, func) { removeEventListener(eventname, func) {
if (eventname in invidious_embed.eventname_table) { if (typeof func === 'function') {
eventname = invidious_embed.eventname_table[eventname]; let internal_eventname;
if (eventname in invidious_embed.eventname_table) {
internal_eventname = invidious_embed.eventname_table[eventname];
} else if (invidious_embed.available_event_name.includes(eventname)) {
internal_eventname = eventname;
} else {
console.warn('removeEventListner cannot find such eventname : ' + eventname);
return;
}
this.eventobject[internal_eventname] = this.eventobject[internal_eventname].filter(x => {
const allowFunctionDetected = x.toString()[0] === '(';
if (allowFunctionDetected) {
x.toString() !== func.toString();
} else {
x !== func;
}
});
} else {
console.warn("removeEventListener secound args must be function");
} }
this.eventElement.removeEventListener(eventname,func);
} }
async instance_access_check(instance_origin) { async instance_access_check(instance_origin) {
@ -85,9 +109,9 @@ class invidious_embed {
if (not_in_videodata_cahce) { if (not_in_videodata_cahce) {
const video_api_response = await fetch(invidious_embed.invidious_instance + "/api/v1/videos/" + videoid + "?fields=title,videoId,paid,premium,isFamilyFriendly,isListed,liveNow"); const video_api_response = await fetch(invidious_embed.invidious_instance + "/api/v1/videos/" + videoid + "?fields=title,videoId,paid,premium,isFamilyFriendly,isListed,liveNow");
if (video_api_response.ok) { if (video_api_response.ok) {
invidious_embed.videodata_cahce[videoid] = Object.assign({},{status:true},await video_api_response.json()); invidious_embed.videodata_cahce[videoid] = Object.assign({}, { status: true }, await video_api_response.json());
} else { } else {
invidious_embed.videodata_cahce[videoid] = {status:false}; invidious_embed.videodata_cahce[videoid] = { status: false };
} }
} }
return invidious_embed.videodata_cahce[videoid]; return invidious_embed.videodata_cahce[videoid];
@ -110,7 +134,6 @@ class invidious_embed {
} }
async Player(element, options) { async Player(element, options) {
this.eventElement = document.createElement("span");
this.player_status = -1; this.player_status = -1;
this.error_code = 0; this.error_code = 0;
this.volume = 100; this.volume = 100;
@ -118,6 +141,7 @@ class invidious_embed {
this.playlistVideoIds = []; this.playlistVideoIds = [];
this.eventobject = { ready: [], ended: [], error: [], ratechange: [], volumechange: [], waiting: [], timeupdate: [], loadedmetadata: [], play: [], seeking: [], seeked: [], playerresize: [], pause: [], statechange: [] }; this.eventobject = { ready: [], ended: [], error: [], ratechange: [], volumechange: [], waiting: [], timeupdate: [], loadedmetadata: [], play: [], seeking: [], seeked: [], playerresize: [], pause: [], statechange: [] };
let replace_elemnt; let replace_elemnt;
this.isPlaylistVideoList = false;
if (element === undefined || element === null) { if (element === undefined || element === null) {
throw 'Please, pass element id or HTMLElement as first argument'; throw 'Please, pass element id or HTMLElement as first argument';
} else if (typeof element === 'string') { } else if (typeof element === 'string') {
@ -160,7 +184,7 @@ class invidious_embed {
let no_start_parameter = true; let no_start_parameter = true;
if (typeof options.playerVars === 'object') { if (typeof options.playerVars === 'object') {
this.option_playerVars = options.playerVars; this.option_playerVars = options.playerVars;
Object.keys(options.playerVars).forEach(key=>{ Object.keys(options.playerVars).forEach(key => {
if (typeof key === 'string') { if (typeof key === 'string') {
let keyValue = options.playerVars[key]; let keyValue = options.playerVars[key];
switch (typeof keyValue) { switch (typeof keyValue) {
@ -169,14 +193,14 @@ class invidious_embed {
break; break;
case 'string': case 'string':
break; break;
default : default:
console.warn('player vars key value must be string or number'); console.warn('player vars key value must be string or number');
} }
search_params.append(key, keyValue); search_params.append(key, keyValue);
} else { } else {
console.warn('player vars key must be string'); console.warn('player vars key must be string');
} }
}) });
if (options.playerVars.start !== undefined) { if (options.playerVars.start !== undefined) {
no_start_parameter = false; no_start_parameter = false;
} }
@ -191,14 +215,19 @@ class invidious_embed {
} }
iframe_src += "?" + search_params.toString(); iframe_src += "?" + search_params.toString();
if (typeof options.events === 'object') { if (typeof options.events === 'object') {
for (let x in options.events) { Object.keys(options.events).forEach(key => {
this.addEventListener(x, options.events[x]); if (typeof options.events[key] === 'function') {
} this.addEventListener(key, options.events[key]);
} else {
console.warn('event function must be function');
}
});
} }
this.player_iframe = document.createElement("iframe"); this.player_iframe = document.createElement("iframe");
this.loaded = false; this.loaded = false;
this.addEventListener('loadedmetadata', () => { this.event_executor('ready'); this.loaded = true; }); this.addEventListener('loadedmetadata', () => { this.event_executor('ready'); this.loaded = true; });
this.addEventListener('loadedmetadata', () => { this.setVolume(this.volume); }); this.addEventListener('loadedmetadata', () => { this.setVolume(this.volume); });
this.addEventListener('ended', () => { if (this.isPlaylistVideoList) { this.nextVideo() } })
this.player_iframe.src = iframe_src; this.player_iframe.src = iframe_src;
if (typeof options.width === 'number') { if (typeof options.width === 'number') {
this.player_iframe.width = options.width; this.player_iframe.width = options.width;
@ -206,8 +235,8 @@ class invidious_embed {
this.player_iframe.width = 640; this.player_iframe.width = 640;
this.player_iframe.style.maxWidth = '100%'; this.player_iframe.style.maxWidth = '100%';
} }
if (typeof options.width === 'number') { if (typeof options.height === 'number') {
this.player_iframe.width = options.width; this.player_iframe.height = options.height;
} else { } else {
this.player_iframe.height = this.player_iframe.width * (9 / 16); this.player_iframe.height = this.player_iframe.width * (9 / 16);
} }
@ -224,17 +253,26 @@ class invidious_embed {
} }
event_executor(eventname) { event_executor(eventname) {
let event_parameter = {detail:undefined}; const execute_functions = this.eventobject[eventname];
if (eventname === 'statechange') { let return_data = { type: eventname, data: null, target: this };
event_parameter.detail = this.getPlayerState(); switch (eventname) {
} else if (eventname === 'error'){ case 'statechange':
event_parameter.detail = this.error_code; return_data.data = this.getPlayerState();
break;
case 'error':
return_data.data = this.error_code;
} }
this.eventElement.dispatchEvent(new Event(eventname,event_parameter)); execute_functions.forEach(func => {
try {
func(return_data);
} catch (e) {
console.error(e);
}
});
} }
receiveMessage(message) { receiveMessage(message) {
const onControlAndHasWidgetId = message.data.from==='invidious_control' && message.data.widgetid===this.widgetid.toString(); const onControlAndHasWidgetId = message.data.from === 'invidious_control' && message.data.widgetid === this.widgetid.toString();
if (onControlAndHasWidgetId) { if (onControlAndHasWidgetId) {
switch (message.data.message_kind) { switch (message.data.message_kind) {
case 'info_return': case 'info_return':
@ -415,7 +453,7 @@ class invidious_embed {
} }
} }
if (mediaContetUrl.length > 0) { if (mediaContetUrl.length > 0) {
const match_result = mediaContetUrl.match(/\/([A-Za-z0-9]{11})\//); const match_result = mediaContetUrl.match(/\/([A-Za-z0-9]{11})/);
if (match_result !== null && match_result.length === 2) { if (match_result !== null && match_result.length === 2) {
videoId = match_result[1]; videoId = match_result[1];
} else { } else {
@ -472,44 +510,47 @@ class invidious_embed {
} }
loadVideoById(option, startSeconds) { loadVideoById(option, startSeconds) {
this.isPlaylistVideoList = false;
this.playOtherVideoById(option, true, startSeconds, {}); this.playOtherVideoById(option, true, startSeconds, {});
} }
cueVideoById(option, startSeconds) { cueVideoById(option, startSeconds) {
this.isPlaylistVideoList = false;
this.playOtherVideoById(option, false, startSeconds, {}); this.playOtherVideoById(option, false, startSeconds, {});
} }
cueVideoByUrl(option, startSeconds) { cueVideoByUrl(option, startSeconds) {
this.isPlaylistVideoList = false;
this.playOtherVideoById(option, false, startSeconds, {}); this.playOtherVideoById(option, false, startSeconds, {});
} }
loadVideoByUrl(option, startSeconds) { loadVideoByUrl(option, startSeconds) {
this.isPlaylistVideoList = false;
this.playOtherVideoById(option, true, startSeconds, {}); this.playOtherVideoById(option, true, startSeconds, {});
} }
async playPlaylist(playlistData,autoplay,index,startSeconds) { async playPlaylist(playlistData, autoplay, index, startSeconds) {
let playlistId; let playlistId;
if (typeof playlistData === 'string') { if (typeof playlistData === 'string') {
this.playlistVideoIds = await this.getPlaylistVideoids(playlistData); this.playlistVideoIds = [playlistData];
playlistId = playlistData; this.isPlaylistVideoList = true;
} else if (typeof playlistData === 'object') { } else if (typeof playlistData === 'object') {
if (Array.isArray(playlistData)) { if (Array.isArray(playlistData)) {
this.playlistVideoIds = playlistData; this.playlistVideoIds = playlistData;
this.isPlaylistVideoList = true;
} else { } else {
index = playlistData['index']; index = playlistData['index'];
let listType = 'playlist'; let listType = 'playlist';
if (typeof playlistData['listType'] === 'string'){ if (typeof playlistData['listType'] === 'string') {
listType = playlistData['listType']; listType = playlistData['listType'];
} }
switch (listType) { switch (listType) {
case 'playlist': case 'playlist':
if (Array.isArray(playlistData['list'])) { if (typeof playlistData['list'] === 'string') {
this.playlistVideoIds = playlistData['list'];
} else if(typeof playlistData['list'] === 'string') {
this.playlistVideoIds = await this.getPlaylistVideoids(playlistData['list']); this.playlistVideoIds = await this.getPlaylistVideoids(playlistData['list']);
playlistId = playlistData['list']; playlistId = playlistData['list'];
} else { } else {
console.error('playlist data list must be string or array of strings'); console.error('playlist data list must be string');
return; return;
} }
break; break;
@ -521,44 +562,52 @@ class invidious_embed {
return; return;
} }
} }
if (typeof playlistData.startSeconds === 'number') {
startSeconds = playlistData.startSeconds;
}
} else { } else {
console.error('playlist function first argument must be string or array of string'); console.error('playlist function first argument must be string or array of string');
return; return;
} }
if (this.playlistVideoIds.length === 0){ if (this.playlistVideoIds.length === 0) {
console.error('playlist length 0 is invalid'); console.error('playlist length 0 is invalid');
return; return;
} }
let parameter = {index:0}; let parameter = { index: 0 };
if (typeof index === 'undefined') { if (typeof index === 'undefined') {
index = 0; index = 0;
} else if (typeof index === 'number'){ } else if (typeof index === 'number') {
parameter.index = index; parameter.index = index;
} else{ } else {
console.error('index must be number of undefined'); console.error('index must be number of undefined');
} }
if (typeof playlistId === 'string') { if (typeof playlistId === 'string') {
parameter['list'] = playlistId; parameter['list'] = playlistId;
this.playlistId = playlistId; this.playlistId = playlistId;
} }
this.playOtherVideoById(this.playlistVideoIds[index],autoplay,startSeconds,parameter); this.sub_index = parameter.index;
if (index >= this.playlistVideoIds.length) {
index = 0;
parameter.index = 0;
}
this.playOtherVideoById(this.playlistVideoIds[index], autoplay, startSeconds, parameter);
} }
cuePlaylist(data,index,startSeconds) { cuePlaylist(data, index, startSeconds) {
this.playPlaylist(data,false,index,startSeconds); this.playPlaylist(data, false, index, startSeconds);
} }
loadPlaylist(data,index,startSeconds) { loadPlaylist(data, index, startSeconds) {
this.playPlaylist(data,true,index,startSeconds); this.playPlaylist(data, true, index, startSeconds);
} }
playVideoAt(index) { playVideoAt(index) {
if (typeof index === 'number') { if (typeof index === 'number') {
let parameter = {index:index}; let parameter = { index: index };
if (this.playlistId !== undefined) { if (this.playlistId !== undefined) {
parameter['list'] = this.playlistId; parameter['list'] = this.playlistId;
} }
this.playOtherVideoById(this.playlistVideoIds[index],true,0,parameter); this.playOtherVideoById(this.playlistVideoIds[index], true, 0, parameter);
} else { } else {
console.error('playVideoAt first argument must be number'); console.error('playVideoAt first argument must be number');
} }
@ -566,7 +615,10 @@ class invidious_embed {
async nextVideo() { async nextVideo() {
let now_index = this.promise_send_event('getplaylistindex'); let now_index = this.promise_send_event('getplaylistindex');
if (now_index === this.playlistVideoIds.length -1) { if (now_index === null) {
now_index = this.sub_index;
}
if (now_index === this.playlistVideoIds.length - 1) {
if (this.loop) { if (this.loop) {
now_index = 0; now_index = 0;
} else { } else {
@ -576,18 +628,22 @@ class invidious_embed {
} else { } else {
now_index++; now_index++;
} }
let parameter = {index:now_index}; this.sub_index = now_index;
let parameter = { index: now_index };
if (this.playlistId !== undefined) { if (this.playlistId !== undefined) {
parameter['list'] = this.playlistId; parameter['list'] = this.playlistId;
} }
this.playOtherVideoById(this.playlistVideoIds[now_index],true,0,parameter); this.playOtherVideoById(this.playlistVideoIds[now_index], true, 0, parameter);
} }
async previousVideo() { async previousVideo() {
let now_index = this.promise_send_event('getplaylistindex'); let now_index = this.promise_send_event('getplaylistindex');
if (now_index === null) {
now_index = this.sub_index;
}
if (now_index === 0) { if (now_index === 0) {
if (this.loop) { if (this.loop) {
now_index = this.playlistVideoIds.length -1; now_index = this.playlistVideoIds.length - 1;
} else { } else {
console.log('back to start of playlist'); console.log('back to start of playlist');
return; return;
@ -595,11 +651,12 @@ class invidious_embed {
} else { } else {
now_index--; now_index--;
} }
let parameter = {index:now_index}; this.sub_index = now_index;
let parameter = { index: now_index };
if (this.playlistId !== undefined) { if (this.playlistId !== undefined) {
parameter['list'] = this.playlistId; parameter['list'] = this.playlistId;
} }
this.playOtherVideoById(this.playlistVideoIds[now_index],true,0,parameter); this.playOtherVideoById(this.playlistVideoIds[now_index], true, 0, parameter);
} }
getDuration() { getDuration() {
@ -621,7 +678,7 @@ class invidious_embed {
async getVideoData() { async getVideoData() {
const videoData = await this.videodata_api(this.videoId); const videoData = await this.videodata_api(this.videoId);
return { video_id: this.videoId, title: await this.promise_send_event('gettitle'), list: await this.promise_send_event('getplaylistid'), isListed:videoData.isListed, isLive:videoData.liveNow, isPremiere:videoData.premium}; return { video_id: this.videoId, title: await this.promise_send_event('gettitle'), list: await this.promise_send_event('getplaylistid'), isListed: videoData.isListed, isLive: videoData.liveNow, isPremiere: videoData.premium };
} }
getPlaylistIndex() { getPlaylistIndex() {
@ -659,9 +716,9 @@ function invidious_ready(func) {
invidious_embed.invidious_instance = new URL(document.currentScript.src).origin; 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 }; const invidious = { Player: invidious_embed, PlayerState: { ENDED: 0, PLAYING: 1, PAUSED: 2, BUFFERING: 3, CUED: 5 }, ready: invidious_ready };
if (typeof onInvidiousIframeAPIReady === 'function') { if (typeof onInvidiousIframeAPIReady === 'function') {
try{ try {
onInvidiousIframeAPIReady(); onInvidiousIframeAPIReady();
} catch(e) { } catch (e) {
console.error(e); console.error(e);
} }
} }