trying out youtube trailers

api/pages/homepage.php

@@ -75,6 +75,9 @@ function($) {
 <div class="container-fluid p-t-10" id="homepage-items">
     '.buildHomepage().'
 </div>
+<div id="open-youtube" class="white-popup mfp-with-anim mfp-hide">
+	<div class="col-md-8 col-md-offset-2 youtube-div">	</div>
+</div>
 <!-- /.container-fluid -->
 ';
 }

index.php

@@ -23,6 +23,7 @@
 	<link href="plugins/bower_components/dropzone-master/dist/dropzone.css" rel="stylesheet" type="text/css" />
 	<link href="plugins/bower_components/css-chart/css-chart.css" rel="stylesheet">
 	<link href="plugins/bower_components/calendar/dist/fullcalendar.css" rel="stylesheet" />
+	<link rel="stylesheet" href="https://cdn.plyr.io/3.1.0/plyr.css">
 	<link id="style" href="css/dark.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
 	<link href="css/organizr.css?v=<?php echo $GLOBALS['installedVersion']; ?>" rel="stylesheet">
 	<?php echo pluginFiles('css'); ?>
@@ -50,7 +51,7 @@
 		<!-- ============================================================== -->
 		<!-- Topbar header - style you can find in pages.scss -->
 		<!-- ============================================================== -->
-		<nav class="navbar navbar-default navbar-static-top m-b-0">
+		<nav class="navbar navbar-default navbar-static-top m-b-0 animated slideInDown">
 			<div class="navbar-header">
 				<div class="top-left-part hidden-xs p-r-10">
 					<!-- Logo -->
@@ -139,6 +140,8 @@
 	<script src="plugins/bower_components/dropzone-master/dist/dropzone.js"></script>
 	<script src="plugins/bower_components/owl.carousel/owl.carousel.min.js"></script>
 	<script src="plugins/bower_components/calendar/dist/fullcalendar.js"></script>
+	<script src="https://cdn.plyr.io/3.1.0/plyr.js"></script>
+	<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
 	<script src="js/functions.js?v=<?php echo $GLOBALS['installedVersion']; ?>"></script>
 	<script src="js/custom.js?v=<?php echo $GLOBALS['installedVersion']; ?>"></script>
 	<?php echo pluginFiles('js'); ?>

js/custom.js

@@ -315,6 +315,12 @@ function pageLoad(){
         beforeOpen: function() {
            this.st.mainClass = this.st.el.attr('data-effect');
            this.st.focus = '#request-input';
+       },
+       close: function() {
+          if(typeof player !== 'undefined'){
+              console.log('STOP STOP STOP')
+              player.destroy();
+          }
         }
       },
       midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.

js/functions.js

@@ -2171,6 +2171,7 @@ function buildRequestItem(array, extra=null){
 										<h2 class="m-b-0 font-medium pull-right text-right">
 											`+v.title+`<br>
 											<small class="m-t-0 text-white">`+user+`</small><br>
+											`+buildYoutubeLink(v.title+' '+v.type)+`
 										</h2>
 									</div>
 									<div class="genre-list p-10">`+status+`</div>
@@ -2817,6 +2818,7 @@ function buildDownloader(array, source){
 	` : '';
 }
 function buildMetadata(array, source){
+	console.log(array);
 	var metadata = '';
 	var genres = '';
 	var actors = '';
@@ -2849,7 +2851,8 @@ function buildMetadata(array, source){
 	                <h2 class="m-b-0 font-medium pull-right text-right">
 						`+v.title+`<br>
 						<small class="m-t-0 text-white">`+v.metadata.tagline+`</small><br>
-						<a class="openTab" data-tab-name="`+v.tabName+`" data-type="`+v.type+`" data-open-tab="`+v.openTab+`" data-url="`+v.address+`" href="javascript:void(0);"><i class="mdi mdi-`+source+` mdi-36px text-`+source+`"></i></a>
+						<a class="openTab" data-tab-name="`+v.tabName+`" data-type="`+v.type+`" data-open-tab="`+v.openTab+`" data-url="`+v.address+`" href="javascript:void(0);"><i class="mdi mdi-`+source+` mdi-36px text-`+source+`"></i></a><br>
+						`+buildYoutubeLink(v.title+' '+v.metadata.year+' '+v.type)+`
 					</h2>
 	            </div>
 				<div class="genre-list p-10">`+genres+`</div>
@@ -2872,6 +2875,15 @@ function buildMetadata(array, source){
 	});
 	return metadata;
 }
+function buildYoutubeLink(title){
+	if(title){
+		var str = createRandomString(10);
+		return `
+		<a href="javascript:void(0);"><i class="mdi mdi-youtube-play mdi-36px text-danger" onclick="youtubeCheck('`+escape(title)+`','`+str+`')"></i></a>
+		<a class="hidden inline-popups `+str+`" href="#open-youtube" data-effect="mfp-zoom-out"></a>
+		`;
+	}
+}
 function buildCalendarMetadata(array){
 	var metadata = '';
 	var genres = '';
@@ -2898,6 +2910,7 @@ function buildCalendarMetadata(array){
 	                <h2 class="m-b-0 font-medium pull-right text-right">
 						`+array.topTitle+`<br>
 						<small class="m-t-0 text-white">`+array.bottomTitle+`</small><br>
+						`+buildYoutubeLink(array.topTitle)+`
 					</h2>
 	            </div>
 				<div class="genre-list p-10">`+genres+`</div>
@@ -3259,6 +3272,45 @@ function ombiActions(id,action,type){
 	ajaxloader();
 
 }
+//youtube search
+function youtubeSearch(searchQuery) {
+	return $.ajax({
+		url: "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+searchQuery+"+offcial+trailer&part=snippet&maxResults=1&type=video&videoDuration=short&key=AIzaSyD-8SHutB60GCcSM8q_Fle38rJUV7ujd8k",
+	});
+}
+function youtubeCheck(title,link){
+	youtubeSearch(title).success(function(data) {
+		$('.inline-popups').magnificPopup({
+	      removalDelay: 500, //delay removal by X to allow out-animation
+	      closeOnBgClick: true,
+	      //closeOnContentClick: true,
+	      callbacks: {
+	        beforeOpen: function() {
+	           this.st.mainClass = this.st.el.attr('data-effect');
+	           this.st.focus = '#request-input';
+	       },
+	       close: function() {
+	          if(typeof player !== 'undefined'){
+	              console.log('STOP STOP STOP')
+	              player.destroy();
+	          }
+	        }
+	      },
+	      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
+	    });
+		var id = data.items["0"].id.videoId;
+		var div = `
+		<div id="player-`+link+`" data-plyr-provider="youtube" data-plyr-embed-id="`+id+`"></div>
+		<div class="clearfix"></div>
+		`;
+		$('.youtube-div').html(div);
+		$('.'+link).trigger('click');
+		player = new Plyr('#player-'+link);
+		console.log(data.items["0"].id.videoId);
+	}).fail(function(xhr) {
+		console.error("Organizr Function: YouTube Connection Failed");
+	});
+}
 //request search
 function requestSearch(title) {
 	return $.ajax({

plugins/bower_components/calendar/dist/fullcalendar.js

@@ -6662,6 +6662,13 @@ DayGrid.mixin({
 	      callbacks: {
 	        beforeOpen: function() {
 	           this.st.mainClass = this.st.el.attr('data-effect');
+	           this.st.focus = '#request-input';
+	       },
+	       close: function() {
+	          if(typeof player !== 'undefined'){
+	              console.log('STOP STOP STOP')
+	              player.destroy();
+	          }
 	        }
 	      },
 	      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.