Added open in YouTube button on search, and setting start/endtime of YouTube video.

- Opening for further development with userset end/starttime

server/public/assets/css/style.css

@@ -1669,6 +1669,20 @@ nav ul li:hover, nav ul li.active {
     color:orange;
 }
 #add-many i{ line-height: 36px !important;}
+
+.open-externally {
+  float:right;
+  color:white;
+}
+
+.open-externally:hover {
+  color:orange;
+}
+
+.open-externally i {
+  line-height: 36px !important;
+}
+
 #results{
   background-color: rgba(0,0,0,0.8);
   position: absolute;

server/public/assets/js/listeners.js

@@ -757,8 +757,10 @@ function spotify_is_authenticated(bool){
 	}
 }
 
-window.enable_debug = enable_debug;
-window.disable_debug = disable_debug;
+window.zoff = {
+	enable_debug: enable_debug,
+	disable_debug: disable_debug
+}
 
 function seekToMove(e){
 	var pos_x = e.clientX - Math.ceil($("#seekToDuration").width() / 2) - 8;
@@ -1450,12 +1452,12 @@ $(window).resize(function(){
 
 $(document).on( "click", ".result-object", function(e){
 	var $html  = $(e.target);
+
 	var substr = $html.prop('outerHTML').substring(0,4);
-	if(substr != "<i c"){
+	if(substr != "<i c" && $html.prop('class').indexOf("waves-effect") == -1){
 		var id 		= $(this).attr("data-video-id");
 		var title 	= $(this).attr("data-video-title");
 		var length 	= $(this).attr("data-video-length");
-
 		Search.submitAndClose(id, title, length);
 	}
 });

server/public/assets/js/player.js

@@ -93,7 +93,7 @@ var Player = {
 
 					try{
 						if(Player.player.getVideoUrl().split('v=')[1] != video_id || chromecastAvailable){
-							Player.loadVideoById(video_id);
+							Player.loadVideoById(video_id, duration);
 							if(!Helper.mobilecheck()) {
 								Player.notifyUser(video_id, song_title);
 							}
@@ -120,7 +120,7 @@ var Player = {
 						}
 					}catch(e){
 						if(chromecastAvailable){
-							Player.loadVideoById(video_id);
+							Player.loadVideoById(video_id, duration);
 							Player.seekTo(seekTo);
 						}
 						if(!durationBegun && !chromecastAvailable) {
@@ -238,13 +238,13 @@ var Player = {
 		}
 	},
 
-	loadVideoById: function(id){
+	loadVideoById: function(id, this_duration){
 		if(chromecastAvailable){
 			castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", videoId: id});
 			chrome.cast.media.GenericMediaMetadata({metadataType: "GENERIC", title:song_title, image: 'https://img.youtube.com/vi/'+id+'/mqdefault.jpg'});
 			chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg');
 		} else {
-			Player.player.loadVideoById(id, 0);
+			Player.player.loadVideoById({'videoId': id, 'startSeconds': 0, 'endSeconds': this_duration});
 		}
 	},
 
@@ -279,7 +279,7 @@ var Player = {
 			chrome.cast.media.GenericMediaMetadata({metadataType: "GENERIC", title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg'});
 			chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
 		} else {
-			Player.loadVideoById(video_id);
+			Player.loadVideoById(video_id, duration);
 		}
 		List.channel_function({type:"song_change", time: time});
 	},
@@ -322,7 +322,7 @@ var Player = {
 				socket.emit("skip", {error: newState.data, id: video_id, pass: adminpass == "" ? "" : Crypt.crypt_pass(adminpass), channel: chan.toLowerCase(), userpass: embed ? '' : Crypt.crypt_pass(Crypt.get_userpass(chan.toLowerCase()))});
 
 			} else if(video_id !== undefined) {
-				Player.loadVideoById(video_id);
+				Player.loadVideoById(video_id, duration);
 			}
 		}
 	},
@@ -341,7 +341,7 @@ var Player = {
 				$("#player").css("opacity", "1");
 				$("#controls").css("opacity", "1");
 				$(".playlist").css("opacity", "1");
-				Player.loadVideoById(video_id);
+				Player.loadVideoById(video_id, duration);
 				if(autoplay && (!Helper.mobilecheck() || chromecastAvailable)) {
 					Player.playVideo();
 				}

server/public/assets/js/search.js

@@ -93,6 +93,7 @@ var Search = {
 										songs.find("#temp-results").attr("data-video-id", id);
 										songs.find("#temp-results").attr("data-video-title", enc_title);
 										songs.find("#temp-results").attr("data-video-length", secs);
+										songs.find(".open-externally").attr("href", "https://www.youtube.com/watch?v=" + id);
 										//$($(songs).find("div")[0]).attr("id", id)
 										//output += undefined;
 										if(songs.html() != undefined) {

server/public/layouts/channel.handlebars

@@ -73,10 +73,12 @@
 
                                   <div class="search-title truncate"></div>
                                   <span class="result_info"></span>
-
                               <div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
                                   <i class="material-icons">playlist_add</i>
                               </div>
+                              <a href="#" target="_blank" class="waves-effect waves-orange btn-flat open-externally" title="Open on YouTube">
+                                  <i class="material-icons">open_in_new</i>
+                            </a>
                           </div>
                       </div>
                     </div>