diff --git a/webroot/img/logo.png b/webroot/img/logo.png new file mode 100644 index 000000000..896b7178f Binary files /dev/null and b/webroot/img/logo.png differ diff --git a/webroot/index.html b/webroot/index.html index a8a6f711a..ef2225023 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -40,123 +40,146 @@ possible hacks
-
-

- 😈 Owncast -

-
-
-
- - -
+
+
+

+ 😈 Owncast +

-
- - - -
-
- -
+
+
+
+ + +
-
-
- -
- -
- -
- -
- {{ streamStatus }} - {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. - Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}. - {{ overallMaxViewerCount }} overall. -
- -
- - -
- Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. - - -
-
- Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. - - -
- -
-
- - -
- -
-
-
-
- -
-

{{ message.author }}

-

-
-
+
+ + +
- -
-
+ +
- + - - -
- - -
- - + +
+ +
+ + +
+ {{ streamStatus }} + {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. + Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}. + {{ overallMaxViewerCount }} overall. +
+ +
+ + +
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. +
+ +
+
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. + + +
+ +
+
+ + +
+ + + +
+ + +
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. +
+ +
+
+ Blathers is an owl with brown feathers. His face is white and he has a yellow beak. His arms are wing shaped and he has yellow talons. His eyes are very big with small black irises. He also has big pink cheek circles on his cheeks. His belly appears to be checkered in diamonds with light brown and white squares, similar to an argyle vest, which is traditionally associated with academia. His green bowtie further alludes to his academic nature. + + +
+ +
+ +
+
+
+
+ +
+

{{ message.author }}

+

