Merge branch '0615-layoutrefactor'
This commit is contained in:
Ginger Wong
commit
195fe5d9e3
BIN
webroot/img/logo.png
Normal file
BIN
webroot/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
@ -40,123 +40,146 @@ possible hacks
|
|||||||
</script>
|
</script>
|
||||||
<body class="bg-gray-300 text-gray-800">
|
<body class="bg-gray-300 text-gray-800">
|
||||||
<div id="app-container" class="flex no-chat">
|
<div id="app-container" class="flex no-chat">
|
||||||
<header class="flex border-b border-gray-900 border-solid shadow-md">
|
|
||||||
<h1 class="text-gray-400">
|
|
||||||
😈 Owncast
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div id="user-options-container" class="flex">
|
<div id="top-content">
|
||||||
<div id="user-info">
|
<header class="flex border-b border-gray-900 border-solid shadow-md">
|
||||||
<div id="user-info-display" title="Click to update user name" class="flex">
|
<h1 class="text-gray-400">
|
||||||
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700" />
|
😈 Owncast
|
||||||
<span id="username-display" class="text-indigo-600"></span>
|
</h1>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="user-info-change">
|
<div id="user-options-container" class="flex">
|
||||||
<input type="text"
|
<div id="user-info">
|
||||||
id="username-change-input"
|
<div id="user-info-display" title="Click to update user name" class="flex">
|
||||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
|
<img src="https://robohash.org/username123" id="username-avatar" class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700" />
|
||||||
value="Random Username 123"
|
<span id="username-display" class="text-indigo-600"></span>
|
||||||
maxlength="100"
|
</div>
|
||||||
placeholder="Update username"
|
|
||||||
>
|
|
||||||
<button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
|
|
||||||
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</header>
|
<div id="user-info-change">
|
||||||
<div id="main-content-container" class="flex">
|
<input type="text"
|
||||||
<!-- LEFT CONTAINER SIDE-->
|
id="username-change-input"
|
||||||
<div class="flex main-cols left-col">
|
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
|
||||||
|
value="Random Username 123"
|
||||||
<div id="video-container" class="flex owncast-video-container bg-black">
|
maxlength="100"
|
||||||
<video
|
placeholder="Update username"
|
||||||
class="video-js"
|
>
|
||||||
id="video"
|
<button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
|
||||||
preload="auto"
|
<button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
|
||||||
controls
|
|
||||||
autoplay
|
|
||||||
playsinline
|
|
||||||
muted
|
|
||||||
poster="/thumbnail.png"
|
|
||||||
data-setup='{}'
|
|
||||||
>
|
|
||||||
<source src="hls/stream.m3u8" type="application/x-mpegURL"/>
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
|
|
||||||
<span>{{ streamStatus }}</span>
|
|
||||||
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
|
|
||||||
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
|
|
||||||
<span>{{ overallMaxViewerCount }} overall.</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="user-content">
|
|
||||||
|
|
||||||
<!-- USER CONTENT... -->
|
|
||||||
<div>
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- RIGHT CONTAINER SIDE-->
|
|
||||||
<div class="flex main-cols right-col">
|
|
||||||
|
|
||||||
<div id="chat-container" class="bg-gray-800">
|
|
||||||
<div id="messages-container">
|
|
||||||
<div v-for="(message, index) in messages">
|
|
||||||
<div class="message flex">
|
|
||||||
<img
|
|
||||||
v-bind:src="message.image"
|
|
||||||
class="message-avatar rounded-full bg-black bg-opacity-50"
|
|
||||||
v-bind:style="{ backgroundColor: message.userColor() }"
|
|
||||||
/>
|
|
||||||
<div class="message-content">
|
|
||||||
<p class="message-author text-white font-bold">{{ message.author }}</p>
|
|
||||||
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
|
</header>
|
||||||
<form id="message-form" class="flex" /*@submit="submitChatForm"*/>
|
|
||||||
|
|
||||||
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
|
|
||||||
|
|
||||||
<textarea
|
<div id="video-container" class="flex owncast-video-container bg-black">
|
||||||
id="message-body-form"
|
<video
|
||||||
placeholder="Message"
|
class="video-js"
|
||||||
v-model="message.body"
|
id="video"
|
||||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
|
preload="auto"
|
||||||
></textarea>
|
controls
|
||||||
|
autoplay
|
||||||
|
playsinline
|
||||||
|
muted
|
||||||
|
poster="/thumbnail.png"
|
||||||
|
data-setup='{}'
|
||||||
|
>
|
||||||
|
<source src="hls/stream.m3u8" type="application/x-mpegURL"/>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="message-form-actions" class="flex">
|
|
||||||
<span id="message-form-warning" class="text-red-600 text-xs"></span>
|
|
||||||
<button
|
|
||||||
id="button-submit-message"
|
|
||||||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
|
|
||||||
> Send
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
<div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
|
||||||
|
<span>{{ streamStatus }}</span>
|
||||||
|
<span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
|
||||||
|
<span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
|
||||||
|
<span>{{ overallMaxViewerCount }} overall.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="user-content" class="user-content">
|
||||||
|
|
||||||
|
<!-- USER CONTENT... -->
|
||||||
|
<div>
|
||||||
|
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.
|
||||||
|
<br />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="chat-container-wrap" class="flex">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="user-content-touch" class="user-content">
|
||||||
|
|
||||||
|
<!-- USER CONTENT... -->
|
||||||
|
<div>
|
||||||
|
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.
|
||||||
|
<br />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="chat-container" class="bg-gray-800">
|
||||||
|
<div id="messages-container">
|
||||||
|
<div v-for="(message, index) in messages">
|
||||||
|
<div class="message flex">
|
||||||
|
<img
|
||||||
|
v-bind:src="message.image"
|
||||||
|
class="message-avatar rounded-full bg-black bg-opacity-50"
|
||||||
|
v-bind:style="{ backgroundColor: message.userColor() }"
|
||||||
|
/>
|
||||||
|
<div class="message-content">
|
||||||
|
<p class="message-author text-white font-bold">{{ message.author }}</p>
|
||||||
|
<p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
|
||||||
|
<form id="message-form" class="flex">
|
||||||
|
|
||||||
|
<input type="hidden" name="inputAuthor" id="self-message-author" v-model="message.author" />
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
id="message-body-form"
|
||||||
|
placeholder="Message"
|
||||||
|
v-model="message.body"
|
||||||
|
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
|
||||||
|
></textarea>
|
||||||
|
|
||||||
|
<div id="message-form-actions" class="flex">
|
||||||
|
<span id="message-form-warning" class="text-red-600 text-xs"></span>
|
||||||
|
<button
|
||||||
|
id="button-submit-message"
|
||||||
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
|
||||||
|
> Send
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -27,8 +27,6 @@ function setupApp() {
|
|||||||
|
|
||||||
// style hackings
|
// style hackings
|
||||||
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
|
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
|
||||||
setVHvar();
|
|
||||||
|
|
||||||
|
|
||||||
// init messaging interactions
|
// init messaging interactions
|
||||||
var appMessagingMisc = new Messaging();
|
var appMessagingMisc = new Messaging();
|
||||||
|
|||||||
@ -81,6 +81,8 @@ class Messaging {
|
|||||||
|
|
||||||
this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this));
|
this.formMessageInput.addEventListener("focus", this.handleKeyboardAppear.bind(this));
|
||||||
this.formMessageInput.addEventListener("blur", this.handleKeyboardOut.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;
|
this.imgUsernameAvatar.src = this.avatarSource + username;
|
||||||
}
|
}
|
||||||
displayChat() {
|
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() {
|
handleOrientationChange() {
|
||||||
console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)"))
|
console.log("====orientation change 123", event, window.screen.orientation, window.orientation, window.matchMedia("(orientation: landscape)"))
|
||||||
mobileVHhack();
|
// mobileVHhack();
|
||||||
// if small landscape, hide chat
|
// if small landscape, hide chat
|
||||||
// var mql = window.matchMedia("(orientation: landscape)"); // what it _was_
|
// var mql = window.matchMedia("(orientation: landscape)"); // what it _was_
|
||||||
|
|
||||||
|
|||||||
@ -23,9 +23,9 @@ function clearLocalStorage(key) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function jumpToBottom(id) {
|
function jumpToBottom(id) {
|
||||||
const div = document.querySelector(id);
|
const div = id ? document.querySelector(id) : document.body;
|
||||||
div.scrollTo({
|
div.scrollTo({
|
||||||
top: div.scrollHeight,// - div.clientHeight,
|
top: div.scrollHeight,
|
||||||
left: 0,
|
left: 0,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
});
|
});
|
||||||
|
|||||||
@ -2,9 +2,8 @@
|
|||||||
:root {
|
:root {
|
||||||
--header-height: 3em;
|
--header-height: 3em;
|
||||||
--right-col-width: 24em;
|
--right-col-width: 24em;
|
||||||
|
--video-container-height: 50vh;
|
||||||
--header-bg-color: rgba(20,0,40,1);
|
--header-bg-color: rgba(20,0,40,1);
|
||||||
--vh: 1vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -54,6 +53,30 @@ header h1 {
|
|||||||
align-items: center;
|
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 */
|
/* ************************************************8 */
|
||||||
|
|
||||||
#user-options-container {
|
#user-options-container {
|
||||||
@ -117,35 +140,19 @@ header h1 {
|
|||||||
|
|
||||||
/* ************************************************8 */
|
/* ************************************************8 */
|
||||||
|
|
||||||
#main-content-container {
|
|
||||||
|
#video-container {
|
||||||
|
height: calc(var(--video-container-height) - var(--header-height));
|
||||||
width: 100%;
|
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 {
|
.owncast-video-container {
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
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 {
|
.owncast-video-container .video-js {
|
||||||
@ -165,34 +172,38 @@ header h1 {
|
|||||||
margin-left: -1.5em;
|
margin-left: -1.5em;
|
||||||
margin-top: -0.75em;
|
margin-top: -0.75em;
|
||||||
}
|
}
|
||||||
/* ************************************************8 */
|
.vjs-airplay .vjs-icon-placeholder::before {
|
||||||
|
content: 'AP';
|
||||||
#stream-info {
|
|
||||||
padding: .5em 2em;
|
|
||||||
text-align: center;
|
|
||||||
font-size: .7em;
|
|
||||||
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#user-content {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ************************************************8 */
|
/* ************************************************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 {
|
#chat-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
top: var(--header-height);
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100%;
|
|
||||||
width: var(--right-col-width);
|
width: var(--right-col-width);
|
||||||
|
|
||||||
height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */
|
height: calc(100vh - var(--header-height));
|
||||||
height: calc((var(--vh, 1vh) * 100) - var(--header-height));
|
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -249,12 +260,6 @@ header h1 {
|
|||||||
|
|
||||||
/* ************************************************8 */
|
/* ************************************************8 */
|
||||||
|
|
||||||
.no-chat .left-col {
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
.no-chat .right-col {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-chat #chat-toggle {
|
.no-chat #chat-toggle {
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
@ -276,109 +281,129 @@ header h1 {
|
|||||||
#chat-container {
|
#chat-container {
|
||||||
width: var(--right-col-width);
|
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 */
|
/* ************************************************8 */
|
||||||
|
|
||||||
|
.touch-screen header {
|
||||||
@media screen and (max-width: 640px ) {
|
position: relative;
|
||||||
#main-content-container {
|
}
|
||||||
flex-direction: column;
|
.touch-screen #top-content {
|
||||||
justify-content: space-between;
|
position: fixed;
|
||||||
height: calc((var(--vh, 1vh) * 100) - var(--header-height));
|
left: 0;
|
||||||
}
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
.main-cols {
|
z-index: 10;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.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 {
|
.touch-screen #stream-info {
|
||||||
width: 100vw;
|
height: 2.5em;
|
||||||
}
|
|
||||||
.message-input-focus .left-col {
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: stretch;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
.message-input-focus .right-col {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-input-focus #user-info {
|
.touch-screen #chat-container-wrap {
|
||||||
width: 9em;
|
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;
|
display: none;
|
||||||
}
|
}
|
||||||
.message-input-focus #chat-container {
|
.touch-screen #chat-container {
|
||||||
width: 100%;
|
display: block;
|
||||||
height: 100%;
|
}
|
||||||
position: relative;
|
.touch-screen.no-chat #user-content-touch {
|
||||||
height: auto;
|
display: block;
|
||||||
z-index: 999;
|
}
|
||||||
|
.touch-screen.no-chat #chat-container {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-input-focus .owncast-video-container {
|
@media screen and (max-width: 640px ) {
|
||||||
height: 40vh;
|
:root {
|
||||||
height: calc((var(--vh, 1vh) * 40));
|
--video-container-height: 36vh;
|
||||||
min-height: 300px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vjs-airplay .vjs-icon-placeholder::before {
|
@media screen and (orientation: landscape) and (min-width: 1024px) {
|
||||||
content: 'AP';
|
: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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user