mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Added descriptions and thumbnails, and fixed issue with pagination on add song
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -109,12 +109,10 @@
|
||||
|
||||
.prev_page_hide, .prev_page, .first_page, .first_page_hide{
|
||||
padding:0 10px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.next_page_hide, .next_page, .last_page, .last_page_hide{
|
||||
padding:0 10px;
|
||||
float:right;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -986,6 +984,26 @@ hide mdi-action-visibility mdi-action-visibility-off
|
||||
border-bottom:1px solid black;
|
||||
}
|
||||
|
||||
#chan_thumbnail, #chan_description{
|
||||
color: black;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#thumbnail_image{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#thumbnail_image, #description_area{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
color: black;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#chan_thumbnail:disabled{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggest_title, .duration-song{
|
||||
padding-left:10px;
|
||||
line-height:24px;
|
||||
|
||||
4
public/dist/embed.min.js
vendored
4
public/dist/embed.min.js
vendored
File diff suppressed because one or more lines are too long
8
public/dist/main.min.js
vendored
8
public/dist/main.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -5,6 +5,18 @@ var Admin = {
|
||||
toast: function(msg)
|
||||
{
|
||||
switch(msg) {
|
||||
case "suggested_thumbnail":
|
||||
msg = "The thumbnail has been suggested!";
|
||||
break;
|
||||
case "suggested_description":
|
||||
msg = "The description has been suggested!";
|
||||
break;
|
||||
case "thumbnail_denied":
|
||||
msg = "The thumbnail will be denied";
|
||||
break;
|
||||
case "description_denied":
|
||||
msg = "The description will be denied";
|
||||
break;
|
||||
case "addedsong":
|
||||
msg=Helper.rnd(["I added your song", "Your song has been added", "Yay, more songs!", "Thats a cool song!", "I added that song for you", "I see you like adding songs..."]);
|
||||
break;
|
||||
@@ -21,6 +33,9 @@ var Admin = {
|
||||
msg=Helper.rnd(["That's not the right password!", "Wrong! Better luck next time...", "You seem to have mistyped the password", "Incorrect. Have you tried meditating?","Nope, wrong password!", "Wrong password. The authorities have been notified."]);
|
||||
Crypt.remove_pass(chan.toLowerCase());
|
||||
Admin.display_logged_out();
|
||||
$("#thumbnail_form").css("display", "none");
|
||||
$("#description_form").css("display", "none");
|
||||
$('#chan_thumbnail').tooltip("remove");
|
||||
w_p = true;
|
||||
break;
|
||||
case "shuffled":
|
||||
@@ -42,6 +57,9 @@ var Admin = {
|
||||
msg=Helper.rnd(["I'm sorry, but you have to be an admin to do that!", "Only admins can do that", "You're not allowed to do that, try logging in!", "I can't let you do that", "Please log in to do that"]);
|
||||
Crypt.remove_pass(chan.toLowerCase());
|
||||
Admin.display_logged_out();
|
||||
$("#thumbnail_form").css("display", "none");
|
||||
$("#description_form").css("display", "none");
|
||||
$('#chan_thumbnail').tooltip("remove");
|
||||
w_p = true;
|
||||
break;
|
||||
case "noskip":
|
||||
@@ -55,6 +73,13 @@ var Admin = {
|
||||
break;
|
||||
case "correctpass":
|
||||
msg="Correct password. You now have access to the sacred realm of The Admin.";
|
||||
$("#thumbnail_form").css("display", "inline-block");
|
||||
$("#description_form").css("display", "inline-block");
|
||||
$('#chan_thumbnail').tooltip({
|
||||
delay: 5,
|
||||
position: "left",
|
||||
tooltip: "imgur link"
|
||||
});
|
||||
break;
|
||||
case "changedpass":
|
||||
msg="Your password has been changed!";
|
||||
@@ -159,7 +184,8 @@ var Admin = {
|
||||
"removeplay", "skip", "shuffle"];
|
||||
|
||||
document.getElementById("password").value = "";
|
||||
|
||||
$("#thumbnail_form").css("display", "none");
|
||||
$("#description_form").css("display", "none");
|
||||
for (i = 0; i < names.length; i++) {
|
||||
$("input[name="+names[i]+"]").attr("disabled", true);
|
||||
}
|
||||
@@ -233,6 +259,14 @@ var Admin = {
|
||||
$("#password").attr("placeholder", "Create channel password");
|
||||
}
|
||||
|
||||
if(conf_array.thumbnail != undefined && conf_array.thumbnail != ""){
|
||||
$("#thumbnail_image").html("<img src='" + conf_array.thumbnail + "' width='100' height='100' alt='thumbnail' />");
|
||||
}
|
||||
|
||||
if(conf_array.description != undefined && conf_array.description != ""){
|
||||
$("#description_area").html(conf_array.description);
|
||||
}
|
||||
|
||||
/*if(conf_array.desc !== undefined)
|
||||
{
|
||||
document.getElementById("description").innerHTML = conf_array.desc;
|
||||
|
||||
@@ -73,6 +73,9 @@ var Frontpage = {
|
||||
var id = lists[x].id;
|
||||
var viewers = lists[x].viewers;
|
||||
var img = "background-image:url('https://img.youtube.com/vi/"+id+"/hqdefault.jpg');";
|
||||
if(lists[x].thumbnail){
|
||||
img = "background-image:url('" + lists[x].thumbnail + "');";
|
||||
}
|
||||
var song_count = lists[x].count;
|
||||
|
||||
//$("#channels").append(channel_list);
|
||||
|
||||
@@ -124,7 +124,7 @@ var List = {
|
||||
}
|
||||
});
|
||||
if($("#wrapper").children().length > List.can_fit && !$("#pageButtons").length){
|
||||
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper");
|
||||
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span></div>').insertAfter("#wrapper");
|
||||
$(".prev_page").css("display", "none");
|
||||
$(".first_page").css("display", "none");
|
||||
$(".next_page_hide").css("display","none");
|
||||
@@ -136,13 +136,13 @@ var List = {
|
||||
$(".last_page").removeClass("hide");
|
||||
}*/
|
||||
} else if(!$("#pageButtons").length){
|
||||
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper");
|
||||
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span></div>').insertAfter("#wrapper");
|
||||
$(".prev_page").css("display", "none");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page").css("display", "none");
|
||||
$(".first_page").css("display", "none");
|
||||
$(".next_page_hide").css("display","flex");
|
||||
$(".prev_page_hide").css("display","flex");
|
||||
$(".next_page_hide").css("display","inline-flex");
|
||||
$(".prev_page_hide").css("display","inline-flex");
|
||||
}
|
||||
|
||||
List.dynamicContentPage(-10);
|
||||
@@ -160,15 +160,15 @@ var List = {
|
||||
List.empty = true;
|
||||
$("#wrapper").append("<span id='empty-channel-message'>The playlist is empty.</span>");
|
||||
if(!$("#pageButtons").length){
|
||||
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span><a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span></div>').insertAfter("#wrapper");
|
||||
$('<div id="pageButtons"><span class="first_page_hide btn-flat"><i class="material-icons">first_page</i></span><a class="first_page waves-effect waves-light btn-flat"><i class="material-icons">first_page</i></a><span class="prev_page_hide btn-flat"><i class="material-icons">navigate_before</i> prev</span><a class="prev_page waves-effect waves-light btn-flat"><i class="material-icons">navigate_before</i> prev</a> <span id="pageNumber">1</span> <a class="next_page waves-effect waves-light btn-flat">next <i class="material-icons">navigate_next</i></a><span class="next_page_hide btn-flat">next <i class="material-icons">navigate_next</i></span><a class="last_page waves-effect waves-light btn-flat"><i class="material-icons">last_page</i></a><span class="last_page_hide btn-flat"><i class="material-icons">last_page</i></span></div>').insertAfter("#wrapper");
|
||||
}
|
||||
$(".prev_page").css("display", "none");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page").css("display", "none");
|
||||
$(".last_page_hide").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "inline-flex");
|
||||
$(".first_page").css("display", "none");
|
||||
$(".next_page_hide").css("display","flex");
|
||||
$(".prev_page_hide").css("display","flex");
|
||||
$(".next_page_hide").css("display","inline-flex");
|
||||
$(".prev_page_hide").css("display","inline-flex");
|
||||
}
|
||||
$("#settings").css("visibility", "visible");
|
||||
$("#settings").css("opacity", "1");
|
||||
@@ -182,16 +182,16 @@ var List = {
|
||||
List.page = page;
|
||||
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
|
||||
if(List.page > 0 && $(".prev_page").css("display") == "none"){
|
||||
$(".prev_page").css("display", "flex");
|
||||
$(".prev_page").css("display", "inline-flex");
|
||||
$(".prev_page_hide").css("display", "none");
|
||||
$(".first_page").css("display", "flex");
|
||||
$(".first_page").css("display", "inline-flex");
|
||||
$(".first_page_hide").css("display", "none");
|
||||
}
|
||||
|
||||
if(List.page + List.can_fit >= $("#wrapper").children().length){
|
||||
$(".next_page_hide").css("display", "flex");
|
||||
$(".next_page_hide").css("display", "inline-flex");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page_hide").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "inline-flex");
|
||||
$(".last_page").css("display", "none");
|
||||
}
|
||||
|
||||
@@ -205,16 +205,16 @@ var List = {
|
||||
List.page = List.page + List.can_fit;
|
||||
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
|
||||
if(List.page > 0 && $(".prev_page").css("display") == "none"){
|
||||
$(".prev_page").css("display", "flex");
|
||||
$(".prev_page").css("display", "inline-flex");
|
||||
$(".prev_page_hide").css("display", "none");
|
||||
$(".first_page").css("display", "flex");
|
||||
$(".first_page").css("display", "inline-flex");
|
||||
$(".first_page_hide").css("display", "none");
|
||||
}
|
||||
|
||||
if(List.page + List.can_fit >= $("#wrapper").children().length){
|
||||
$(".next_page_hide").css("display", "flex");
|
||||
$(".next_page_hide").css("display", "inline-flex");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page_hide").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "inline-flex");
|
||||
$(".last_page").css("display", "none");
|
||||
}
|
||||
//$("#wrapper").scrollTop(0);
|
||||
@@ -224,16 +224,16 @@ var List = {
|
||||
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
|
||||
|
||||
if(List.page > 0 && $(".prev_page").css("display") == "none"){
|
||||
$(".prev_page").css("display", "flex");
|
||||
$(".prev_page").css("display", "inline-flex");
|
||||
$(".prev_page_hide").css("display", "none");
|
||||
$(".first_page").css("display", "flex");
|
||||
$(".first_page").css("display", "inline-flex");
|
||||
$(".first_page_hide").css("display", "none");
|
||||
}
|
||||
|
||||
if(List.page + List.can_fit >= $("#wrapper").children().length){
|
||||
$(".next_page_hide").css("display", "flex");
|
||||
$(".next_page_hide").css("display", "inline-flex");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page_hide").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "inline-flex");
|
||||
$(".last_page").css("display", "none");
|
||||
}
|
||||
} else if(way==-10){
|
||||
@@ -242,21 +242,21 @@ var List = {
|
||||
$("#wrapper").children().slice(List.page, List.page + List.can_fit).show();
|
||||
if(List.page == 0 && $(".prev_page").css("display") != "none"){
|
||||
$(".prev_page").css("display", "none");
|
||||
$(".prev_page_hide").css("display", "flex");
|
||||
$(".prev_page_hide").css("display", "inline-flex");
|
||||
$(".first_page").css("display", "none");
|
||||
$(".first_page_hide").css("display", "flex");
|
||||
$(".first_page_hide").css("display", "inline-flex");
|
||||
} else if($(".prev_page").css("display") == "none"){
|
||||
$(".prev_page_hide").css("display", "flex");
|
||||
$(".first_page_hide").css("display", "flex");
|
||||
$(".prev_page_hide").css("display", "inline-flex");
|
||||
$(".first_page_hide").css("display", "inline-flex");
|
||||
} else {
|
||||
$(".prev_page_hide").css("display", "none");
|
||||
$(".first_page_hide").css("display", "none");
|
||||
}
|
||||
if(List.page + List.can_fit < $("#wrapper").children().length){
|
||||
$(".next_page_hide").css("display", "none");
|
||||
$(".next_page").css("display", "flex");
|
||||
$(".next_page").css("display", "inline-flex");
|
||||
$(".last_page_hide").css("display", "none");
|
||||
$(".last_page").css("display", "flex");
|
||||
$(".last_page").css("display", "inline-flex");
|
||||
}
|
||||
} else {
|
||||
$("#wrapper").children().slice(List.page - List.can_fit, List.page).show();
|
||||
@@ -265,12 +265,12 @@ var List = {
|
||||
//$("#wrapper").scrollTop(0);
|
||||
if(List.page == 0 && $(".prev_page").css("display") != "none"){
|
||||
$(".prev_page").css("display", "none");
|
||||
$(".prev_page_hide").css("display", "flex");
|
||||
$(".prev_page_hide").css("display", "inline-flex");
|
||||
$(".first_page").css("display", "none");
|
||||
$(".first_page_hide").css("display", "flex");
|
||||
$(".first_page_hide").css("display", "inline-flex");
|
||||
} else if($(".prev_page").css("display") == "none"){
|
||||
$(".prev_page_hide").css("display", "flex");
|
||||
$(".first_page_hide").css("display", "flex");
|
||||
$(".prev_page_hide").css("display", "inline-flex");
|
||||
$(".first_page_hide").css("display", "inline-flex");
|
||||
} else {
|
||||
$(".prev_page_hide").css("display", "none");
|
||||
$(".first_page_hide").css("display", "none");
|
||||
@@ -278,9 +278,9 @@ var List = {
|
||||
|
||||
if(List.page + List.can_fit < $("#wrapper").children().length){
|
||||
$(".next_page_hide").css("display", "none");
|
||||
$(".next_page").css("display", "flex");
|
||||
$(".next_page").css("display", "inline-flex");
|
||||
$(".last_page_hide").css("display", "none");
|
||||
$(".last_page").css("display", "flex");
|
||||
$(".last_page").css("display", "inline-flex");
|
||||
}
|
||||
}
|
||||
$("#pageNumber").html((List.page / List.can_fit) + 1);
|
||||
@@ -303,12 +303,15 @@ var List = {
|
||||
}
|
||||
$("#empty-channel-message").remove();
|
||||
List.insertAtIndex(added, true);
|
||||
$($("#wrapper").children()[List.page + List.can_fit]).css("display", "none");
|
||||
if($("#wrapper").children().length > List.page + List.can_fit){
|
||||
$(".next_page_hide").css("display", "none");
|
||||
$(".next_page").removeClass("hide");
|
||||
$(".next_page").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "none");
|
||||
$(".next_page").css("display", "inline-flex");
|
||||
$(".last_page").css("display", "inline-flex");
|
||||
} else {
|
||||
$(".next_page_hide").css("display", "flex");
|
||||
$(".next_page_hide").css("display", "inline-flex");
|
||||
$(".next_page").css("display", "none");
|
||||
}
|
||||
}
|
||||
@@ -333,14 +336,14 @@ var List = {
|
||||
|
||||
if(List.page >= $("#wrapper").children().length - 1){
|
||||
List.dynamicContentPage(-1);
|
||||
$(".next_page_hide").css("display", "flex");
|
||||
$(".next_page_hide").css("display", "inline-flex");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page_hide").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "inline-flex");
|
||||
$(".last_page").css("display", "none");
|
||||
} else if(List.page + List.can_fit + 1 >= $("#wrapper").children().length - 1){
|
||||
$(".next_page_hide").css("display", "flex");
|
||||
$(".next_page_hide").css("display", "inline-flex");
|
||||
$(".next_page").css("display", "none");
|
||||
$(".last_page_hide").css("display", "flex");
|
||||
$(".last_page_hide").css("display", "inline-flex");
|
||||
$(".last_page").css("display", "none");
|
||||
}
|
||||
setTimeout(function()
|
||||
|
||||
@@ -660,6 +660,18 @@ $(document).on("click", "#offline-mode", function(e){
|
||||
|
||||
});
|
||||
|
||||
$(document).on("submit", "#thumbnail_form", function(e){
|
||||
e.preventDefault();
|
||||
socket.emit("suggest_thumbnail", {channel: chan, thumbnail: $("#chan_thumbnail").val(), adminpass: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase()))});
|
||||
$("#chan_thumbnail").val("");
|
||||
});
|
||||
|
||||
$(document).on("submit", "#description_form", function(e){
|
||||
e.preventDefault();
|
||||
socket.emit("suggest_description", {channel: chan, description: $("#chan_description").val(), adminpass: Crypt.crypt_pass(Crypt.get_pass(chan.toLowerCase()))});
|
||||
$("#chan_description").val("");
|
||||
});
|
||||
|
||||
$(document).on("click", "#playpause-overlay", function(){
|
||||
if($("#play-overlay").hasClass("hide")){
|
||||
Player.pauseVideo();
|
||||
@@ -1037,7 +1049,7 @@ $(document).on("click", ".playlist-link", function(e){
|
||||
$("#chatPlaylist").css("display", "none");
|
||||
$("#wrapper").css("display", "block");
|
||||
$("#suggestions").css("display", "none");
|
||||
$("#pageButtons").css("display", "block");
|
||||
$("#pageButtons").css("display", "flex");
|
||||
});
|
||||
|
||||
$(document).on("click", ".suggested-link", function(e){
|
||||
|
||||
@@ -97,7 +97,38 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="no-padding">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<a class="collapsible-header bold waves-effect">Channel Info
|
||||
<i class="material-icons">info</i>
|
||||
</a>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li>
|
||||
<form id="thumbnail_form" style="display:none;">
|
||||
<div class="input-field col s12">
|
||||
<input type="text" placeholder="Thumbnail" name="chan_thumbnail" id="chan_thumbnail" autocomplete="off" />
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<form id="description_form" style="display:none;">
|
||||
<div class="input-field col s12">
|
||||
<input type="text" placeholder="Description" name="chan_description" id="chan_description" autocomplete="off" />
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<div id="thumbnail_image">
|
||||
</div>
|
||||
<div id="description_area">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="no-padding remote-panel hide-on-small-only">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
|
||||
Reference in New Issue
Block a user