mirror of
https://github.com/KevinMidboe/zoff.git
synced 2026-01-10 19:45:34 +00:00
KasperRT
14
gulpfile.js
14
gulpfile.js
@@ -4,7 +4,7 @@ var gulp = require('gulp'),
|
||||
concat = require('gulp-concat');
|
||||
|
||||
gulp.task('js', function () {
|
||||
gulp.src(['static/js/*.js', '!static/js/nochan*', '!static/js/remotecontroller.js'])
|
||||
gulp.src(['static/js/*.js', '!static/js/embed*', '!static/js/nochan*', '!static/js/remotecontroller.js'])
|
||||
.pipe(uglify({
|
||||
mangle: true,
|
||||
compress: true,
|
||||
@@ -14,6 +14,17 @@ gulp.task('js', function () {
|
||||
.pipe(gulp.dest('static/dist'));
|
||||
});
|
||||
|
||||
gulp.task('embed', function () {
|
||||
gulp.src(['static/js/youtube.js', 'static/js/helpers.js', 'static/js/playercontrols.js', 'static/js/list.js', 'static/js/embed.js', '!static/js/nochan*', '!static/js/remotecontroller.js'])
|
||||
.pipe(uglify({
|
||||
mangle: true,
|
||||
compress: true,
|
||||
enclose: true
|
||||
}))
|
||||
.pipe(concat('embed.min.js'))
|
||||
.pipe(gulp.dest('static/dist'));
|
||||
});
|
||||
|
||||
gulp.task('nochan', function () {
|
||||
gulp.src(['static/js/nochan.js'])
|
||||
.pipe(uglify({
|
||||
@@ -38,6 +49,7 @@ gulp.task('remotecontroller', function () {
|
||||
|
||||
gulp.task('default', function(){
|
||||
gulp.watch('static/js/*.js', ['js']);
|
||||
gulp.watch('static/js/*.js', ['embed']);
|
||||
gulp.watch('static/js/nochan.js', ['nochan']);
|
||||
gulp.watch('static/js/remotecontroller.js', ['remotecontroller']);
|
||||
});
|
||||
10
index.php
10
index.php
@@ -152,6 +152,16 @@
|
||||
<p>Also, whenever you're logged in, you'll have two tabs in the top of the playlist thats called "Playlist" and "Suggested". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="embed" class="modal">
|
||||
<div class="modal-header-fixed">
|
||||
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<h4>Embed code (in beta)</h4>
|
||||
<p>Copy the code in the textarea, and paste on your website.</p>
|
||||
<textarea id="embed-area"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="channel-load" class="progress">
|
||||
<div class="indeterminate" id="channel-load-move"></div>
|
||||
|
||||
@@ -144,6 +144,16 @@
|
||||
<p>Also, whenever you're logged in, you'll have two tabs in the top of the playlist thats called "Playlist" and "Suggested". The playlist obviously shows the playlist. But the suggested tab, shows 5 songs that YouTube recommends based on the current song. There might also be user recommended songs. To add any of these, just click them as you'd click a song to vote.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="embed" class="modal">
|
||||
<div class="modal-header-fixed">
|
||||
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<h4>Embed code (in beta)</h4>
|
||||
<p>Copy the code in the textarea, and paste on your website.</p>
|
||||
<textarea id="embed-area"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div id="channel-load" class="progress" style="top:52px;">
|
||||
<div class="indeterminate" id="channel-load-move"></div>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
Enjoy!
|
||||
</p>
|
||||
<a class="modal-trigger waves-effect help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()">Help, how does this work?!</a>
|
||||
<a class="modal-trigger waves-effect help-button-footer" id="embed-button" title="Want to embed? (In beta)" onclick="$('#embed').openModal()">Embed this channel</a>
|
||||
<p id="latest-commit" class="grey-text text-lighten-4 truncate"></p>
|
||||
</div>
|
||||
<div class="col l4 offset-l2 s12 valign-wrapper">
|
||||
|
||||
235
static/css/embed.css
Normal file
235
static/css/embed.css
Normal file
@@ -0,0 +1,235 @@
|
||||
.card-image{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-position: center;
|
||||
background-size: 180%;
|
||||
}
|
||||
|
||||
.card{
|
||||
cursor:pointer;
|
||||
background-color: grey !important;
|
||||
}
|
||||
|
||||
|
||||
#list-song-html {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#song-title{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.list-image, .list-suggested-image{
|
||||
width: 34%;
|
||||
height: 66px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list-image:after {
|
||||
font-family: "Material-Design-Icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e686";/*"\e800";*/
|
||||
color:white;
|
||||
font-size:65px;
|
||||
position:absolute;
|
||||
width:100%; height:100%;
|
||||
top:0; left:0;
|
||||
background:rgba(0,0,0,0.8);
|
||||
opacity:0;
|
||||
transition: all .1s ease;
|
||||
}
|
||||
|
||||
.list-suggested-image:after {
|
||||
font-family: "Material-Design-Icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e625";/*"\e800";*/
|
||||
color:white;
|
||||
font-size:65px;
|
||||
position:absolute;
|
||||
width:100%; height:100%;
|
||||
top:0; left:0;
|
||||
background:rgba(0,0,0,0.8);
|
||||
opacity:0;
|
||||
transition: all .1s ease;
|
||||
}
|
||||
|
||||
.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.vote-span{
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0 10px;
|
||||
color:white !important;
|
||||
}
|
||||
|
||||
.list-song{
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
color:white;
|
||||
font:12px Arial,sans-serif;
|
||||
-webkit-transition:height .3s;
|
||||
-moz-transition:height .3s;
|
||||
-o-transition:height .3s;
|
||||
transition:height .3s;
|
||||
height:66px;
|
||||
}
|
||||
.list-song .card-content{padding:0;}
|
||||
.list-title{
|
||||
font-size:13px !important;
|
||||
display:block;
|
||||
color:white;font-size:1em;
|
||||
text-align:left;
|
||||
padding: 0 10px 0 10px;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
.card-image{cursor:pointer}
|
||||
.card{
|
||||
margin:5px 0 5px 0 !important;
|
||||
}
|
||||
.card:hover{
|
||||
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
#playlist{
|
||||
background-color:grey;
|
||||
height:332px;
|
||||
}
|
||||
|
||||
.progress{background-color:rgba(0,0,0,0) !important;}
|
||||
|
||||
.indeterminate {
|
||||
background-color:white !important;
|
||||
}
|
||||
|
||||
#controls
|
||||
{
|
||||
opacity:0;
|
||||
height:32px;
|
||||
background-color:grey;
|
||||
width:300px;
|
||||
color:white;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
#playpause, #duration, #volume-button
|
||||
{
|
||||
float:left;
|
||||
color:white;
|
||||
}
|
||||
|
||||
#playpause, #volume-button
|
||||
{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
#playpause:hover, #volume-button:hover, #fullscreen:hover
|
||||
{
|
||||
color:rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
#fullscreen
|
||||
{
|
||||
float:right;
|
||||
color:white;
|
||||
margin-right:15px;
|
||||
}
|
||||
|
||||
#duration, #viewers
|
||||
{
|
||||
margin-top:5px;
|
||||
font-family:"Roboto", sans-serif;
|
||||
font-weight:300;
|
||||
margin-left:15px;
|
||||
}
|
||||
|
||||
#viewers{
|
||||
float: right;
|
||||
}
|
||||
|
||||
#play, #pause, #volume-button, #fullscreen
|
||||
{
|
||||
font-size:20px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#volume {
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
margin: 13px auto;
|
||||
height:5px;
|
||||
width: 75px;
|
||||
/*background-color:rgba(0, 0, 0, 0.5);*/
|
||||
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
}
|
||||
|
||||
#volume .ui-slider-range-min {
|
||||
height:5px;
|
||||
width: 75px;
|
||||
position: absolute;
|
||||
background-color:rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
}
|
||||
|
||||
#volume .ui-slider-handle {
|
||||
height:15px;
|
||||
width:5px;
|
||||
background:#fff 50% 50% repeat-x;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
display: none;
|
||||
margin-left:-2.5px;
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
.ui-slider-handle
|
||||
{
|
||||
margin-top:-5px;
|
||||
}
|
||||
|
||||
.play
|
||||
{
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.pause
|
||||
{
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.hide
|
||||
{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
#bar
|
||||
{
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
}
|
||||
@@ -10,6 +10,10 @@
|
||||
|
||||
.snow{-webkit-filter:brightness(100%);-moz-filter:brightness(100%);-o-filter:brightness(100%);filter:brightness(100%);width:5px; height:5px; background-color:white;z-index:1000000;pointer-events:none;position:absolute;border:1px solid white;border-radius:100px;}
|
||||
|
||||
#embed-button{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* GLOBAL STYLES */
|
||||
|
||||
#playbar{
|
||||
|
||||
1
static/dist/embed.min.js
vendored
Normal file
1
static/dist/embed.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
static/dist/main.min.js
vendored
Normal file → Executable file
4
static/dist/main.min.js
vendored
Normal file → Executable file
File diff suppressed because one or more lines are too long
@@ -45,7 +45,6 @@ var Chat = {
|
||||
|
||||
setup_chat_listener: function(channel)
|
||||
{
|
||||
document.getElementsByClassName("chat-tab")[0].innerHTML = channel;
|
||||
socket.on("chat", function(data)
|
||||
{
|
||||
if($("#chat-bar").position()["left"] != 0)
|
||||
|
||||
51
static/js/embed.js
Normal file
51
static/js/embed.js
Normal file
@@ -0,0 +1,51 @@
|
||||
|
||||
var song_title = "";
|
||||
var paused = false;
|
||||
var player_ready = false;
|
||||
var list_html = $("#list-song-html").html();
|
||||
var w_p = true;
|
||||
var lazy_load = false;
|
||||
var embed = true;
|
||||
var vol = 100;
|
||||
var adminpass = "";
|
||||
|
||||
var seekTo;
|
||||
var socket;
|
||||
var video_id;
|
||||
var previous_video_id;
|
||||
var chan = ($("#zoffchannel").html()).toLowerCase();
|
||||
|
||||
var connection_options = {
|
||||
'sync disconnect on unload':true,
|
||||
'secure': true,
|
||||
'force new connection': true
|
||||
};
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$("head").append('<link type="text/css" rel="stylesheet" href="/static/css/embed.css" />');
|
||||
$("head").append('<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" />');
|
||||
|
||||
if(window.location.hostname != "zoff.no") add = "https://zoff.no";
|
||||
else add = "localhost";
|
||||
socket = io.connect(''+add+':8880', connection_options);
|
||||
|
||||
socket.on("get_list", function(){
|
||||
setTimeout(function(){socket.emit('list', chan.toLowerCase())},1000);
|
||||
});
|
||||
|
||||
Youtube.setup_youtube_listener(chan);
|
||||
List.channel_listener();
|
||||
|
||||
|
||||
window.onYouTubeIframeAPIReady = Youtube.onYouTubeIframeAPIReady;
|
||||
|
||||
Youtube.loadPlayer();
|
||||
|
||||
Playercontrols.initSlider();
|
||||
});
|
||||
|
||||
$(document).on( "click", ".vote-container", function(e){
|
||||
var id = $(this).attr("data-video-id");
|
||||
List.vote(id, "pos");
|
||||
});
|
||||
@@ -52,7 +52,7 @@ var Hostcontroller = {
|
||||
ytplayer.pauseVideo()
|
||||
else if(arr[0] == "play")
|
||||
ytplayer.playVideo();
|
||||
else if(arr[0] == "skip")
|
||||
else if(arr[0] == "skip")
|
||||
List.skip();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -30,17 +30,6 @@ var List = {
|
||||
}
|
||||
},
|
||||
|
||||
skipping_listener: function(){
|
||||
socket.on("skipping", function(obj)
|
||||
{
|
||||
document.getElementById("pBar").innerHTML = "Vote registrated! "+obj[0]+" of "+obj[1]+" has skipped. "+(Math.ceil(obj[1]/2))+" or more is needed!";
|
||||
$("#pBar").addClass("opacityFull");
|
||||
setTimeout(function(){
|
||||
$("#pBar").removeClass("opacityFull");
|
||||
},1500);
|
||||
});
|
||||
},
|
||||
|
||||
populate_list: function(msg)
|
||||
{
|
||||
|
||||
@@ -51,12 +40,15 @@ var List = {
|
||||
|
||||
$.each(full_playlist, function(j, current_song){
|
||||
if(!current_song.now_playing){ //check that the song isnt playing
|
||||
$("#wrapper").append(List.generateSong(current_song, false, true, true));
|
||||
$("#wrapper").append(List.generateSong(current_song, false, lazy_load, true));
|
||||
}
|
||||
});
|
||||
|
||||
if(window.mobilecheck()) $(".list-image").lazyload({});
|
||||
else $(".list-image").lazyload({container: $("#wrapper")}).removeClass("lazy");
|
||||
|
||||
if(lazy_load){
|
||||
if(window.mobilecheck()) $(".list-image").lazyload({});
|
||||
else $(".list-image").lazyload({container: $("#wrapper")}).removeClass("lazy");
|
||||
}
|
||||
$("#settings").css("visibility", "visible");
|
||||
$("#settings").css("opacity", "1");
|
||||
$("#wrapper").css("opacity", "1");
|
||||
|
||||
@@ -24,6 +24,9 @@ var SAMPLE_RATE = 6000; // 6 seconds
|
||||
var lastSample = Date.now();
|
||||
var began = false;
|
||||
var i = -1;
|
||||
var lazy_load = true;
|
||||
var embed = false;
|
||||
var embed_code = '<div id="song-title"></div><div id="container" style="display:inline-flex;"><div id="player-container"><div id="player" style="width:300px;height:300px;"></div><div id="controls" class="noselect"><div id="playpause"><i id="play" class="mdi-av-play-arrow hide"></i><i id="pause" class="mdi-av-pause"></i></div><div id="duration">00:00 / 00:00</div><div id="fullscreen"><i class="mdi-navigation-fullscreen"></i></div><div id="volume-button"><i id="v-mute" class="mdi-av-volume-off"></i><i id="v-low" class="mdi-av-volume-mute"></i><i id="v-medium" class="mdi-av-volume-down"></i><i id="v-full" class="mdi-av-volume-up"></i></div><div id="volume"></div><div id="viewers"></div><div id="bar"></div></div></div><div id="playlist"><div id="wrapper" style="height:332px;width:300px;overflow-y:scroll;"><div id="preloader" class="progress channel_preloader"><div class="indeterminate"></div></div><div id="list-song-html"><div id="list-song" class="card left-align list-song"><span class="clickable vote-container" title="Vote!"><a class="clickable center-align votebg"><div class="lazy card-image cardbg list-image" style=""></div></a><span class="card-content"><span class="flow-text truncate list-title"></span><span class="vote-span"><span class="list-votes"></span><span class="highlighted vote-text"> votes</span></span></span></span></div></div></div></div></div><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script><script type="text/javascript" src="//cdn.socket.io/socket.io-1.3.5.js"></script><script src="static/dist/embed.min.js"></script>';
|
||||
|
||||
var id;
|
||||
var full_playlist;
|
||||
@@ -81,7 +84,6 @@ function init(){
|
||||
Youtube.setup_youtube_listener(chan);
|
||||
Admin.admin_listener();
|
||||
List.channel_listener();
|
||||
List.skipping_listener();
|
||||
|
||||
$('ul.tabs').tabs();
|
||||
$("#settings").sideNav({
|
||||
@@ -153,7 +155,7 @@ function init(){
|
||||
Helper.sample();
|
||||
}
|
||||
|
||||
$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function() { });
|
||||
$( "#results" ).hover( function() { $("div.result").removeClass("hoverResults"); i = 0; }, function(){ });
|
||||
$("#search").focus();
|
||||
|
||||
$('#base').bind("keyup keypress", function(e) {
|
||||
@@ -188,7 +190,9 @@ function init(){
|
||||
}
|
||||
}, 1);
|
||||
}, 1000);
|
||||
|
||||
|
||||
$("#embed-button").css("display", "inline-block");
|
||||
$("#embed-area").val('<div id="zoffchannel">' + chan.toLowerCase() + '</div>' + embed_code);
|
||||
|
||||
}
|
||||
|
||||
@@ -374,6 +378,10 @@ $(document).on('click', '#toast-container', function(){
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", "#embed-area", function(){
|
||||
this.select();
|
||||
});
|
||||
|
||||
$(document).on("click", ".brand-logo-navigate", function(e){
|
||||
e.preventDefault();
|
||||
|
||||
@@ -398,6 +406,7 @@ function onepage_load(){
|
||||
Admin.display_logged_out();
|
||||
Admin.beginning = true;
|
||||
chan = "";
|
||||
$("#embed-button").css("display", "none");
|
||||
|
||||
socket.removeAllListeners();
|
||||
|
||||
|
||||
@@ -20,7 +20,9 @@ var Playercontrols = {
|
||||
|
||||
initSlider: function()
|
||||
{
|
||||
vol = (Crypt.get_volume());
|
||||
try{
|
||||
vol = (Crypt.get_volume());
|
||||
}catch(e){}
|
||||
$("#volume").slider({
|
||||
min: 0,
|
||||
max: 100,
|
||||
@@ -31,7 +33,7 @@ var Playercontrols = {
|
||||
|
||||
Playercontrols.setVolume(ui.value);
|
||||
//localStorage.setItem("volume", ui.value);
|
||||
Crypt.set_volume(ui.value);
|
||||
try{Crypt.set_volume(ui.value);}catch(e){}
|
||||
}
|
||||
});
|
||||
Playercontrols.choose_button(vol, false);
|
||||
|
||||
@@ -11,9 +11,7 @@ var Youtube = {
|
||||
socket.on("np", function(obj)
|
||||
{
|
||||
Youtube.loaded = false;
|
||||
try{
|
||||
if(video_id != undefined && Youtube.ytplayer !== undefined) Youtube.before_load = Youtube.ytplayer.getVideoUrl();
|
||||
}catch(e){}
|
||||
|
||||
if(obj[0].length == 0){
|
||||
|
||||
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
|
||||
@@ -40,7 +38,9 @@ var Youtube = {
|
||||
|
||||
$("#player_overlay").addClass("hide");
|
||||
|
||||
Suggestions.fetchYoutubeSuggests(video_id);
|
||||
try{
|
||||
Suggestions.fetchYoutubeSuggests(video_id);
|
||||
}catch(e){}
|
||||
Youtube.getTitle(song_title, viewers);
|
||||
Youtube.setBGimage(video_id);
|
||||
//if(player_ready && !window.mobilecheck())
|
||||
@@ -182,7 +182,7 @@ var Youtube = {
|
||||
Playercontrols.initYoutubeControls(Youtube.ytplayer);
|
||||
Playercontrols.initSlider();
|
||||
Youtube.ytplayer.setVolume(Crypt.get_volume());
|
||||
}catch(e){window.location.reload();};
|
||||
}catch(e){}
|
||||
},
|
||||
|
||||
readyLooks: function()
|
||||
@@ -191,7 +191,8 @@ var Youtube = {
|
||||
},
|
||||
|
||||
setBGimage: function(id){
|
||||
if(id !== undefined)
|
||||
|
||||
if(id !== undefined && !embed)
|
||||
{
|
||||
var img = new Image();
|
||||
img.onload = function ()
|
||||
@@ -252,7 +253,6 @@ var Youtube = {
|
||||
|
||||
durationSetter: function()
|
||||
{
|
||||
//console.log(Youtube.stopInterval);
|
||||
try{
|
||||
duration = Youtube.ytplayer.getDuration();
|
||||
}catch(e){duration = 0};
|
||||
|
||||
Reference in New Issue
Block a user