+
+
+ + +
+
+ + + + + +
+ + +
+ +
+
+
+ + +
diff --git a/webroot/js/app.js b/webroot/js/app.js index bfa93c796..fd88c4388 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -27,8 +27,6 @@ function setupApp() { // style hackings window.VIDEOJS_NO_DYNAMIC_STYLE = true; - setVHvar(); - // init messaging interactions var appMessagingMisc = new Messaging(); diff --git a/webroot/js/message.js b/webroot/js/message.js index 92a74849a..234a82dda 100644 --- a/webroot/js/message.js +++ b/webroot/js/message.js @@ -81,6 +81,8 @@ class Messaging { this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this)); this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.bind(this)); + } else { + this.tagAppContainer.classList.add("desktop"); } } @@ -99,12 +101,18 @@ class Messaging { this.imgUsernameAvatar.src = this.avatarSource + username; } displayChat() { - this.tagAppContainer.className = this.chatDisplayed ? "flex" : "flex no-chat"; + if (this.chatDisplayed) { + this.tagAppContainer.classList.add("chat"); + this.tagAppContainer.classList.remove("no-chat"); + } else { + this.tagAppContainer.classList.add("no-chat"); + this.tagAppContainer.classList.remove("chat"); + } } handleOrientationChange() { console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)")) - mobileVHhack(); + // mobileVHhack(); // if small landscape, hide chat // var mql = window.matchMedia("(orientation: landscape)"); // what it _was_ diff --git a/webroot/js/utils.js b/webroot/js/utils.js index 48f487d89..7b7c90d0a 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -23,9 +23,9 @@ function clearLocalStorage(key) { } function jumpToBottom(id) { - const div = document.querySelector(id); + const div = id ? document.querySelector(id) : document.body; div.scrollTo({ - top: div.scrollHeight,// - div.clientHeight, + top: div.scrollHeight, left: 0, behavior: 'smooth' }); diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index cef96ce2f..fa16572a0 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -2,9 +2,8 @@ :root { --header-height: 3em; --right-col-width: 24em; - + --video-container-height: 50vh; --header-bg-color: rgba(20,0,40,1); - --vh: 1vh; } body { @@ -54,6 +53,30 @@ header h1 { align-items: center; } + +/* ************************************************8 */ + +#stream-info { + padding: .5em 2em; + text-align: center; + width: 100%; + + flex-direction: row; + justify-content: space-between; + +} +#stream-info span { + font-size: .7em; +} +.user-content { + padding: 2em; +} +#user-content { + display: block; +} +#user-content-touch { + display: none; +} /* ************************************************8 */ #user-options-container { @@ -117,35 +140,19 @@ header h1 { /* ************************************************8 */ -#main-content-container { + +#video-container { + height: calc(var(--video-container-height) - var(--header-height)); width: 100%; - flex-direction: row; - position: relative; - margin-top: var(--header-height); } -.main-cols { - flex-direction: column; - justify-content: flex-start; - position: relative; -} - -.left-col { - width: calc(100vw - var(--right-col-width)); -} - -/* ************************************************8 */ - .owncast-video-container { - width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; - height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */ - height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em); } .owncast-video-container .video-js { @@ -165,34 +172,38 @@ header h1 { margin-left: -1.5em; margin-top: -0.75em; } -/* ************************************************8 */ - -#stream-info { - padding: .5em 2em; - text-align: center; - font-size: .7em; - - flex-direction: row; - justify-content: space-between; - +.vjs-airplay .vjs-icon-placeholder::before { + content: 'AP'; } -#user-content { - padding: 2em; -} + + /* ************************************************8 */ +.no-chat #chat-container-wrap { + display: none; +} +.chat #chat-container-wrap { + display: block; +} + +.chat #video-container, +.chat #stream-info, +.chat #user-content { + width: calc(100% - var(--right-col-width)); +} + + #chat-container { position: fixed; z-index: 9; + top: var(--header-height); right: 0; - height: 100%; width: var(--right-col-width); - height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */ - height: calc((var(--vh, 1vh) * 100) - var(--header-height)); + height: calc(100vh - var(--header-height)); overflow: hidden; display: flex; @@ -249,12 +260,6 @@ header h1 { /* ************************************************8 */ -.no-chat .left-col { - width: 100vw; -} -.no-chat .right-col { - display: none; -} .no-chat #chat-toggle { opacity: .75; @@ -276,109 +281,129 @@ header h1 { #chat-container { width: var(--right-col-width); } - .left-col { - width: calc(100vw - var(--right-col-width)); + +} + +@media screen and (max-width: 640px ) { + .desktop { + --video-container-height: 50vh; } + .desktop #chat-container { + height: auto; + position: relative; + right: unset; + top: unset; + width: 100%; + z-index: 1; + } + .desktop.chat #video-container, + .desktop.chat #stream-info, + .desktop.chat #user-content { + width: 100%; + } + .desktop.chat #user-content{ + display: none; + } + } +/* ************************************************8 */ /* ************************************************8 */ - -@media screen and (max-width: 640px ) { - #main-content-container { - flex-direction: column; - justify-content: space-between; - height: calc((var(--vh, 1vh) * 100) - var(--header-height)); - } - - .main-cols { - width: 100vw; - } - .left-col { - flex-direction: column; - justify-content: stretch; - z-index: 100; - height: 55%; - min-height: 300px; - } - .right-col { - overflow: hidden; - height: 45%; - } - - #user-info { - width: 9em; - } - #user-content { - display: none; - } - #chat-container { - width: 100%; - height: 100%; - position: relative; - height: auto; - } - - .owncast-video-container { - height: 100%; - } - .no-chat .left-col { - height: 100%; - } - .no-chat .owncast-video-container { - min-height: 50vh; - } - .no-chat .right-col { - display: none; - } - .no-chat #stream-info { - display: flex; - } - .no-chat #user-content { - display: block; - } +.touch-screen header { + position: relative; +} +.touch-screen #top-content { + position: fixed; + left: 0; + top: 0; + width: 100%; + z-index: 10; } -.message-input-focus #main-content-container { - flex-direction: column; - justify-content: space-between; - height: calc((var(--vh, 1vh) * 100) - var(--header-height)); +.touch-screen #user-content { + display: none; +} +.touch-screen #user-content-touch { + display: block; } -.message-input-focus .main-cols { - width: 100vw; -} -.message-input-focus .left-col { - flex-direction: column; - justify-content: stretch; - z-index: 100; -} -.message-input-focus .right-col { +.touch-screen #stream-info { + height: 2.5em; overflow: hidden; } -.message-input-focus #user-info { - width: 9em; +.touch-screen #chat-container-wrap { + display: flex; + align-items: flex-end; + width: 100%; + height: auto; + flex-direction: column; + margin-top: calc(var(--header-height) + var(--video-container-height) + 2.5em); } -.message-input-focus #user-content { +.touch-screen #chat-container { + height: auto; + position: relative; + right: unset; + top: unset; + width: 100%; + z-index: 1; +} +.touch-screen.chat #video-container, +.touch-screen.chat #stream-info, +.touch-screen.chat #user-content { + width: 100%; +} + + +.touch-screen #video-container { + height: var(--video-container-height); +} +.touch-screen .owncast-video-container { + height: 100%; +} + +.touch-screen #user-content-touch { display: none; } -.message-input-focus #chat-container { - width: 100%; - height: 100%; - position: relative; - height: auto; - z-index: 999; +.touch-screen #chat-container { + display: block; +} +.touch-screen.no-chat #user-content-touch { + display: block; +} +.touch-screen.no-chat #chat-container { + display: none; } -.message-input-focus .owncast-video-container { - height: 40vh; - height: calc((var(--vh, 1vh) * 40)); - min-height: 300px; +@media screen and (max-width: 640px ) { + :root { + --video-container-height: 36vh; + } } -.vjs-airplay .vjs-icon-placeholder::before { - content: 'AP'; -} \ No newline at end of file +@media screen and (orientation: landscape) and (min-width: 1024px) { + :root { + --video-container-height: 65vh; + } +} + +@media screen and (orientation: landscape) and (max-width: 1024px) { + :root { + --video-container-height: 75vh; + } + #main-mobile-container { + margin-top: calc(var(--header-height) + var(--video-container-height)); + } + .touch-screen .user-content { + display: block; + } + .touch-screen #chat-container { + display: none; + } + .touch-screen #chat-toggle { + display: none; + } +}