Updated version of host-mode

This commit is contained in:
Kasper Rynning-Tønnesen
2018-06-07 11:41:12 +02:00
parent f4336bdb6a
commit 8039ad1da3
4 changed files with 22 additions and 1 deletions

View File

@@ -2186,7 +2186,18 @@ nav ul li:hover, nav ul li.active {
} }
.host-mode-wrapper { .host-mode-wrapper {
height: calc(100vh - 48px + 15px) !important; height: calc(65vh - 48px + 15px) !important;
}
#host-title {
color: white;
position: absolute;
z-index: 999999;
padding: 20px;
font-size: 1.5rem;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
text-align: left;
} }

View File

@@ -519,7 +519,9 @@ function enable_host_mode(enabled) {
Helper.css("#playlist", "backgroundColor", "inherit"); Helper.css("#playlist", "backgroundColor", "inherit");
Helper.css("#main-row", "backgroundColor", "inherit"); Helper.css("#main-row", "backgroundColor", "inherit");
Helper.css(".main", "backgroundColor", "inherit"); Helper.css(".main", "backgroundColor", "inherit");
Helper.removeClass("#host-title", "hide");
hostMode = enabled; hostMode = enabled;
document.querySelector("#playlist").insertAdjacentHTML("beforeend", "<div id='join-sidebar' style='color:white;'>" + document.querySelector("#channel-share-modal").querySelector(".modal-content").innerHTML + "</div>");
document.addEventListener('webkitfullscreenchange', exitHandler, false); document.addEventListener('webkitfullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false); document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false); document.addEventListener('fullscreenchange', exitHandler, false);
@@ -534,14 +536,20 @@ function enable_host_mode(enabled) {
Helper.removeClass("#playlist", "host-mode-height"); Helper.removeClass("#playlist", "host-mode-height");
Helper.css(".playlist-tabs-loggedIn", "display", "flex"); Helper.css(".playlist-tabs-loggedIn", "display", "flex");
Helper.addClass("#wrapper", "tabs_height"); Helper.addClass("#wrapper", "tabs_height");
Helper.addClass("#host-title", "hide");
Helper.removeClass("#wrapper", "host-mode-wrapper"); Helper.removeClass("#wrapper", "host-mode-wrapper");
Helper.css(".skip", "display", "block"); Helper.css(".skip", "display", "block");
document.querySelector("#join-sidebar").remove();
var removeElements = document.querySelectorAll(".list-remove"); var removeElements = document.querySelectorAll(".list-remove");
for(var i = 0; i < removeElements.length; i++) { for(var i = 0; i < removeElements.length; i++) {
removeElements[i].style.display = "block"; removeElements[i].style.display = "block";
} }
Helper.css("#fullscreen", "display", "block"); Helper.css("#fullscreen", "display", "block");
hostMode = false; hostMode = false;
document.addEventListener('webkitfullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
} }
List.dynamicContentPageJumpTo(1); List.dynamicContentPageJumpTo(1);
} }

View File

@@ -560,6 +560,7 @@ var Player = {
//var elem = document.getElementById('song-title'); //var elem = document.getElementById('song-title');
//var getTitleViews = document.getElementById('viewers'); //var getTitleViews = document.getElementById('viewers');
document.getElementById("host-title").innerText = title;
document.getElementById("song-title").innerText = title; document.getElementById("song-title").innerText = title;
if(!client) document.getElementById("viewers").innerHTML = outPutWord + " " + v; if(!client) document.getElementById("viewers").innerHTML = outPutWord + " " + v;
document.getElementById("song-title").setAttribute("title", title); document.getElementById("song-title").setAttribute("title", title);

View File

@@ -1,4 +1,5 @@
<div id="video-container" class="col s12 m9 video-container no-opacity click-through"> <div id="video-container" class="col s12 m9 video-container no-opacity click-through">
<div id="host-title" class="hide"></div>
{{#unless embed}} {{#unless embed}}
<div id="fireplace_player" class="ytplayer"></div> <div id="fireplace_player" class="ytplayer"></div>
{{/unless}} {{/unless}}