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));
};
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));
};

const touch_end = e => {
hook_fn.end.forEach(fn => fn(e));
};

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));