mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2026-03-02 10:41:36 +00:00
Settings page and instance selection
This commit is contained in:
Cadence Ember
parent
59a7489545
commit
c573a5ac3e
22 changed files with 587 additions and 71 deletions
87
html/static/images/settings.svg
Normal file
87
html/static/images/settings.svg
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 6.6145832 6.6145837"
|
||||
version="1.1"
|
||||
id="svg27"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="settings.svg">
|
||||
<defs
|
||||
id="defs21">
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath54">
|
||||
<rect
|
||||
style="opacity:1;fill:#c4c4c4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
|
||||
id="rect56"
|
||||
width="5.7141514"
|
||||
height="5.8818746"
|
||||
x="-344.6713"
|
||||
y="-23.818602" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.313708"
|
||||
inkscape:cx="30.493294"
|
||||
inkscape:cy="11.333495"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1440"
|
||||
inkscape:window-height="877"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-global="true"
|
||||
inkscape:snap-center="true"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:snap-bbox-midpoints="false"
|
||||
showguides="false">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid40"
|
||||
originx="-46.744516"
|
||||
originy="-203.04119" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata24">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(344.08287,33.230171)">
|
||||
<path
|
||||
id="path100"
|
||||
style="opacity:1;fill:#c4c4c4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
|
||||
d="m -341.44225,-33.230169 c 0,0 -0.0312,0.939474 -0.42432,1.214551 -0.39309,0.275081 -1.33164,-0.320927 -1.33164,-0.320927 l -0.77299,1.338204 c -4e-5,-2.6e-5 -0.003,-0.0017 -0.003,-0.0017 l 0.003,0.0023 c 0.0111,0.0056 0.79687,0.498135 0.83826,0.973489 0.0416,0.477954 -0.94437,0.992482 -0.94437,0.992482 l 0.77131,1.339876 c 0,0 0.82948,-0.442244 1.26426,-0.239355 0.43479,0.202871 0.38726,1.313379 0.38726,1.313379 l 1.54597,0.0023 c 0,0 0.0312,-0.939459 0.42429,-1.21454 0.39309,-0.27508 1.33168,0.320916 1.33168,0.320916 l 0.77468,-1.337642 c 0,0 -0.79776,-0.496643 -0.8394,-0.974608 -0.0416,-0.477957 0.94383,-0.992483 0.94383,-0.992483 l -0.77131,-1.339874 c 0,0 -0.82893,0.442849 -1.26369,0.239971 -0.43478,-0.202878 -0.38784,-1.313998 -0.38784,-1.313998 z m 0.68755,2.250259 c 0.61082,-1.69e-4 1.10602,0.495039 1.10586,1.105858 -1.4e-4,0.610603 -0.49526,1.105472 -1.10586,1.105302 -0.61038,-1.38e-4 -1.10517,-0.494918 -1.1053,-1.105302 -1.7e-4,-0.6106 0.49469,-1.105718 1.1053,-1.105858 z"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccccccccccccccccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -49,6 +49,7 @@ class FormatLoader {
|
|||
video.currentTime = lastTime
|
||||
if (this.npa) {
|
||||
audio.src = this.npa.url
|
||||
audio.pause()
|
||||
audio.currentTime = lastTime
|
||||
} else {
|
||||
audio.pause()
|
||||
|
|
@ -59,6 +60,30 @@ class FormatLoader {
|
|||
|
||||
const formatLoader = new FormatLoader()
|
||||
|
||||
class PlayManager {
|
||||
constructor(media, isAudio) {
|
||||
this.media = media
|
||||
this.isAudio = isAudio
|
||||
}
|
||||
|
||||
isActive() {
|
||||
return !this.isAudio || formatLoader.npa
|
||||
}
|
||||
|
||||
play() {
|
||||
if (this.isActive()) this.media.play()
|
||||
}
|
||||
|
||||
pause() {
|
||||
if (this.isActive()) this.media.pause()
|
||||
}
|
||||
}
|
||||
|
||||
const playManagers = {
|
||||
video: new PlayManager(video, false),
|
||||
audio: new PlayManager(audio, true)
|
||||
}
|
||||
|
||||
class QualitySelect extends ElemJS {
|
||||
constructor() {
|
||||
super(q("#quality-select"))
|
||||
|
|
@ -74,12 +99,21 @@ class QualitySelect extends ElemJS {
|
|||
|
||||
const qualitySelect = new QualitySelect()
|
||||
|
||||
const ignoreNext = {
|
||||
play: 0
|
||||
}
|
||||
|
||||
function playbackIntervention(event) {
|
||||
console.log(event.target.tagName.toLowerCase(), event.type)
|
||||
if (audio.src) {
|
||||
let target = event.target
|
||||
let targetName = target.tagName.toLowerCase()
|
||||
let other = (event.target === video ? audio : video)
|
||||
let targetPlayManager = playManagers[target.tagName.toLowerCase()]
|
||||
let otherPlayManager = playManagers[other.tagName.toLowerCase()]
|
||||
if (ignoreNext[event.type] > 0) {
|
||||
ignoreNext[event.type]--
|
||||
return
|
||||
}
|
||||
switch (event.type) {
|
||||
case "durationchange":
|
||||
target.ready = false;
|
||||
|
|
@ -91,7 +125,7 @@ function playbackIntervention(event) {
|
|||
break;
|
||||
case "play":
|
||||
other.currentTime = target.currentTime;
|
||||
other.play();
|
||||
otherPlayManager.play();
|
||||
break;
|
||||
case "pause":
|
||||
other.currentTime = target.currentTime;
|
||||
|
|
@ -125,13 +159,44 @@ function relativeSeek(seconds) {
|
|||
video.currentTime += seconds
|
||||
}
|
||||
|
||||
function playVideo() {
|
||||
audio.currentTime = video.currentTime
|
||||
let lastTime = video.currentTime
|
||||
video.play().then(() => {
|
||||
const interval = setInterval(() => {
|
||||
console.log("checking video", video.currentTime, lastTime)
|
||||
if (video.currentTime !== lastTime) {
|
||||
clearInterval(interval)
|
||||
playManagers.audio.play()
|
||||
return
|
||||
}
|
||||
}, 15)
|
||||
})
|
||||
}
|
||||
|
||||
function togglePlaying() {
|
||||
if (video.paused) video.play()
|
||||
if (video.paused) playVideo()
|
||||
else video.pause()
|
||||
}
|
||||
|
||||
function toggleFullScreen() {
|
||||
if (document.fullscreen) document.exitFullscreen()
|
||||
else video.requestFullscreen()
|
||||
}
|
||||
|
||||
video.addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
togglePlaying()
|
||||
})
|
||||
|
||||
video.addEventListener("dblclick", event => {
|
||||
event.preventDefault()
|
||||
toggleFullScreen()
|
||||
})
|
||||
|
||||
document.addEventListener("keydown", event => {
|
||||
if (["INPUT", "SELECT", "BUTTON"].includes(event.target.tagName)) return
|
||||
if (event.ctrlKey || event.shiftKey) return
|
||||
let caught = true
|
||||
if (event.key === "j" || event.key === "n") {
|
||||
relativeSeek(-10)
|
||||
|
|
@ -148,8 +213,7 @@ document.addEventListener("keydown", event => {
|
|||
} else if (event.key >= "0" && event.key <= "9") {
|
||||
video.currentTime = video.duration * (+event.key) / 10
|
||||
} else if (event.key === "f") {
|
||||
if (document.fullscreen) document.exitFullscreen()
|
||||
else video.requestFullscreen()
|
||||
toggleFullScreen()
|
||||
} else {
|
||||
caught = false
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue