Add an option to play Livestreams in fullscreen

Also the gallery now have an option for Fullscreen in IFrame

plugin/Gallery/Gallery.php

@@ -34,7 +34,15 @@ class Gallery extends PluginAbstract {
         // preload image
         $js = "<script>var img1 = new Image();img1.src=\"{$global['webSiteRootURL']}view/img/video-placeholder-gray.png\";</script>";
         $css = '<link href="' . $global['webSiteRootURL'] . 'plugin/Gallery/style.css?'.(filemtime($global['systemRootPath'].'plugin/Gallery/style.css')).'" rel="stylesheet" type="text/css"/>';
-        if(!empty($obj->playVideoOnFullscreen) && (!empty($_GET['videoName']) || !empty($_GET['evideo']))){
+        
+        if(!empty($obj->playVideoOnFullscreenOnIframe)){
+            if((isVideo() && !isSerie()) || isEmbed()){
+                $css .= '<link href="' . $global['webSiteRootURL'] . 'plugin/YouPHPFlix2/view/css/fullscreen.css" rel="stylesheet" type="text/css"/>';
+                $css .= '<style>.container-fluid {overflow: visible;padding: 0;}#mvideo{padding: 0 !important; position: absolute; top: 0;}</style>';
+                $css .= '<style>body.fullScreen{overflow: hidden;}</style>';
+            }
+            $js .= '<script>var playVideoOnFullscreen = true</script>';
+        }else if(!empty($obj->playVideoOnFullscreen) && (!empty($_GET['videoName']) || !empty($_GET['evideo']))){
             $css .= '<link href="' . $global['webSiteRootURL'] . 'plugin/Gallery/fullscreen.css" rel="stylesheet" type="text/css"/>';
         }
         if(!empty($obj->playVideoOnFullscreen)){
@@ -85,6 +93,7 @@ class Gallery extends PluginAbstract {
         $obj->searchOnChannels = true;
         $obj->searchOnChannelsRowCount = 12;
         $obj->playVideoOnFullscreen = false;
+        $obj->playVideoOnFullscreenOnIframe = false;
         $obj->playVideoOnBrowserFullscreen = false;
         $obj->filterUserChannel = false;
         $obj->screenColsLarge = 6;
@@ -113,6 +122,11 @@ class Gallery extends PluginAbstract {
         global $global;
         
         $js = '';
+        if(!empty($obj->playVideoOnFullscreenOnIframe)){
+            $js = '<script src="' . $global['webSiteRootURL'] . 'plugin/YouPHPFlix2/view/js/fullscreen.js"></script>';
+            $js .= '<script>$(function () { if(typeof linksToFullscreen === \'function\'){ linksToFullscreen(\'a.galleryLink\'); } });</script>';
+            
+        }else
         if(!empty($obj->playVideoOnFullscreen)){
             $js = '<script src="' . $global['webSiteRootURL'] . 'plugin/Gallery/fullscreen.js"></script>';
         }

plugin/Gallery/fullscreen.css

@@ -4,7 +4,7 @@ body{
     overflow: hidden;
 }
 #videoContainer{
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     height: 100vh;

plugin/Gallery/functions.php

@@ -151,7 +151,9 @@ function createGallerySection($videos, $crc = "", $get = array(), $ignoreAds = f
         $colsClass = "col-lg-".(12 / $obj->screenColsLarge)." col-md-".(12 / $obj->screenColsMedium)." col-sm-".(12 / $obj->screenColsSmall)." col-xs-".(12 / $obj->screenColsXSmall);
         ?>
         <div class=" <?php echo $colsClass; ?> galleryVideo thumbsImage fixPadding" style="z-index: <?php echo $zindex--; ?>; min-height: 175px;" itemscope itemtype="http://schema.org/VideoObject">
-            <a class="galleryLink" videos_id="<?php echo $value['id']; ?>" href="<?php echo Video::getLink($value['id'], $value['clean_title'], false, $getCN); ?>" title="<?php echo $value['title']; ?>">
+            <a class="galleryLink" videos_id="<?php echo $value['id']; ?>" 
+               href="<?php echo Video::getLink($value['id'], $value['clean_title'], false, $getCN); ?>"  
+               embed="<?php echo Video::getLink($value['id'], $value['clean_title'], true, $getCN); ?>" title="<?php echo $value['title']; ?>">
                 <?php
                 @$timesG[__LINE__] += microtime(true) - $startG;
                 $startG = microtime(true);
@@ -237,7 +239,9 @@ function createGallerySection($videos, $crc = "", $get = array(), $ignoreAds = f
                 }
                 ?>
             </a>
-            <a class="h6 galleryLink" videos_id="<?php echo $value['id']; ?>" href="<?php echo Video::getLink($value['id'], $value['clean_title'], false, $getCN); ?>" title="<?php echo $value['title']; ?>">
+            <a class="h6 galleryLink" videos_id="<?php echo $value['id']; ?>" 
+               href="<?php echo Video::getLink($value['id'], $value['clean_title'], false, $getCN); ?>"  
+               embed="<?php echo Video::getLink($value['id'], $value['clean_title'], true, $getCN); ?>" title="<?php echo $value['title']; ?>">
                 <h2><?php echo $value['title']; ?></h2>
             </a>
 

plugin/Gallery/view/BigVideo.php

@@ -67,7 +67,10 @@ if ($obj->BigVideo && empty($_GET['showOnly'])) {
                             <div class="clear clearfix">
                                 <div class="row thumbsImage">
                                     <div class="<?php echo $colClass1; ?> galleryVideo">
-                                        <a class="galleryLink" videos_id="<?php echo $videoRow['id']; ?>" href="<?php echo Video::getLink($videoRow['id'], $videoRow['clean_title'], false, $get); ?>" title="<?php echo $videoRow['title']; ?>" style="">
+                                        <a class="galleryLink" videos_id="<?php echo $videoRow['id']; ?>" 
+                                           href="<?php echo Video::getLink($videoRow['id'], $videoRow['clean_title'], false, $get); ?>" 
+                                           embed="<?php echo Video::getLink($videoRow['id'], $videoRow['clean_title'], true, $get); ?>" 
+                                           title="<?php echo $videoRow['title']; ?>" style="">
                                             <?php
                                             $images = Video::getImageFromFilename($videoRow['filename'], $videoRow['type']);
                                             $imgGif = $images->thumbsGif;

plugin/Gallery/view/mainArea.php

@@ -116,9 +116,11 @@
                     $container.on('append.infiniteScroll', function (event, response, path, items) {
                         //console.log('Append page: ' + path);
                         lazyImage();
+                        if(typeof linksToFullscreen === 'function'){ linksToFullscreen('a.galleryLink');}
                     });
                     setTimeout(function () {
                         lazyImage();
+                        if(typeof linksToFullscreen === 'function'){ linksToFullscreen('a.galleryLink');}
                     }, 500);
                 });
             </script>

plugin/Live/view/menuRight.php

@@ -143,9 +143,9 @@ if (empty($obj->doNotShowGoLiveButton) && User::canStream()) {
             $liveLi.find('.liveUsersViews').text(views);
             $liveLi.find('.liveUsersOnline').addClass("liveUsersOnline_" + key);
             $liveLi.find('.liveUsersViews').addClass("liveUsersViews_" + key);
-            $liveLi.find('.thumbsJPG').attr("src", "<?php echo $global['webSiteRootURL']; ?>plugin/Live/getImage.php?live_servers_id=" + live_servers_id + "&u=" + user + "&format=jpg" + playlists_id_live+'&'+Math.random());
+            $liveLi.find('.thumbsJPG').attr("src", "<?php echo $global['webSiteRootURL']; ?>plugin/Live/getImage.php?live_servers_id=" + live_servers_id + "&u=" + user + "&format=jpg" + playlists_id_live + '&' + Math.random());
             if (!disableGif) {
-                $liveLi.find('.thumbsGIF').attr("src", "<?php echo $global['webSiteRootURL']; ?>plugin/Live/getImage.php?live_servers_id=" + live_servers_id + "&u=" + user + "&format=gif" + playlists_id_live+'&'+Math.random());
+                $liveLi.find('.thumbsGIF').attr("src", "<?php echo $global['webSiteRootURL']; ?>plugin/Live/getImage.php?live_servers_id=" + live_servers_id + "&u=" + user + "&format=gif" + playlists_id_live + '&' + Math.random());
             } else {
                 $liveLi.find('.thumbsGIF').remove();
             }
@@ -179,6 +179,9 @@ if (empty($obj->doNotShowGoLiveButton) && User::canStream()) {
                         $('#availableLiveStream').removeClass('notfound');
                     }
                     $('.onlineApplications').text(response.total);
+                    if(typeof linksToFullscreen === 'function'){
+                        linksToFullscreen('a.liveLink');
+                    }
                 }
                 if (recurrentCall) {
                     setTimeout(function () {
@@ -260,7 +263,7 @@ if (isLive()) {
             key = application.key;
             live_servers_id = live_servers_id;
             isPrivate = application.isPrivate;
-
+            
             createLiveItem(href, title, name, photo, false, online, views, key, isPrivate);
 <?php
 if (empty($obj->doNotShowLiveOnVideosList)) {
@@ -269,6 +272,10 @@ if (empty($obj->doNotShowLiveOnVideosList)) {
     <?php
 }
 ?>
+            
+            if(typeof linksToFullscreen === 'function'){
+                linksToFullscreen('a.videoLink');
+            }
         }
     }
 

plugin/YouPHPFlix2/view/css/fullscreen.css

@@ -22,4 +22,4 @@ body{
 
 .firstC{
     position: absolute;
-}
+}

plugin/YouPHPFlix2/view/js/fullscreen.js

@@ -1,41 +1,65 @@
-$(document).ready(function () {   
+$(document).ready(function () {
-    if(playVideoOnFullscreen){
+    linksToFullscreen('a.canWatchPlayButton');
-        $('a.canWatchPlayButton').click(function (event) {
-            event.preventDefault();
-            var link = $(this).attr('href');
-            flixFullScreen(link);
-        });
-    }
     $(document).on('keyup', function (evt) {
         if (evt.keyCode == 27) {
             closeFlixFullScreen();
         }
     });
-   
+
 });
 
 
-function flixFullScreen(link){
+function flixFullScreen(link) {
     $('body').addClass('fullScreen');
-    var div = $('<div id="divIframeFull" style="background-color:black; text-align: center; position: fixed; top: 0;left: 0; z-index: 9999;"><div id="divTopBar" style="position: fixed; top: 0; left: 0; height: 50px; width: 100vw; z-index: 99999; padding:10px; "><span id="closeBtnFull" class="btn pull-right" onclick="closeFlixFullScreen();" style="opacity: 0.5; filter: alpha(opacity=50);"><i class="fa fa-times"></i></span></div></div>').append('<iframe src="' + link + '" style="background-color:black; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 9999; overflow: hidden;"  frameBorder="0" id="iframeFull" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>');
+    var divHTML = '<div id="divIframeFull" style="background-color:black; text-align: center; position: fixed; top: 0;left: 0; z-index: 9999;">';
+    divHTML += '<div id="divTopBar" style="position: fixed; top: 0; left: 0; height: 50px; width: 100vw; z-index: 99999; padding:10px; ">';
+    divHTML += '<span id="closeBtnFull" class="btn pull-right" onclick="closeFlixFullScreen();" style="opacity: 0.7; filter: alpha(opacity=70);">';
+    divHTML += '<i class="fa fa-times" style="text-shadow: 1px 1px rgba(255,255,255,0.7);"></i></span></div></div>';
+    var div = $(divHTML).append('<iframe src="' + link + '" style="background-color:black; position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 9999; overflow: hidden;"  frameBorder="0" id="iframeFull" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>');
     $('body').append(div);
     $('body').addClass('fullscreen');
     $("#divIframeFull").fadeIn();
-    
+
 }
 
+var closeFlixFullScreenTimout;
 function closeFlixFullScreen() {
-    setTimeout(function(){
+    console.log("closeFlixFullScreen");
+    clearTimeout(closeFlixFullScreenTimout);
+    closeFlixFullScreenTimout = setTimeout(function () {
+
+        console.log("closeFlixFullScreen timout");
         $('body').removeClass('fullscreen');
         $('body').attr('class', '');
-    },500);
+    }, 500);
-    
+
-    if($('#divIframeFull').length){
+    if ($('#divIframeFull').length) {
+
+        console.log("closeFlixFullScreen divIframeFull");
         $("#divIframeFull").fadeOut("slow", function () {
+            console.log("closeFlixFullScreen divIframeFull fadeOut");
             $('#divIframeFull').remove();
         });
     }
+    console.log("closeFlixFullScreen removeClass");
     $('body').removeClass('fullscreen');
 }
 
-
+function linksToFullscreen(selector) {
+    if (playVideoOnFullscreen && typeof flixFullScreen == 'function') {
+        $(selector).each(function (index) {
+            if(!$(this).hasClass('linksToFullscreen')){
+                $(this).addClass('linksToFullscreen');
+                $(this).click(function (event) {
+                    event.preventDefault();
+                    var link = $(this).attr('embed');
+                    if (!link) {
+                        link = $(this).attr('href');
+                        link = addGetParam(link, 'embed', 1);
+                    }
+                    flixFullScreen(link);
+                });
+            }
+        });
+    }
+}

view/js/script.js

@@ -1085,4 +1085,20 @@ function startTimer(duration, selector) {
         }
 
     }, 1000);
-}
+}
+
+function addGetParam(_url,_key,_value){
+      var param = _key+'='+escape(_value);
+
+      var sep = '&';
+      if (_url.indexOf('?') < 0) {
+        sep = '?';
+      } else {
+        var lastChar=_url.slice(-1);
+        if (lastChar == '&') sep='';
+        if (lastChar == '?') sep='';
+      }
+      _url += sep + param;
+
+      return _url;
+  }