From d48184747026117f2e42bcbdd517d4523a8cd4d9 Mon Sep 17 00:00:00 2001 From: octospacc Date: Wed, 15 May 2024 01:29:32 +0200 Subject: [PATCH] Update TiktOctt --- Build.sh | 2 +- static/TiktOctt/index.html | 278 +++++++++++++++++++++++++------------ 2 files changed, 191 insertions(+), 89 deletions(-) diff --git a/Build.sh b/Build.sh index da1d670..414396a 100755 --- a/Build.sh +++ b/Build.sh @@ -1,6 +1,6 @@ #!/bin/sh SourceApps="SpiderADB WuppiMini" -HubSdkApps="${SourceApps} MatrixStickerHelper" +HubSdkApps="${SourceApps} MatrixStickerHelper TiktOctt" quoteVar(){ echo '"'"$1"'"' ;} diff --git a/static/TiktOctt/index.html b/static/TiktOctt/index.html index a45b8c1..5b839dc 100644 --- a/static/TiktOctt/index.html +++ b/static/TiktOctt/index.html @@ -12,6 +12,12 @@ --hudBaseHeight: 8em; --screenPadding: 8px; --hudButtonSize: 48px; + --colorPrimary: #fe77a0; +} +.v-vlite { + --vlite-colorPrimary: var(--colorPrimary) !important; + --vlite-controlBarBackground: none !important; + --vlite-controlBarHeight: 0px !important; } body { margin: 0; @@ -40,19 +46,28 @@ a { position: relative; /* height: calc(100vh - var(--footerHeight)); */ } -.videosList, .videoItem, .videoItem > video { +.videosList, .videoItem, .videoItem > *, .videoItem video { width: 100%; height: 100%; + aspect-ratio: auto !important; } -.videoItem > div { +/* .videoItem .vjs-hidden, .videoItem .vjs-text-track-display, .videoItem .vjs-loading-spinner, .videoItem .vjs-big-play-button, .videoItem .vjs-control-bar */ +.videoItem .v-controlButton, .videoItem .v-time { + display: none; +} +.videoItem .v-controlBar.v-hidden { + opacity: unset; +} +.videoItem .v-video .v-controlBar { + top: 0; +} +.videoItem > .hud { position: relative; bottom: var(--footerHeight); /* margin: 8px; z-index: 1; padding-left: 8px; padding-right: 8px; */ -} -.videoItem > .hud { height: calc(2 * var(--hudBaseHeight) + var(--screenPadding)); bottom: calc(var(--footerHeight) + var(--hudBaseHeight) + var(--screenPadding) + 5em); background-image: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,1.0)); @@ -85,6 +100,10 @@ a { /* margin-bottom: calc(-1 * var(--screenPadding)); */ /* padding-top: var(--screenPadding); */ } +.iconButton, .videoItem > .hud > button { + background: none; + border: none; +} .videoItem > .hud > button { position: relative; display: block; @@ -92,28 +111,11 @@ a { /* bottom: calc(var(--hudButtonSize) /* + 4em */ /* (2 * var(--screenPadding)) ); */ bottom: calc(4em + (2 * var(--screenPadding))); margin-bottom: calc(2 * var(--screenPadding)); - background: none; - border: none; } -.videoItem > .hud > button, .videoItem > .hud > button > * { +.iconButton, .iconButton > *, .videoItem > .hud > button, .videoItem > .hud > button > * { width: var(--hudButtonSize); height: var(--hudButtonSize); } -/* .videoItem > .hud > .icon.pause { - display: none; -} -.videoItem.paused > .hud > .icon.pause { - display: revert; - position: fixed; - max-width: 20%; - max-height: 20%; -} */ -/* .scrollLoader { - height: var(--footerHeight); - display: flex; - background: #eee; - justify-content: center; -} */ .framesArea { width: 100vw; height: 100%; @@ -148,9 +150,14 @@ a { .contentFrame > .header { background: black; padding: 0.5em; + position: relative; + z-index: 1; } .contentFrame > .header > button { float: right; + width: var(--hudButtonSize); + height: var(--hudButtonSize); + font-size: large; } .contentFrame > .header > span { text-overflow: ellipsis; @@ -161,16 +168,26 @@ a { .contentFrame > .content { padding: 1em; overflow: auto; + width: calc(100% - 2em); height: calc(100% - 4em); + position: relative; + bottom: calc(var(--hudButtonSize) / 2); } .contentFrame > .content * { max-width: 100% !important; + height: auto !important; } -.audioNag { +.audioNag, button[name="menu"] { position: fixed; z-index: 2; - margin: var(--screenPadding); +} +.audioNag { font-size: large; + margin: calc(2 * var(--screenPadding)); +} +button[name="menu"] { + right: 0; + margin: var(--screenPadding); } .splash { width: 100%; @@ -192,6 +209,16 @@ a { left: 0; right: 0; } +.splash > p { + position: absolute; + width: 100%; +} +.splash > p[name="nojs"] { + top: 2em; +} +.splash > p[name="loading"] { + bottom: 3em; +} .footer { position: fixed; bottom: 0; @@ -200,32 +227,44 @@ a { background: black; } + +
+

This application requires modern JavaScript. If nothing loads in a while, please check your browser settings.

+
+
-