KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-12-08 20:48:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved chat window and made improvements for iphone

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-04-19 15:51:13 +02:00
parent fb52723dfe
commit a8ac3562c0
9 changed files with 183 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gulpfile.js
View File

@@ -5,11 +5,11 @@ var gulp = require('gulp'),
gulp.task('js', function () {
gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/remotecontroller.js'])
/*.pipe(uglify({
.pipe(uglify({
mangle: true,
compress: true,
enclose: true
}))*/
}))
.pipe(concat('main.min.js'))
.pipe(gulp.dest('static/dist'));
});

81
index.php
View File

@@ -98,12 +98,6 @@
<span class="hover-text">Stir</span>
</a>
</li>
<li>
<a class="nav-btn hide-on-small-only" href="#chat_btn" data-activates="chat-bar" id="chat-btn">
<i class="tiny mdi-communication-message"></i>
<span class="hover-text">Chat</span>
</a>
</li>
<li>
<a class="nav-btn" href="#settings" data-activates="settings-bar" id="settings">
<i class="mdi-action-settings"></i>
@@ -172,36 +166,7 @@
</div>
<main class="container center-align main">
<div id="main-row" class="row">
<div class="col s12 m9 video-container no-opacity hide-on-small-only">
<ul class="side-nav left-aligned chat-bar" id="chat-bar">
<li id="chat-log">
<ul class="collapsible collapsible-accordion inherit-height">
<li class="active inherit-height">
<div class="collapsible-body inherit-height" style="display: block;">
<!--<ul id="chat inherit-height">-->
<div class="row inherit-height">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#channelchat"><?php echo $list; ?></a></li>
<li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li>
</ul>
</div>
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
</div>
<!--</ul>-->
</div>
</li>
</ul>
</li>
<li id="chat-input">
<form action="#" id="chatForm" onsubmit="return false;">
<input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
</form>
</li>
</ul>
<div class="col s12 m9 video-container no-opacity click-through">
<!--
width: calc(100% - 261px);
display: inline;
@@ -233,13 +198,18 @@
</div>
</div>
<div id="playlist" class="col s12 m3">
<div id="top-button" title="Scroll to the top" class="rounded-bottom hide hide-on-small-only">Top</div>
<div id="top-button" title="Scroll to the top" class="rounded-bottom hide top-button-with-tabs hide-on-small-only">Top</div>
<div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
<ul class="tabs playlist-tabs hide-on-small-only hide">
<li class="tab col s3"><a class="playlist-tab-links" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links" href="#suggestions">Suggested</a></li>
<ul class="tabs playlist-tabs">
<li class="tab col s3"><a class="playlist-tab-links playlist-link active" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links chat-link" href="#chat">Chat</a></li>
</ul>
<div id="wrapper">
<ul class="tabs playlist-tabs-loggedIn hide" style="width: 100%;">
<li class="tab col s3"><a class="playlist-tab-links playlist-link active" href="#wrapper">Playlist</a></li>
<li class="tab col s3"><a class="playlist-tab-links suggested-link" href="#suggestions">Suggested</a></li>
<li class="tab col s3"><a class="playlist-tab-links chat-link" href="#chat">Chat</a></li>
</ul>
<div id="wrapper" class="tabs_height">
<div id="list-song-html">
<div id="list-song" class="card left-align list-song">
<span class="clickable vote-container" title="Vote!">
@@ -260,7 +230,7 @@
</div>
</div>
</div>
<div id="suggestions" class="tabs_height hide-on-small-only">
<div id="suggestions" class="tabs_height" style="display:none;">
<p class="suggest-title-info">YouTube Suggests:</p>
<div class="suggest_bar" id="suggest-song-html">
</div>
@@ -268,6 +238,33 @@
<div class="suggest_bar" id="user-suggest-html">
</div>
</div>
<div id="chatPlaylist" class="tabs_height" style="display:none;">
<ul class="" id="chat-bar">
<li id="chat-log">
<ul class="inherit-height">
<li class="active inherit-height">
<!--<ul id="chat inherit-height">-->
<div class="row inherit-height">
<div class="col s12">
<ul class="tabs chatTabs">
<li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#channelchat"><?php echo $list; ?></a></li>
<li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li>
</ul>
</div>
<div id="channelchat" class="col s12 inherit-height"><ul id="chatchannel" class="inherit-height"></ul></div>
<div id="all_chat" class="col s12 inherit-height"><ul id="chatall" class="inherit-height"></ul></div>
</div>
<!--</ul>-->
</li>
</ul>
</li>
<li id="chat-input">
<form action="#" id="chatForm" onsubmit="return false;">
<input id="text-chat-input" name="input" type="text" autocomplete="off" placeholder="Chat" maxlength="150" />
</form>
</li>
</ul>
</div>
</div>
</div>
<div id="playbar">

