103 lines
4.5 KiB
HTML
103 lines
4.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Youtube RemoteControl</title>
|
||
|
|
<script src="js/element.js"></script>
|
||
|
|
<script src="js/youtube.js"></script>
|
||
|
|
<script src="js/video.js"></script>
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||
|
|
<link rel="stylesheet" href="css/dialog.css">
|
||
|
|
<link rel="stylesheet" href="css/main.css">
|
||
|
|
<link rel="stylesheet" href="css/video.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<template id="video-template">
|
||
|
|
<div class="video-item">
|
||
|
|
<img class="video-image" src="">
|
||
|
|
<span class="video-close material-symbols-outlined">close</span>
|
||
|
|
<div class="video-bottom">
|
||
|
|
<p class="video-title"></p>
|
||
|
|
<div class="video-progress">
|
||
|
|
<div class="primary"></div>
|
||
|
|
<div class="secondary"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<dialog id="display-select-dialog">
|
||
|
|
<div class="header">
|
||
|
|
<h1>Select Active Display</h1>
|
||
|
|
<span onClick="onCloseSelectDisplayDialogClicked()" class="close material-symbols-outlined">close</span>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
<form id="display-select-dialog-form"></form>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
<dialog id="audio-sink-select-dialog">
|
||
|
|
<div class="header">
|
||
|
|
<h1>Select Active Audio Sink</h1>
|
||
|
|
<span onClick="onCloseSelectAudioSinkDialogClicked()" class="close material-symbols-outlined">close</span>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
<form id="audio-sink-select-dialog-form"></form>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
<dialog id="open-new-video-dialog">
|
||
|
|
<div class="header">
|
||
|
|
<h1>Open New Video</h1>
|
||
|
|
<span onClick="onCloseOpenNewVideoDialogClicked()" class="close material-symbols-outlined">close</span>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
<form id="open-new-video-dialog-form">
|
||
|
|
<input name="link" id="open-new-video-dialog-link" type="url" placeholder="URL"></input>
|
||
|
|
<button onClick="onOpenVideoInBackgroundButtonClicked()" type="button">Open video in background</button>
|
||
|
|
<button onClick="onOpenVideoButtonClicked()" type="button">Open video</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
<dialog id="close-video-dialog">
|
||
|
|
<div class="header">
|
||
|
|
<h1>Close Video</h1>
|
||
|
|
<span onClick="onCloseCloseVideoDialogClicked()" class="close material-symbols-outlined">close</span>
|
||
|
|
</div>
|
||
|
|
<div class="body">
|
||
|
|
<form id="close-video-dialog-form">
|
||
|
|
<p>Do you want to close the following video?</p>
|
||
|
|
<p id="close-video-dialog-title"></p>
|
||
|
|
<button onClick="onCloseVideoButtonClicked()" type="button">Close</button>
|
||
|
|
<button onClick="onCancelCloseVideoButtonClicked()" type="button">Cancel</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</dialog>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<span onClick="onShowSelectDisplayDialogClicked()" class="material-symbols-outlined">tv_displays</span>
|
||
|
|
<span onClick="onShowSelectAudioSinkDialogClicked()" class="material-symbols-outlined">speaker_group</span>
|
||
|
|
<span onClick="onShowOpenNewVideoDialogClicked()" class="material-symbols-outlined">open_in_new</span>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div id="video-container"></div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p id="current-timestamp"></p>
|
||
|
|
<input type="range" min="0" max="100" value="0" class="slider" id="seekbar">
|
||
|
|
<p id="video-length"></p>
|
||
|
|
<button id="replay" type="button"><span class="material-symbols-outlined">replay_10</span></button>
|
||
|
|
<button id="play-pause" type="button"><span class="material-symbols-outlined">play_circle</span></button>
|
||
|
|
<button id="forward" type="button"><span class="material-symbols-outlined">forward_10</span></button>
|
||
|
|
<input type="range" min="0" max="100" value="0" step="5" class="slider" id="volume-bar">
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|