initial commit
This commit is contained in:
commit
18078d1d3b
34
api.go
Normal file
34
api.go
Normal file
@ -0,0 +1,34 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"io"
|
||||
"net/http"
|
||||
"net/url"
|
||||
|
||||
"git.milar.in/milarin/adverr"
|
||||
"git.milar.in/milarin/ezhttp"
|
||||
)
|
||||
|
||||
var BaseURL = adverr.Must(url.Parse("http://desktop:30124"))
|
||||
|
||||
func ProxyRequest(w http.ResponseWriter, r *http.Request) {
|
||||
req := ezhttp.Request(
|
||||
ezhttp.Method(r.Method),
|
||||
ezhttp.URL(BaseURL.JoinPath(r.URL.Path).String()),
|
||||
ezhttp.Body(ezhttp.Reader(r.Body)),
|
||||
ezhttp.ContentType("application/json"),
|
||||
)
|
||||
|
||||
resp, err := ezhttp.Do(req)
|
||||
if err != nil {
|
||||
fmt.Println(err)
|
||||
w.WriteHeader(http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
defer resp.Body.Close()
|
||||
|
||||
w.WriteHeader(resp.StatusCode)
|
||||
w.Header().Add("Content-Type", "application/json")
|
||||
io.Copy(w, resp.Body)
|
||||
}
|
||||
8
go.mod
Normal file
8
go.mod
Normal file
@ -0,0 +1,8 @@
|
||||
module git.milar.in/milarin/yt-remote-control
|
||||
|
||||
go 1.23.1
|
||||
|
||||
require (
|
||||
git.milar.in/milarin/adverr v1.1.1
|
||||
git.milar.in/milarin/ezhttp v0.0.2
|
||||
)
|
||||
4
go.sum
Normal file
4
go.sum
Normal file
@ -0,0 +1,4 @@
|
||||
git.milar.in/milarin/adverr v1.1.1 h1:ENtBcqT7CncLsVfaLC3KzX8QSSGiSpsC7I7wDqladu8=
|
||||
git.milar.in/milarin/adverr v1.1.1/go.mod h1:joU9sBb7ySyNv4SpTXB0Z4o1mjXsArBw4N27wjgzj9E=
|
||||
git.milar.in/milarin/ezhttp v0.0.2 h1:9aVBd3AW6XAqWLPDrWrJr2r4JFa21n/B1MpAVN80opU=
|
||||
git.milar.in/milarin/ezhttp v0.0.2/go.mod h1:7v6RMtAvImUllDDsYGVP4C0BhO1yxLarVorttRGGyJ0=
|
||||
32
main.go
Normal file
32
main.go
Normal file
@ -0,0 +1,32 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
_ "embed"
|
||||
"flag"
|
||||
"fmt"
|
||||
"io/fs"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
//go:embed static
|
||||
var StaticFilesDir embed.FS
|
||||
|
||||
var ( // flags
|
||||
FlagInterface = flag.String("i", "", "network interface")
|
||||
FlagPort = flag.Uint("p", 8080, "network port")
|
||||
)
|
||||
|
||||
func main() {
|
||||
flag.Parse()
|
||||
|
||||
staticFiles, err := fs.Sub(StaticFilesDir, "static")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
|
||||
http.Handle("/api/", http.StripPrefix("/api", http.HandlerFunc(ProxyRequest)))
|
||||
http.Handle("/", http.FileServer(http.FS(staticFiles)))
|
||||
|
||||
http.ListenAndServe(fmt.Sprintf("%s:%d", *FlagInterface, *FlagPort), nil)
|
||||
}
|
||||
117
static/css/dialog.css
Normal file
117
static/css/dialog.css
Normal file
@ -0,0 +1,117 @@
|
||||
dialog {
|
||||
margin: auto;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
dialog .header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
dialog .header h1 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
dialog .header span.close {
|
||||
font-size: 2rem;
|
||||
margin-left: 0.5em;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
dialog .header span.close:hover {
|
||||
transform: scale(1.2);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
dialog .body form {
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
dialog .body form input[type="radio"],
|
||||
dialog .body form input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
dialog .body form label {
|
||||
padding: 0.75em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
dialog .body form input[type="radio"]:checked + label {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
dialog .body form input[type="url"] {
|
||||
background-color: #111;
|
||||
color: white;
|
||||
padding: 0.75em;
|
||||
border: 1px solid #333;
|
||||
margin-bottom: 1em;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
dialog .body form input[type="url"]:focus {
|
||||
border: 1px solid #555;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
dialog .body form button {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
padding: 0.75em;
|
||||
font-size: 1rem;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
dialog .body form button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
dialog:not([open]) {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
/* var(--video-card-width) * 2 + var(--video-card-gap) * 3 */
|
||||
@media (max-width: 51.5em) {
|
||||
dialog {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
/* dialog-specific rules */
|
||||
|
||||
#close-video-dialog {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
#close-video-dialog .body p {
|
||||
text-align: center;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
#close-video-dialog-title {
|
||||
background-color: #111;
|
||||
border: 1px solid #333;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
173
static/css/main.css
Normal file
173
static/css/main.css
Normal file
@ -0,0 +1,173 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
/*
|
||||
when changing these values,
|
||||
both media queries in dialog.css and video.css
|
||||
should be changed accordingly as well.
|
||||
*/
|
||||
--video-card-width: 25em;
|
||||
--video-card-gap: 0.5em;
|
||||
|
||||
--header-height: 3em;
|
||||
--footer-height: 6em;
|
||||
--footer-padding: 0.5em;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #111;
|
||||
font-size: 100%;
|
||||
display: block;
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
}
|
||||
|
||||
header {
|
||||
display: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(200, 55, 55, 0.9);
|
||||
box-shadow: 0 0 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(5px);
|
||||
color: white;
|
||||
height: var(--header-height);
|
||||
padding: 0 0.25em;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
header span.material-symbols-outlined {
|
||||
font-size: 2em;
|
||||
line-height: 3rem;
|
||||
float: right;
|
||||
padding: 0 0.25em;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
header span.material-symbols-outlined:hover {
|
||||
transform: scale(1.2);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
margin-top: var(--header-height);
|
||||
margin-bottom: calc(var(--footer-height) + var(--footer-padding) * 2);
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto auto auto 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"current-timestamp seekbar seekbar seekbar seekbar seekbar video-length"
|
||||
". . replay pause forward volume-bar volume-bar";
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(17, 17, 17, 0.95);
|
||||
box-shadow: 0 0 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: var(--footer-padding);
|
||||
z-index: 11;
|
||||
height: var(--footer-height);
|
||||
}
|
||||
|
||||
#seekbar {
|
||||
--margin: 0.75em;
|
||||
grid-area: seekbar;
|
||||
align-self: center;
|
||||
width: calc(100% - var(--margin) * 2);
|
||||
margin: 0.5em var(--margin);
|
||||
}
|
||||
|
||||
#replay {
|
||||
grid-area: replay;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#play-pause {
|
||||
grid-area: pause;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin: 0 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#forward {
|
||||
grid-area: forward;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#volume-bar {
|
||||
--margin: 0.75em;
|
||||
grid-area: volume-bar;
|
||||
max-width: 15em;
|
||||
width: calc(100% - var(--margin) * 2);
|
||||
margin: 0 var(--margin);
|
||||
justify-self: right;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#play-pause .material-symbols-outlined {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
#play-pause:disabled,
|
||||
#replay:disabled,
|
||||
#forward:disabled {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#current-timestamp {
|
||||
grid-area: current-timestamp;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#video-length {
|
||||
grid-area: video-length;
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer .material-symbols-outlined {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
height: 0.5em;
|
||||
background-color: #333;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb,
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(200, 55, 55);
|
||||
border: none;
|
||||
}
|
||||
87
static/css/video.css
Normal file
87
static/css/video.css
Normal file
@ -0,0 +1,87 @@
|
||||
#video-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--video-card-gap);
|
||||
padding: var(--video-card-gap);
|
||||
}
|
||||
|
||||
.video-item {
|
||||
width: var(--video-card-width);
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-image:not(.shown-on-display) {
|
||||
filter: brightness(50%);
|
||||
}
|
||||
|
||||
.video-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
user-select: none;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.video-progress {
|
||||
height: 3px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-progress .primary {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
background-color: #ee1111;
|
||||
}
|
||||
|
||||
.video-progress .secondary {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: #994444;
|
||||
}
|
||||
|
||||
.video-close {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 1.75rem;
|
||||
padding: 0.1em;
|
||||
text-shadow: 0px 0px 0.5em black;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.video-close:hover {
|
||||
transform: scale(1.2);
|
||||
text-shadow: 0px 0px 0.25em black;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
/* var(--video-card-width) * 2 + var(--video-card-gap) * 3 */
|
||||
@media (max-width: 51.5em) {
|
||||
.video-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
102
static/index.html
Normal file
102
static/index.html
Normal file
@ -0,0 +1,102 @@
|
||||
<!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>
|
||||
48
static/js/element.js
Normal file
48
static/js/element.js
Normal file
@ -0,0 +1,48 @@
|
||||
Element.prototype.insertChildAtIndex = function(child, index) {
|
||||
if (!index) index = 0;
|
||||
|
||||
if (index >= this.children.length) {
|
||||
this.appendChild(child);
|
||||
} else {
|
||||
this.insertBefore(child, this.children[index]);
|
||||
}
|
||||
}
|
||||
|
||||
Element.prototype.clearChildren = function() {
|
||||
while (this.firstChild) {
|
||||
this.removeChild(this.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
Number.prototype.pad = function(size) {
|
||||
var s = String(this);
|
||||
while (s.length < (size || 2)) {s = "0" + s;}
|
||||
return s;
|
||||
}
|
||||
|
||||
window.addEventListener("load", init);
|
||||
|
||||
function init() {
|
||||
const sliders = document.querySelectorAll('input[type="range"]');
|
||||
for (let slider of sliders) {
|
||||
let changeFunction = event => {
|
||||
const progress = event.target.value;
|
||||
const max = event.target.max;
|
||||
const value = Math.round(progress / max * 100);
|
||||
slider.style.background = `linear-gradient(90deg, rgba(200,55,55,1) ${value}%, #333 ${value}%)`;
|
||||
};
|
||||
|
||||
slider.setValue = value => {
|
||||
if (slider.mousedown) return;
|
||||
slider.value = value;
|
||||
changeFunction({target: slider});
|
||||
}
|
||||
|
||||
slider.addEventListener("mousedown", event => slider.mousedown = true);
|
||||
slider.addEventListener("mouseup", event => slider.mousedown = false);
|
||||
|
||||
slider.addEventListener("input", changeFunction);
|
||||
slider.addEventListener("change", changeFunction);
|
||||
changeFunction({target: slider});
|
||||
}
|
||||
}
|
||||
270
static/js/main.js
Normal file
270
static/js/main.js
Normal file
@ -0,0 +1,270 @@
|
||||
window.addEventListener("load", main);
|
||||
|
||||
let displaySelectDialog;
|
||||
let audioSinkSelectDialog;
|
||||
let openNewVideoDialog;
|
||||
let closeVideoDialog;
|
||||
|
||||
let closeVideoDialogID;
|
||||
|
||||
let videoTemplate;
|
||||
let videoContainer;
|
||||
let currentVideos = [];
|
||||
let currentVideoData;
|
||||
|
||||
let seekbar;
|
||||
let volumeBar;
|
||||
let playPauseButton;
|
||||
let playPauseButtonIcon;
|
||||
let replayButton;
|
||||
let forwardButton;
|
||||
let currentTimestamp;
|
||||
let videoLength;
|
||||
|
||||
async function main() {
|
||||
displaySelectDialog = document.querySelector("#display-select-dialog");
|
||||
audioSinkSelectDialog = document.querySelector("#audio-sink-select-dialog");
|
||||
openNewVideoDialog = document.querySelector("#open-new-video-dialog");
|
||||
closeVideoDialog = document.querySelector("#close-video-dialog");
|
||||
|
||||
videoTemplate = document.querySelector("#video-template");
|
||||
videoContainer = document.querySelector("#video-container");
|
||||
|
||||
seekbar = document.querySelector("#seekbar");
|
||||
volumeBar = document.querySelector("#volume-bar");
|
||||
playPauseButton = document.querySelector("#play-pause");
|
||||
playPauseButtonIcon = playPauseButton.querySelector(".material-symbols-outlined");
|
||||
replayButton = document.querySelector("#replay");
|
||||
forwardButton = document.querySelector("#forward");
|
||||
currentTimestamp = document.querySelector("#current-timestamp");
|
||||
videoLength = document.querySelector("#video-length");
|
||||
|
||||
playPauseButton.addEventListener("click", onPlayPauseButtonClicked);
|
||||
replayButton.addEventListener("click", onReplayButtonClicked);
|
||||
forwardButton.addEventListener("click", onForwardButtonClicked);
|
||||
seekbar.addEventListener("change", onSeekbarChanged);
|
||||
volumeBar.addEventListener("input", onVolumeBarChanged);
|
||||
|
||||
updateUI();
|
||||
setInterval(updateUI, 1000);
|
||||
}
|
||||
|
||||
async function updateUI() {
|
||||
const videoDatas = await listVideos();
|
||||
const currentDisplay = localStorage.getItem("display");
|
||||
currentVideoData = videoDatas.find(videoData => videoData.display == currentDisplay);
|
||||
|
||||
if (currentVideoData !== undefined) {
|
||||
console.log(currentVideoData);
|
||||
|
||||
seekbar.disabled = false;
|
||||
volumeBar.disabled = false;
|
||||
playPauseButton.disabled = false;
|
||||
replayButton.disabled = false;
|
||||
forwardButton.disabled = false;
|
||||
|
||||
const {progress, duration} = formatTimestamps(currentVideoData.progress, currentVideoData.duration);
|
||||
currentTimestamp.textContent = progress;
|
||||
videoLength.textContent = duration;
|
||||
seekbar.max = currentVideoData.duration;
|
||||
seekbar.setValue(currentVideoData.progress);
|
||||
volumeBar.setValue(currentVideoData.volume);
|
||||
playPauseButtonIcon.textContent = currentVideoData.paused ? "play_circle" : "pause_circle";
|
||||
} else {
|
||||
seekbar.disabled = true;
|
||||
seekbar.setValue(0);
|
||||
volumeBar.disabled = true;
|
||||
playPauseButton.disabled = true;
|
||||
playPauseButtonIcon.textContent = "play_circle";
|
||||
replayButton.disabled = true;
|
||||
forwardButton.disabled = true;
|
||||
currentTimestamp.textContent = "";
|
||||
videoLength.textContent = "";
|
||||
}
|
||||
|
||||
await refreshVideoList(videoDatas);
|
||||
}
|
||||
|
||||
async function refreshVideoList(videoDatas) {
|
||||
const videoIDs = videoDatas.map(videoData => videoData.id);
|
||||
const shownVideoIDs = currentVideos.map(video => video.videoID);
|
||||
const missingVideoIDs = videoIDs.filter(videoID => !shownVideoIDs.includes(videoID));
|
||||
const unneededVideoIDs = shownVideoIDs.filter(shownVideoID => !videoIDs.includes(shownVideoID));
|
||||
|
||||
for (let unneededVideoID of unneededVideoIDs) {
|
||||
const index = currentVideos.findIndex(video => video.videoID == unneededVideoID);
|
||||
const video = currentVideos[index];
|
||||
video.hide();
|
||||
currentVideos.splice(index, 1);
|
||||
}
|
||||
|
||||
for (let index in videoDatas) {
|
||||
const videoData = videoDatas[index];
|
||||
|
||||
if (missingVideoIDs.includes(videoData.id)) {
|
||||
const video = new Video(videoData);
|
||||
video.showAt(index);
|
||||
currentVideos.splice(index, 0, video);
|
||||
} else {
|
||||
const video = currentVideos.find(currentVideo => currentVideo.videoID == videoData.id);
|
||||
video.update(videoData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function onShowSelectDisplayDialogClicked() {
|
||||
const displays = await listDisplays();
|
||||
const currentDisplay = localStorage.getItem("display");
|
||||
|
||||
const displaySelectForm = document.querySelector("#display-select-dialog-form");
|
||||
displaySelectForm.clearChildren();
|
||||
|
||||
for (let display of displays) {
|
||||
const input = document.createElement("input");
|
||||
input.setAttribute("type", "radio");
|
||||
input.setAttribute("name", "display");
|
||||
input.setAttribute("id", `display_${display}`);
|
||||
input.setAttribute("value", display);
|
||||
input.addEventListener("change", onCloseSelectDisplayDialogClicked);
|
||||
if (display == currentDisplay) input.setAttribute("checked", "checked");
|
||||
displaySelectForm.appendChild(input);
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.setAttribute("for", `display_${display}`);
|
||||
label.textContent = display;
|
||||
displaySelectForm.appendChild(label);
|
||||
}
|
||||
|
||||
displaySelectDialog.showModal();
|
||||
}
|
||||
|
||||
function onCloseSelectDisplayDialogClicked() {
|
||||
const selectedDisplay = document.forms["display-select-dialog-form"].elements["display"].value;
|
||||
localStorage.setItem("display", selectedDisplay);
|
||||
setTimeout(() => displaySelectDialog.close(), 100);
|
||||
}
|
||||
|
||||
async function onShowSelectAudioSinkDialogClicked() {
|
||||
const audioSinks = await listAudioSinks();
|
||||
const currentAudioSink = localStorage.getItem("audio-sink");
|
||||
|
||||
const audioSinkSelectForm = document.querySelector("#audio-sink-select-dialog-form");
|
||||
audioSinkSelectForm.clearChildren();
|
||||
|
||||
for (let index in audioSinks) {
|
||||
const audioSink = audioSinks[index];
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.setAttribute("type", "radio");
|
||||
input.setAttribute("name", "audiosink");
|
||||
input.setAttribute("id", `audiosink_${index}`);
|
||||
input.setAttribute("value", audioSink.description);
|
||||
input.addEventListener("change", onCloseSelectAudioSinkDialogClicked);
|
||||
if (audioSink.name == currentAudioSink) input.setAttribute("checked", "checked");
|
||||
audioSinkSelectForm.appendChild(input);
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.setAttribute("for", `audiosink_${index}`);
|
||||
label.textContent = audioSink.description;
|
||||
audioSinkSelectForm.appendChild(label);
|
||||
}
|
||||
|
||||
audioSinkSelectDialog.showModal();
|
||||
}
|
||||
|
||||
function onCloseSelectAudioSinkDialogClicked() {
|
||||
const selectedAudioSink = document.forms["audio-sink-select-dialog-form"].elements["audiosink"].value;
|
||||
localStorage.setItem("audio-sink", selectedAudioSink);
|
||||
changeAudioSink(selectedAudioSink);
|
||||
setTimeout(() => audioSinkSelectDialog.close(), 100);
|
||||
}
|
||||
|
||||
function onShowOpenNewVideoDialogClicked() {
|
||||
const link = document.querySelector("#open-new-video-dialog-link");
|
||||
link.value = "";
|
||||
openNewVideoDialog.showModal();
|
||||
}
|
||||
|
||||
function onOpenVideoButtonClicked() {
|
||||
const link = document.forms["open-new-video-dialog-form"].elements["link"].value;
|
||||
openVideo(link);
|
||||
openNewVideoDialog.close();
|
||||
}
|
||||
|
||||
function onOpenVideoInBackgroundButtonClicked() {
|
||||
const link = document.forms["open-new-video-dialog-form"].elements["link"].value;
|
||||
openVideoInBackground(link);
|
||||
openNewVideoDialog.close();
|
||||
}
|
||||
|
||||
function onCloseOpenNewVideoDialogClicked() {
|
||||
openNewVideoDialog.close();
|
||||
}
|
||||
|
||||
function askForCloseVideoConfirmation(videoID, videoTitle) {
|
||||
const videoTitleElement = document.querySelector("#close-video-dialog-title");
|
||||
videoTitleElement.textContent = videoTitle;
|
||||
closeVideoDialogID = videoID;
|
||||
closeVideoDialog.showModal();
|
||||
}
|
||||
|
||||
function onCloseCloseVideoDialogClicked() {
|
||||
closeVideoDialog.close();
|
||||
}
|
||||
|
||||
function onCloseVideoButtonClicked() {
|
||||
closeVideo(closeVideoDialogID)
|
||||
closeVideoDialog.close();
|
||||
}
|
||||
|
||||
function onCancelCloseVideoButtonClicked() {
|
||||
closeVideoDialog.close();
|
||||
}
|
||||
|
||||
function formatTimestamps(progress, duration) {
|
||||
const progressHours = Math.floor(progress / 3600);
|
||||
const progressRemaining = progress % 3600;
|
||||
const progressMinutes = Math.floor(progressRemaining / 60);
|
||||
const progressSeconds = progressRemaining % 60;
|
||||
|
||||
const durationHours = Math.floor(duration / 3600);
|
||||
const durationRemaining = duration % 3600;
|
||||
const durationMinutes = Math.floor(durationRemaining / 60);
|
||||
const durationSeconds = durationRemaining % 60;
|
||||
|
||||
if (durationHours > 0) {
|
||||
return {
|
||||
progress: `${progressHours.pad(2)}:${progressMinutes.pad(2)}:${progressSeconds.pad(2)}`,
|
||||
duration: `${durationHours.pad(2)}:${durationMinutes.pad(2)}:${durationSeconds.pad(2)}`
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
progress: `${progressMinutes.pad(2)}:${progressSeconds.pad(2)}`,
|
||||
duration: `${durationMinutes.pad(2)}:${durationSeconds.pad(2)}`
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function onPlayPauseButtonClicked() {
|
||||
if (currentVideoData.paused) {
|
||||
unpauseVideo(currentVideoData.id);
|
||||
} else {
|
||||
pauseVideo(currentVideoData.id);
|
||||
}
|
||||
}
|
||||
|
||||
function onReplayButtonClicked() {
|
||||
seekVideoRelative(currentVideoData.id, -10);
|
||||
}
|
||||
|
||||
function onForwardButtonClicked() {
|
||||
seekVideoRelative(currentVideoData.id, 10);
|
||||
}
|
||||
|
||||
function onSeekbarChanged() {
|
||||
seekVideo(currentVideoData.id, parseInt(seekbar.value));
|
||||
}
|
||||
|
||||
function onVolumeBarChanged() {
|
||||
setVolume(parseFloat(volumeBar.value));
|
||||
}
|
||||
79
static/js/video.js
Normal file
79
static/js/video.js
Normal file
@ -0,0 +1,79 @@
|
||||
class Video {
|
||||
|
||||
constructor(videoData) {
|
||||
this.videoID = videoData.id;
|
||||
this.shown = false;
|
||||
|
||||
this.root = videoTemplate.content.cloneNode(true);
|
||||
this.item = this.root.querySelector(".video-item");
|
||||
this.closeButton = this.root.querySelector(".video-close");
|
||||
this.img = this.root.querySelector(".video-item .video-image");
|
||||
this.title = this.root.querySelector(".video-item .video-title");
|
||||
this.videoProgressPrimary = this.root.querySelector(".video-item .video-progress .primary");
|
||||
this.videoProgressSecondary = this.root.querySelector(".video-item .video-progress .secondary");
|
||||
|
||||
this.item.addEventListener("click", this.enable.bind(this));
|
||||
this.closeButton.addEventListener("click", this.close.bind(this));
|
||||
|
||||
this.update(videoData);
|
||||
}
|
||||
|
||||
enable() {
|
||||
const currentDisplay = localStorage.getItem("display");
|
||||
if (this.videoData.display != currentDisplay) {
|
||||
showVideo(this.videoID, currentDisplay);
|
||||
} else {
|
||||
hideVideo(this.videoID);
|
||||
}
|
||||
}
|
||||
|
||||
update(videoData) {
|
||||
if (videoData.id != this.videoID) {
|
||||
throw `tried to update video instance ${this.videoID} with data from video ${videoData.id}`;
|
||||
}
|
||||
|
||||
this.videoData = videoData;
|
||||
|
||||
const progressPercentage = videoData.progress / videoData.duration * 100;
|
||||
const bufferPercentage = videoData.buffered / videoData.duration * 100;
|
||||
|
||||
this.img.src = videoData.metadata.thumbnail;
|
||||
this.title.textContent = videoData.title;
|
||||
this.videoProgressPrimary.style.width = `${progressPercentage}%`;
|
||||
this.videoProgressSecondary.style.width = `${bufferPercentage}%`;
|
||||
|
||||
const currentDisplay = localStorage.getItem("display");
|
||||
if (videoData.display == currentDisplay) {
|
||||
this.img.classList.add("shown-on-display");
|
||||
} else {
|
||||
this.img.classList.remove("shown-on-display");
|
||||
}
|
||||
}
|
||||
|
||||
shownOnDisplay() {
|
||||
const currentDisplay = localStorage.getItem("display");
|
||||
return this.videoData.display == currentDisplay;
|
||||
}
|
||||
|
||||
show() {
|
||||
videoContainer.appendChild(this.item);
|
||||
this.shown = true;
|
||||
}
|
||||
|
||||
showAt(index) {
|
||||
videoContainer.insertChildAtIndex(this.item, index);
|
||||
this.shown = true;
|
||||
}
|
||||
|
||||
hide() {
|
||||
videoContainer.removeChild(this.item);
|
||||
this.shown = false;
|
||||
}
|
||||
|
||||
close(event) {
|
||||
console.log(event);
|
||||
event.stopPropagation();
|
||||
askForCloseVideoConfirmation(this.videoID, this.videoData.title);
|
||||
}
|
||||
|
||||
}
|
||||
94
static/js/youtube.js
Normal file
94
static/js/youtube.js
Normal file
@ -0,0 +1,94 @@
|
||||
|
||||
async function listVideos() {
|
||||
const resp = await fetch("/api/video/list/");
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
async function listDisplays() {
|
||||
const resp = await fetch("/api/display/list/");
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
async function listAudioSinks() {
|
||||
const resp = await fetch("/api/audio/list/");
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
function changeAudioSink(sink) {
|
||||
fetch("/api/audio/change/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({sink}),
|
||||
});
|
||||
}
|
||||
|
||||
function showVideo(videoID, display) {
|
||||
fetch("/api/video/show/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID, display: display}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function hideVideo(videoID) {
|
||||
fetch("/api/video/hide/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function openVideo(link) {
|
||||
const display = localStorage.getItem("display");
|
||||
fetch("/api/video/open/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({link, display}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function openVideoInBackground(link) {
|
||||
fetch("/api/video/open/hide/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({link}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function closeVideo(videoID) {
|
||||
fetch("/api/video/close/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function pauseVideo(videoID) {
|
||||
fetch("/api/video/pause/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function unpauseVideo(videoID) {
|
||||
fetch("/api/video/play/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function seekVideo(videoID, second) {
|
||||
fetch("/api/video/seek/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID, second: second}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
function seekVideoRelative(videoID, second) {
|
||||
fetch("/api/video/seek/relative/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({id: videoID, second: second}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
|
||||
|
||||
function setVolume(volume) {
|
||||
fetch("/api/video/volume/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({volume}),
|
||||
}).then(updateUI);
|
||||
}
|
||||
BIN
yt-remote-control
Executable file
BIN
yt-remote-control
Executable file
Binary file not shown.
Loading…
Reference in New Issue
Block a user