35
static/css/style.css
View File

@@ -647,7 +647,7 @@ hide mdi-action-visibility mdi-action-visibility-off
line-height:24px;
}
.playlist-tabs .indicator{
.playlist-tabs .indicator, .playlist-tabs-loggedIn .indicator{
background-color:white !important;
}
@@ -655,11 +655,15 @@ hide mdi-action-visibility mdi-action-visibility-off
width:50%;
}
.playlist-tabs-loggedIn .indicator{
width:33.333%;
}
.playlist-tab-links{
color:white !important;
}
.playlist-tabs{
.playlist-tabs, .playlist-tabs-loggedIn{
background-color:rgba(0,0,0,0) !important;
}
@@ -724,12 +728,16 @@ hide mdi-action-visibility mdi-action-visibility-off
margin:0 !important;
}
#text-chat-input{
width:95%;
}
.indicator {
background-color:black !important;
}
#channelchat, #all_chat{
height: calc(100vh - 193px);
height: calc(100vh - 241px);
margin: 0px 5px;
}
@@ -747,12 +755,10 @@ hide mdi-action-visibility mdi-action-visibility-off
}
#chat-bar{
position: absolute;
display: inline;
will-change: left;
margin: 0;
padding: 0;
float: left;
background: white;
background: white;
overflow-x: hidden;
}
#chat-btn i {
@@ -761,7 +767,7 @@ hide mdi-action-visibility mdi-action-visibility-off
}
ul #chat-log{
padding: 0px 0px 0px 11px !important;
/*padding: 0px 0px 0px 11px !important;*/
}
#chat li{
@@ -1292,6 +1298,10 @@ nav ul li:hover, nav ul li.active {
right: 0;
}
#all_chat, #channelchat{
height: calc(100vh - 352px);
}
#fp-nav{
position:initial;
width:initial;
@@ -1386,6 +1396,11 @@ nav ul li:hover, nav ul li.active {
.main, #main-row, .video-container, #playlist{
height:auto !important;
margin-bottom: -5px;
margin-top:-6px;
}
.click-through{
pointer-events:none;
}
.video-container{
@@ -1394,7 +1409,7 @@ nav ul li:hover, nav ul li.active {
width: 106vw !important;
height: 200px !important;
z-index: 2;
bottom: 4px;
bottom: 22px;
}
.chan {

2
static/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

68
static/dist/main.min.js vendored
View File

@@ -82,11 +82,12 @@ var Admin = {
$("#admin-lock").removeClass("mdi-action-lock");
$("#password").val("");
$("#password").attr("placeholder", "Change channel password")
if(!window.mobilecheck()){
$(".playlist-tabs").removeClass("hide");
$("#top-button").toggleClass("top-button-with-tabs");
$("#wrapper").toggleClass("tabs_height");
}
//if(!window.mobilecheck()){
$(".playlist-tabs-loggedIn").removeClass("hide");
$(".playlist-tabs").addClass("hide");
//$("#top-button").toggleClass("top-button-with-tabs");
//$("#wrapper").toggleClass("tabs_height");
//}
if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
$("#admin-lock").addClass("mdi-action-lock-open clickable");
@@ -142,8 +143,9 @@ var Admin = {
$("#admin-lock").addClass("mdi-action-lock");
}
if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")){
$(".playlist-tabs").addClass("hide");
if(!Helper.contains($(".playlist-tabs-loggedIn").attr("class").split(" "), "hide")){
$(".playlist-tabs-loggedIn").addClass("hide");
$(".playlist-tabs").removeClass("hide");
}
if($(".card-action").length != 0 &&
@@ -152,10 +154,10 @@ var Admin = {
}
$('ul.tabs').tabs('select_tab', 'wrapper');
$("#wrapper").removeClass("tabs_height");
//$("#wrapper").removeClass("tabs_height");
$("#admin-lock").removeClass("mdi-action-lock-open clickable");
$("#password").attr("placeholder", "Enter channel password");
$("#top-button").removeClass("top-button-with-tabs");
//$("#top-button").removeClass("top-button-with-tabs");
},
//function used in html onlick
@@ -174,8 +176,8 @@ var Admin = {
if(conf_array['adminpass'] == "" || !w_p){
hasadmin = false;
if(!window.mobilecheck()){
$(".playlist-tabs").removeClass("hide");
$("#wrapper").toggleClass("tabs_height");
//$(".playlist-tabs").removeClass("hide");
//$("#wrapper").toggleClass("tabs_height");
}
}
else hasadmin = true;
@@ -252,7 +254,7 @@ var Chat = {
}else if(data.value.startsWith("/removename")){
Chat.removename();
}
else if($(".tab a.active").attr("href") == "#all_chat")
else if($(".chat-tab-li a.active").attr("href") == "#all_chat")
socket.emit("all,chat", data.value);
else
socket.emit("chat", data.value);
@@ -1192,7 +1194,8 @@ function init(){
window.location.reload(true);
}
$('ul.tabs').tabs();
$('ul.playlist-tabs').tabs();
$('.chatTabs').tabs();
$("#settings").sideNav({
menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin
@@ -1255,24 +1258,12 @@ function init(){
Player.getTitle(song_title, viewers);
});
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("search").blur();
Player.readyLooks();
}else{
Chat.setup_chat_listener(chan);
Chat.allchat_listener();
if(!window.mobilecheck()) Hostcontroller.host_listener();
window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
Player.loadPlayer();
$("#chat-btn").sideNav({
menuWidth: 272, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
if($(".drag-target").length > 0) $(".drag-target")[1].remove();
if(!Helper.msieversion()) Notification.requestPermission();
git_info = $.ajax({ type: "GET",
@@ -1289,7 +1280,6 @@ function init(){
+ git_info[0].commit.message+"<br");
Helper.sample();
}
$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
$("#search").focus();
@@ -1441,6 +1431,24 @@ $(document).on("submit", "#adminForm", function(e){
Admin.pass_save();
});
$(document).on("click", ".chat-link", function(e){
$("#chatPlaylist").css("display", "block");
$("#wrapper").css("display", "none");
$("#suggestions").css("display", "none");
});
$(document).on("click", ".playlist-link", function(e){
$("#chatPlaylist").css("display", "none");
$("#wrapper").css("display", "block");
$("#suggestions").css("display", "none");
});
$(document).on("click", ".suggested-link", function(e){
$("#chatPlaylist").css("display", "none");
$("#wrapper").css("display", "none");
$("#suggestions").css("display", "block");
});
$(document).on("submit", "#chatForm", function(){
Chat.chat(document.getElementById("chatForm").input);
});
@@ -2401,7 +2409,7 @@ var Playercontrols = {
initYoutubeControls: function()
{
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(window.mobilecheck() && !window.MSStream){
$("#controls").appendTo("#playbar");
}
Playercontrols.initControls();
@@ -2452,15 +2460,17 @@ var Playercontrols = {
if(Player.ytplayer.getPlayerState() == 1)
{
Player.ytplayer.pauseVideo();
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(window.mobilecheck() && !window.MSStream){
document.getElementById("player").style.display = "none";
$(".video-container").toggleClass("click-through");
$(".page-footer").toggleClass("padding-bottom-extra");
}
}else if(Player.ytplayer.getPlayerState() == 2 || Player.ytplayer.getPlayerState() == 0)
{
Player.ytplayer.playVideo();
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(window.mobilecheck() && !window.MSStream){
document.getElementById("player").style.display = "block";
$(".video-container").toggleClass("click-through");
$(".page-footer").toggleClass("padding-bottom-extra");
}
}

24
static/js/admin.js
View File

@@ -82,11 +82,12 @@ var Admin = {
$("#admin-lock").removeClass("mdi-action-lock");
$("#password").val("");
$("#password").attr("placeholder", "Change channel password")
if(!window.mobilecheck()){
$(".playlist-tabs").removeClass("hide");
$("#top-button").toggleClass("top-button-with-tabs");
$("#wrapper").toggleClass("tabs_height");
}
//if(!window.mobilecheck()){
$(".playlist-tabs-loggedIn").removeClass("hide");
$(".playlist-tabs").addClass("hide");
//$("#top-button").toggleClass("top-button-with-tabs");
//$("#wrapper").toggleClass("tabs_height");
//}
if(!Helper.contains($("#admin-lock").attr("class").split(" "), "mdi-action-lock-open"))
$("#admin-lock").addClass("mdi-action-lock-open clickable");
@@ -142,8 +143,9 @@ var Admin = {
$("#admin-lock").addClass("mdi-action-lock");
}
if(!Helper.contains($(".playlist-tabs").attr("class").split(" "), "hide")){
$(".playlist-tabs").addClass("hide");
if(!Helper.contains($(".playlist-tabs-loggedIn").attr("class").split(" "), "hide")){
$(".playlist-tabs-loggedIn").addClass("hide");
$(".playlist-tabs").removeClass("hide");
}
if($(".card-action").length != 0 &&
@@ -152,10 +154,10 @@ var Admin = {
}
$('ul.tabs').tabs('select_tab', 'wrapper');
$("#wrapper").removeClass("tabs_height");
//$("#wrapper").removeClass("tabs_height");
$("#admin-lock").removeClass("mdi-action-lock-open clickable");
$("#password").attr("placeholder", "Enter channel password");
$("#top-button").removeClass("top-button-with-tabs");
//$("#top-button").removeClass("top-button-with-tabs");
},
//function used in html onlick
@@ -174,8 +176,8 @@ var Admin = {
if(conf_array['adminpass'] == "" || !w_p){
hasadmin = false;
if(!window.mobilecheck()){
$(".playlist-tabs").removeClass("hide");
$("#wrapper").toggleClass("tabs_height");
//$(".playlist-tabs").removeClass("hide");
//$("#wrapper").toggleClass("tabs_height");
}
}
else hasadmin = true;

2
static/js/chat.js
View File

@@ -21,7 +21,7 @@ var Chat = {
}else if(data.value.startsWith("/removename")){
Chat.removename();
}
else if($(".tab a.active").attr("href") == "#all_chat")
else if($(".chat-tab-li a.active").attr("href") == "#all_chat")
socket.emit("all,chat", data.value);
else
socket.emit("chat", data.value);

34
static/js/listeners.js
View File

@@ -83,7 +83,8 @@ function init(){
window.location.reload(true);
}
$('ul.tabs').tabs();
$('ul.playlist-tabs').tabs();
$('.chatTabs').tabs();
$("#settings").sideNav({
menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin
@@ -146,24 +147,12 @@ function init(){
Player.getTitle(song_title, viewers);
});
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("search").blur();
Player.readyLooks();
}else{
Chat.setup_chat_listener(chan);
Chat.allchat_listener();
if(!window.mobilecheck()) Hostcontroller.host_listener();
window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
Player.loadPlayer();
$("#chat-btn").sideNav({
menuWidth: 272, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
if($(".drag-target").length > 0) $(".drag-target")[1].remove();
if(!Helper.msieversion()) Notification.requestPermission();
git_info = $.ajax({ type: "GET",
@@ -180,7 +169,6 @@ function init(){
+ git_info[0].commit.message+"<br");
Helper.sample();
}
$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
$("#search").focus();
@@ -332,6 +320,24 @@ $(document).on("submit", "#adminForm", function(e){
Admin.pass_save();
});
$(document).on("click", ".chat-link", function(e){
$("#chatPlaylist").css("display", "block");
$("#wrapper").css("display", "none");
$("#suggestions").css("display", "none");
});
$(document).on("click", ".playlist-link", function(e){
$("#chatPlaylist").css("display", "none");
$("#wrapper").css("display", "block");
$("#suggestions").css("display", "none");
});
$(document).on("click", ".suggested-link", function(e){
$("#chatPlaylist").css("display", "none");
$("#wrapper").css("display", "none");
$("#suggestions").css("display", "block");
});
$(document).on("submit", "#chatForm", function(){
Chat.chat(document.getElementById("chatForm").input);
});

8
static/js/playercontrols.js
View File

@@ -4,7 +4,7 @@ var Playercontrols = {
initYoutubeControls: function()
{
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(window.mobilecheck() && !window.MSStream){
$("#controls").appendTo("#playbar");
}
Playercontrols.initControls();
@@ -55,15 +55,17 @@ var Playercontrols = {
if(Player.ytplayer.getPlayerState() == 1)
{
Player.ytplayer.pauseVideo();
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(window.mobilecheck() && !window.MSStream){
document.getElementById("player").style.display = "none";
$(".video-container").toggleClass("click-through");
$(".page-footer").toggleClass("padding-bottom-extra");
}
}else if(Player.ytplayer.getPlayerState() == 2 || Player.ytplayer.getPlayerState() == 0)
{
Player.ytplayer.playVideo();
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
if(window.mobilecheck() && !window.MSStream){
document.getElementById("player").style.display = "block";
$(".video-container").toggleClass("click-through");
$(".page-footer").toggleClass("padding-bottom-extra");
}
}