Merge pull request #146 from zoff-music/emb

Emb

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']);
 });

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>

php/channel.php

@@ -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>

php/footer.php

@@ -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">

static/css/embed.css

@@ -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);
+}

static/css/style.css

@@ -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{

static/js/chat.js

@@ -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)

static/js/embed.js

@@ -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");
+});

static/js/hostcontroller.js

@@ -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();
           }
         });

static/js/list.js

@@ -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");

static/js/listeners.js

@@ -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">&nbsp;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();
 

static/js/playercontrols.js

@@ -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);

static/js/youtube.js

@@ -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};