mirror of https://github.com/torappinfo/uweb.git
734 lines
22 KiB
JavaScript
734 lines
22 KiB
JavaScript
if(window.__videoplayer_enhancer__){
|
|
window.__videoplayer_enhancer__();
|
|
throw '';
|
|
}else{
|
|
window.__videoplayer_enhancer__ = function(){
|
|
/* lib begin */
|
|
function debounce(fn, ms = 0) {
|
|
let timeoutId;
|
|
return function(...args) {
|
|
clearTimeout(timeoutId);
|
|
timeoutId = setTimeout(() => fn.apply(this, args), ms);
|
|
};
|
|
};
|
|
|
|
function throttle(fn, wait) {
|
|
let inThrottle, lastFn, lastTime;
|
|
return function(...args) {
|
|
if (!inThrottle) {
|
|
fn.apply(this, args);
|
|
lastTime = Date.now();
|
|
inThrottle = true;
|
|
} else {
|
|
clearTimeout(lastFn);
|
|
lastFn = setTimeout(function() {
|
|
if (Date.now() - lastTime >= wait) {
|
|
fn.apply(this, args);
|
|
lastTime = Date.now();
|
|
}
|
|
}, Math.max(wait - (Date.now() - lastTime), 0));
|
|
}
|
|
};
|
|
};
|
|
|
|
function is_same_size_position(ele1, ele2) {
|
|
try {
|
|
return ele1.clientWidth == ele2.clientWidth &&
|
|
ele1.clientHeight == ele2.clientHeight &&
|
|
ele1.scrollHeight == ele2.scrollHeight;
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function find_top_wrap_ele(ele) {
|
|
let origE = ele;
|
|
let wrap = ele;
|
|
do {
|
|
ele = ele.parentElement;
|
|
if (is_same_size_position(wrap, ele)) {
|
|
wrap = ele;
|
|
}
|
|
}while (ele.tagName !== 'BODY');
|
|
|
|
if(wrap == origE) {
|
|
wrap = document.createElement('div');
|
|
origE.parentElement.insertBefore(wrap, origE);
|
|
wrap.append(origE);
|
|
}
|
|
return wrap;
|
|
}
|
|
|
|
function fullscreen2Element(ele) {
|
|
if (document.fullscreen) {
|
|
let curFS = document.fullscreenElement;
|
|
if(curFS.tagName === 'VIDEO') {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
function is_parent(ele, parent) {
|
|
while (ele.tagName !== 'BODY' &&
|
|
ele !== parent && ele.parentElement !== parent) {
|
|
ele = ele.parentElement;
|
|
}
|
|
return ele.parentElement === parent;
|
|
}
|
|
|
|
function zero_padding(number, length = 2) {
|
|
return Array(Math.max(length - number.toString().length, 0) + 1).join(0) + number;
|
|
}
|
|
|
|
function sec2HHMMSS(time, sec_base = 1) {
|
|
const sec = sec_base, min = 60 * sec, hour = 60 * min;
|
|
const h = Math.floor(time / hour);
|
|
const m = Math.floor(time % hour / min);
|
|
const s = Math.floor(time % min / sec);
|
|
let result = zero_padding(m) + ':' + zero_padding(s);
|
|
if (h) {
|
|
return zero_padding(h) + ':' + result;
|
|
} else {
|
|
return result;
|
|
}
|
|
}
|
|
|
|
function HHMMSS2sec(time, sec_base = 1) {
|
|
const sec = sec_base, min = 60 * sec, hour = 60 * min;
|
|
const split = time.split(':');
|
|
if (split.length < 3) {
|
|
split.unshift(0);
|
|
}
|
|
const h = split[0];
|
|
const m = split[1];
|
|
const s = split[2];
|
|
return h * hour + m * min + s * sec;
|
|
}
|
|
|
|
function get_1cm_pixel_num() {
|
|
const div = document.createElement('div');
|
|
div.style.cssText = ['position: fixed', 'width: 1cm', 'visibility: hidden'].join('; ');
|
|
document.body.append(div);
|
|
const pixel = div.clientWidth;
|
|
div.remove();
|
|
get_1cm_pixel_num = () => pixel;
|
|
return pixel;
|
|
}
|
|
|
|
function px2cm(px) {
|
|
return px / get_1cm_pixel_num();
|
|
}
|
|
|
|
/* lib end */
|
|
|
|
/* add custom event begin */
|
|
|
|
function copy(obj) {
|
|
const new_obj = {};
|
|
for (let i in obj) {
|
|
new_obj[i] = obj[i];
|
|
}
|
|
return new_obj;
|
|
}
|
|
|
|
function TapEvent(touch_event) {
|
|
return new TouchEvent('tap',
|
|
Object.assign(copy(touch_event),
|
|
{ bubbles: true, cancelable: true, composed: true }));
|
|
}
|
|
|
|
function DoubleTapEvent(touch_event) {
|
|
return new TouchEvent('doubletap',
|
|
Object.assign(copy(touch_event),
|
|
{ bubbles: true, cancelable: true, composed: true }));
|
|
}
|
|
|
|
function TouchEvent2MouseEvent(event_type, event) {
|
|
const touch = event.targetTouches && event.targetTouches[0] || {};
|
|
return new MouseEvent(event_type,
|
|
Object.assign({}, copy(event), copy(touch),
|
|
{ bubbles: true, cancelable: true, composed: true }));
|
|
}
|
|
|
|
function add_tap_event_hook(element) {
|
|
let start_touch, end_touch, end_event = {};
|
|
const start = e => {
|
|
start_touch = end_touch = copy(e.touches[0]);
|
|
end_event = copy(e);
|
|
};
|
|
const move = e => {
|
|
end_touch = copy(e.touches[0]);
|
|
end_event = copy(e);
|
|
};
|
|
const end = e => {
|
|
if (Math.abs(start_touch.clientX - end_touch.clientX) <= 10 &&
|
|
Math.abs(start_touch.clientY - end_touch.clientY) <= 10) {
|
|
e.target.dispatchEvent(new TapEvent(end_event));
|
|
e.preventDefault();
|
|
e.target.dispatchEvent(TouchEvent2MouseEvent('click', end_event));
|
|
}
|
|
};
|
|
|
|
element.addEventListener('touchstart', start, true);
|
|
element.addEventListener('touchmove', move, true);
|
|
element.addEventListener('touchend', end, true);
|
|
|
|
return function event_clearer() {
|
|
element.removeEventListener('touchstart', start, true);
|
|
element.removeEventListener('touchmove', move, true);
|
|
element.removeEventListener('touchend', end, true);
|
|
};
|
|
}
|
|
|
|
function add_doubletap_event_hook(element) {
|
|
let start_time = 0;
|
|
const doubletap_judge = e => {
|
|
if (Date.now() - start_time <= 250) {
|
|
start_time = 0;
|
|
e.target.dispatchEvent(new DoubleTapEvent(e));
|
|
} else {
|
|
start_time = Date.now();
|
|
}
|
|
};
|
|
|
|
element.addEventListener('tap', doubletap_judge, true);
|
|
|
|
return function event_clearer() {
|
|
element.removeEventListener('tap', doubletap_judge, true);
|
|
};
|
|
}
|
|
|
|
/* add custom event end */
|
|
|
|
function create_prompt_panel() {
|
|
const prompt_div = document.createElement('div');
|
|
const prompt_symbol_div = document.createElement('div');
|
|
const prompt_time_div = document.createElement('div');
|
|
const prompt_time_begin_span = document.createElement('span');
|
|
const prompt_time_end_span = document.createElement('span');
|
|
|
|
prompt_div.append(prompt_symbol_div, prompt_time_div);
|
|
prompt_time_div.append(prompt_time_begin_span, ' / ', prompt_time_end_span);
|
|
|
|
prompt_div.style.cssText = `
|
|
width: 10em;
|
|
position: absolute;
|
|
z-index: 99999999;
|
|
left: 50%;
|
|
top: 50%;
|
|
padding: 15px 0px;
|
|
margin: calc(-0.5em - 15px) auto auto -5em;
|
|
background-color: rgba(51, 51, 51, 0.8);
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
font-size: 0.5cm;
|
|
color: white;
|
|
display: none;
|
|
`;
|
|
prompt_time_begin_span.style.color = '#2fb3ff';
|
|
|
|
return {
|
|
div: prompt_div,
|
|
symbol: prompt_symbol_div,
|
|
left_time: prompt_time_begin_span,
|
|
right_time: prompt_time_end_span,
|
|
};
|
|
}
|
|
|
|
function create_control_panel() {
|
|
const div = document.createElement('div');
|
|
const content_divs = Array(5).fill().map(() => document.createElement('div'));
|
|
div.append.apply(div, content_divs);
|
|
|
|
div.style.cssText = `
|
|
width: 50%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
z-index: 9999999999;
|
|
top: 0;
|
|
left: 30%;
|
|
background-color: rgba(51, 51, 51, 0.8);
|
|
color: white;
|
|
box-sizing: border-box;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1cm;
|
|
pointer-events: auto;
|
|
`;
|
|
|
|
return {
|
|
display() {
|
|
div.style.display = 'flex';
|
|
},
|
|
hidden() {
|
|
div.style.display = 'none';
|
|
},
|
|
toggle() {
|
|
if (div.style.display === 'flex') {
|
|
this.hidden();
|
|
} else {
|
|
this.display();
|
|
}
|
|
},
|
|
div,
|
|
content_divs,
|
|
};
|
|
}
|
|
|
|
const get_video_touch_hook = (video, e) => {
|
|
let top_wrap = find_top_wrap_ele(video);
|
|
if (top_wrap === video) {
|
|
top_wrap = document.createElement('div');
|
|
video.parentElement.insertBefore(top_wrap, video);
|
|
top_wrap.append(video);
|
|
}
|
|
|
|
const event_clearer = [add_tap_event_hook, add_doubletap_event_hook].map(x => x(top_wrap));
|
|
|
|
const hook_fn = {
|
|
start: [],
|
|
move: [],
|
|
end: [],
|
|
};
|
|
|
|
let start_x, start_time;
|
|
const touch_start = e => {
|
|
start_x = e.touches[0].screenX;
|
|
start_time = video.currentTime;
|
|
|
|
hook_fn.start.forEach(fn => fn(e, start_time));
|
|
//window.playbackRate = video.playbackRate;
|
|
//video.playbackRate = 4.0;
|
|
};
|
|
if (e) {
|
|
setTimeout(touch_start, 0, e);
|
|
}
|
|
|
|
const touch_move = e => {
|
|
const end_x = e.touches[0].screenX;
|
|
const x_distance_px = end_x - start_x;
|
|
const time_length = px2cm(x_distance_px) * (this.sec_1cm || 1);
|
|
|
|
hook_fn.move.forEach(fn => fn(e, start_time, x_distance_px, time_length));
|
|
fullscreen2Element(top_wrap);
|
|
};
|
|
|
|
const touch_end = e => {
|
|
hook_fn.end.forEach(fn => fn(e));
|
|
/*
|
|
video.playbackRate = window.playbackRate;
|
|
const end_x = e.changedTouches[0].pageX;
|
|
if(!(end_x - start_x === 0 ))
|
|
fullscreen2Element(top_wrap);
|
|
*/
|
|
};
|
|
|
|
top_wrap.addEventListener('touchstart', touch_start, { passive: false });
|
|
top_wrap.addEventListener('touchmove', touch_move, { passive: false });
|
|
top_wrap.addEventListener('touchend', touch_end, { passive: false });
|
|
|
|
const remove_hook = () => {
|
|
top_wrap.removeEventListener('touchstart', touch_start);
|
|
top_wrap.removeEventListener('touchmove', touch_move);
|
|
top_wrap.removeEventListener('touchend', touch_end);
|
|
};
|
|
|
|
return { video, hook_fn, wrap: top_wrap, event_clearer: event_clearer.concat(remove_hook) };
|
|
};
|
|
|
|
const hook_video_move = hook => {
|
|
const {video, hook_fn} = hook;
|
|
|
|
hook_fn.start.push(() => {
|
|
paused = video.paused;
|
|
});
|
|
|
|
let playing;
|
|
const pause = () => {
|
|
if (!video.paused) {
|
|
video.pause();
|
|
playing = true;
|
|
}
|
|
};
|
|
const play = debounce(() => {
|
|
if (playing) {
|
|
video.play();
|
|
playing = false;
|
|
}
|
|
}, 100);
|
|
|
|
hook_fn.move.push((e, start_time, x_distance_px, time_length) => {
|
|
pause();
|
|
video.currentTime = Math.max(Math.min(start_time + time_length,
|
|
video.duration),
|
|
0);
|
|
play();
|
|
});
|
|
};
|
|
|
|
const hook_video_time_change = hook => {
|
|
const {video, hook_fn, event_clearer} = hook;
|
|
const top_wrap = find_top_wrap_ele(video);
|
|
const video_prompt = create_prompt_panel();
|
|
top_wrap.append(video_prompt.div);
|
|
|
|
event_clearer.push(() => video_prompt.div.remove());
|
|
|
|
hook_fn.start.push(() => {
|
|
video_prompt.right_time.innerText = sec2HHMMSS(video.duration);
|
|
});
|
|
|
|
hook_fn.move.push((e, start_time, x_distance_px, time_length) => {
|
|
video_prompt.div.style.display = 'block';
|
|
time_length = video.currentTime - start_time;
|
|
video_prompt.symbol.innerText = time_length < 0 ? '-' : '+';
|
|
video_prompt.symbol.innerText += sec2HHMMSS(Math.abs(time_length));
|
|
video_prompt.left_time.innerText = sec2HHMMSS(video.currentTime);
|
|
});
|
|
|
|
hook_fn.end.push(() => {
|
|
video_prompt.div.style.display = 'none';
|
|
});
|
|
};
|
|
|
|
const hook_video_control = hook => {
|
|
const {video, hook_fn, event_clearer} = hook;
|
|
const top_wrap = find_top_wrap_ele(video);
|
|
const wrap = document.createElement('div');
|
|
const paddle_div = document.createElement('div');
|
|
const speed_div = document.createElement('div');
|
|
const jump_div = document.createElement('div');
|
|
const skip_div = document.createElement('div');
|
|
const fullscreen_div = document.createElement('div');
|
|
const control = create_control_panel();
|
|
|
|
top_wrap.append(wrap);
|
|
const buttons = [paddle_div, speed_div, jump_div, skip_div, fullscreen_div];
|
|
wrap.append.apply(wrap, buttons);
|
|
wrap.append(control.div);
|
|
|
|
wrap.style.cssText = `
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
pointer-events: none;
|
|
z-index: 9999999999;
|
|
display: none;
|
|
`;
|
|
|
|
const update_wrap_size = () => {
|
|
wrap.style.fontSize = `${Math.min(video.clientHeight, video.clientWidth) / buttons.length / 4}px`;
|
|
};
|
|
|
|
update_wrap_size();
|
|
|
|
buttons.forEach(div => div.style.cssText =
|
|
`
|
|
width: 3em;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
text-align: center;
|
|
border: solid white;
|
|
border-radius: 100%;
|
|
color: white;
|
|
pointer-events: auto;
|
|
`);
|
|
|
|
paddle_div.style.pointerEvents = 'none';
|
|
paddle_div.style.visibility = 'hidden';
|
|
|
|
const skip_video = throttle(e => {
|
|
video.currentTime = video.duration;
|
|
}, 500);
|
|
const toggle_play_state = throttle(e => {
|
|
if (video.paused) {
|
|
video.play();
|
|
} else {
|
|
video.pause();
|
|
}
|
|
}, 500);
|
|
const toggle_fullscreen = throttle(e => {
|
|
if (document.fullscreen) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
top_wrap.requestFullscreen();
|
|
}
|
|
}, 500);
|
|
|
|
const update_button = () => {
|
|
speed_div.innerText = video.playbackRate + 'x';
|
|
jump_div.innerText = sec2HHMMSS(video.currentTime);
|
|
};
|
|
const hidden_wrap = () => {
|
|
control.hidden();
|
|
wrap.style.display = 'none';
|
|
wrap.style.pointerEvents = 'none';
|
|
};
|
|
|
|
const hidden_wrap_delay = debounce(hidden_wrap, 3000);
|
|
|
|
const display_wrap = throttle((e) => {
|
|
update_wrap_size();
|
|
wrap.style.display = 'block';
|
|
update_button();
|
|
hidden_wrap_delay();
|
|
}, 1000);
|
|
|
|
const prevent_event = e => {
|
|
if (e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
e.stopImmediatePropagation();
|
|
};
|
|
|
|
skip_div.innerText = 'skip';
|
|
fullscreen_div.innerText = 'FS';
|
|
|
|
skip_div.addEventListener('tap', skip_video);
|
|
fullscreen_div.addEventListener('tap', toggle_fullscreen);
|
|
|
|
wrap.addEventListener('touchend', prevent_event);
|
|
|
|
wrap.addEventListener('touchmove', e => {
|
|
prevent_event(e);
|
|
update_button();
|
|
hidden_wrap_delay();
|
|
});
|
|
|
|
top_wrap.addEventListener('tap', display_wrap);
|
|
top_wrap.addEventListener('doubletap', toggle_play_state);
|
|
|
|
event_clearer.push(() => {
|
|
top_wrap.removeEventListener('tap', display_wrap);
|
|
top_wrap.removeEventListener('doubletap', toggle_play_state);
|
|
wrap.remove();
|
|
});
|
|
|
|
function speed_activate() {
|
|
video.playbackRate = parseFloat(control.div.innerText.replace(/[\r\n]+/g, ''));
|
|
update_button();
|
|
hidden_wrap();
|
|
}
|
|
|
|
function jump_activate() {
|
|
video.currentTime = HHMMSS2sec(control.div.innerText.replace(/[\r\n]+/g, ''));
|
|
update_button();
|
|
hidden_wrap();
|
|
}
|
|
|
|
function clear_content() {
|
|
control.content_divs.forEach(div => div.innerHTML = '');
|
|
}
|
|
|
|
const set_content_tap_fn = (() => {
|
|
let bind_fn = [];
|
|
return fn => {
|
|
bind_fn.forEach(([div, fn]) => div.removeEventListener('tap', fn));
|
|
bind_fn = [];
|
|
control.content_divs.forEach(div => {
|
|
bind_fn.push([div, fn]);
|
|
div.addEventListener('tap', fn);
|
|
});
|
|
};
|
|
})();
|
|
|
|
let state = [];
|
|
function set_state() {
|
|
control.content_divs.forEach((div, i) => state[i] = div.innerText);
|
|
}
|
|
|
|
let start_y, modifier;
|
|
const start = e => {
|
|
start_y = e.touches[0].screenY;
|
|
set_state();
|
|
};
|
|
const move = e => {
|
|
const end_y = e.touches[0].screenY;
|
|
const y_distance_px = start_y - end_y;
|
|
const increase = Math.floor(px2cm(y_distance_px) * (this.increase_1cm || 1));
|
|
const idx = Array.from(e.target.parentElement.children).indexOf(e.target);
|
|
if (modifier[idx]) {
|
|
modifier[idx](increase);
|
|
}
|
|
};
|
|
|
|
const increase_helper = (state_idx, increase,
|
|
limit, pre_ele_modifier, wrap = x => x) => {
|
|
const v = parseFloat(state[state_idx]) + increase;
|
|
if (limit !== undefined) {
|
|
if (pre_ele_modifier) {
|
|
if (v >= limit) {
|
|
pre_ele_modifier(Math.floor(v / limit));
|
|
control.content_divs[state_idx].innerText = wrap(v % limit);
|
|
} else if (v < 0) {
|
|
pre_ele_modifier(-1);
|
|
control.content_divs[state_idx].innerText = wrap(limit + v);
|
|
} else {
|
|
control.content_divs[state_idx].innerText = wrap(v);
|
|
}
|
|
} else {
|
|
control.content_divs[state_idx].innerText =
|
|
wrap(Math.min(Math.max(v, 0), limit));
|
|
}
|
|
} else {
|
|
control.content_divs[state_idx].innerText = wrap(v);
|
|
}
|
|
};
|
|
|
|
const speed_modifier = [];
|
|
speed_modifier[0] = (increase) => {
|
|
increase_helper(0, increase);
|
|
};
|
|
speed_modifier[2] = (increase) => {
|
|
increase_helper(2, increase, 10, speed_modifier[0]);
|
|
};
|
|
speed_modifier[3] = (increase) => {
|
|
increase_helper(3, increase, 10, speed_modifier[2]);
|
|
};
|
|
|
|
|
|
const jump_modifier = [];
|
|
jump_modifier[0] = (increase) => {
|
|
increase_helper(0, increase, undefined, undefined, zero_padding);
|
|
};
|
|
jump_modifier[2] = (increase) => {
|
|
increase_helper(2, increase, 60, jump_modifier[0], zero_padding);
|
|
};
|
|
jump_modifier[4] = (increase) => {
|
|
increase_helper(4, increase, 60, jump_modifier[2], zero_padding);
|
|
};
|
|
|
|
speed_div.addEventListener('tap', throttle(e => {
|
|
e.stopImmediatePropagation();
|
|
clear_content();
|
|
|
|
if(window.playbackRate>=4.0) window.playbackRate=0.5;
|
|
else if(window.playbackRate<1.0) window.playbackRate=1.0;
|
|
else if(window.playbackRate<1.5) window.playbackRate=1.5;
|
|
else if(window.playbackRate>=2.0) window.playbackRate=4;
|
|
else window.playbackRate = 2.0;
|
|
|
|
const split = window.playbackRate.toString().split('.');
|
|
control.content_divs[0].innerText = split[0];
|
|
control.content_divs[1].innerText = '.';
|
|
control.content_divs[2].innerText = (split[1] || '00').split('')[0] || 0;
|
|
control.content_divs[3].innerText = (split[1] || '00').split('')[1] || 0;
|
|
control.content_divs[4].innerText = 'x';
|
|
modifier = speed_modifier;
|
|
set_content_tap_fn(speed_activate);
|
|
control.display();
|
|
wrap.style.pointerEvents = 'auto';
|
|
}, 500));
|
|
|
|
jump_div.addEventListener('tap', throttle(e => {
|
|
e.stopImmediatePropagation();
|
|
clear_content();
|
|
|
|
if(control.div.style.display === 'none'||!window.playbackPos)
|
|
window.playbackPos = video.currentTime;
|
|
window.playbackPos += 180;
|
|
|
|
const time = sec2HHMMSS(window.playbackPos);
|
|
const split = time.split(':');
|
|
if (split.length < 3) {
|
|
split.unshift('00');
|
|
}
|
|
control.content_divs[0].innerText = split[0];
|
|
control.content_divs[1].innerText = ':';
|
|
control.content_divs[2].innerText = split[1];
|
|
control.content_divs[3].innerText = ':';
|
|
control.content_divs[4].innerText = split[2];
|
|
modifier = jump_modifier;
|
|
set_content_tap_fn(jump_activate);
|
|
control.display();
|
|
wrap.style.pointerEvents = 'auto';
|
|
}, 500));
|
|
|
|
control.content_divs.forEach(div => {
|
|
div.addEventListener('touchstart', start, { passive: false });
|
|
div.addEventListener('touchmove', move, { passive: false });
|
|
});
|
|
};
|
|
|
|
function find_hook(video) {
|
|
window.__hook_video__ = window.__hook_video__ || [];
|
|
const exist_video = window.__hook_video__.find(v => v.video === video);
|
|
return exist_video;
|
|
}
|
|
|
|
function register_hook(hook) {
|
|
if (!find_hook(hook.video)) {
|
|
window.__hook_video__.push(hook);
|
|
return hook;
|
|
}
|
|
}
|
|
|
|
const hook_video = (video) => {
|
|
const exist_video = find_hook(video);
|
|
if (video.clientWidth && video.clientHeight &&
|
|
(!exist_video || is_parent(exist_video.wrap, find_top_wrap_ele(video)))) {
|
|
const hook = get_video_touch_hook(video);
|
|
hook_video_move(hook);
|
|
hook_video_time_change(hook);
|
|
hook_video_control(hook);
|
|
|
|
if (exist_video) {
|
|
exist_video.event_clearer.forEach(x => x());
|
|
Object.assign(exist_video, hook);
|
|
console.log('video-improve: reloaded for ', video, ', wrapped by ', find_top_wrap_ele(video));
|
|
} else {
|
|
register_hook(hook);
|
|
console.log('video-improve: loaded for ', video, ', wrapped by ', find_top_wrap_ele(video));
|
|
}
|
|
}
|
|
};
|
|
|
|
let videos;
|
|
if (document.fullscreen) {
|
|
videos = document.fullscreenElement.querySelectorAll('video');
|
|
}else {
|
|
function get_frames(window) {
|
|
const frames = [window];
|
|
for (let i = 0; i < window.frames.length; i++) {
|
|
try {
|
|
window.frames[i].document;
|
|
} catch {
|
|
continue;
|
|
}
|
|
|
|
frames.push(...get_frames(window.frames[i]))
|
|
}
|
|
return frames;
|
|
}
|
|
|
|
function flatten(array) {
|
|
if (!Array.isArray(array)) {
|
|
return [array];
|
|
} else if (array.length == 0) {
|
|
return [];
|
|
} else {
|
|
return flatten(array[0]).concat(flatten(array.slice(1)));
|
|
}
|
|
}
|
|
|
|
function get_videos() {
|
|
const frames = get_frames(window);
|
|
const frame_video = frame => Array.from(frame.document.querySelectorAll('video'));
|
|
const shadow = frame => Array.from(frame.document.querySelectorAll("shadow-output"));
|
|
const shadow_video = shadow => Array.from(shadow.shadowRoot.querySelectorAll("video"));
|
|
return flatten(frames.map(frame_video)
|
|
.concat(frames.map(f => shadow(f).map(shadow_video))));
|
|
}
|
|
videos = get_videos();
|
|
}
|
|
|
|
videos.forEach(hook_video);
|
|
};
|
|
}
|
|
window.__videoplayer_enhancer__();
|