From b3dfbc19a4f361c18a93803eb06b7bcbaab2d518 Mon Sep 17 00:00:00 2001
From: Chewbaka <thejudoka69@msn.com>
Date: Sat, 23 Mar 2019 17:22:46 +0100
Subject: [PATCH] Update player

List next episode
Add button to play next episode like netflix
Clean HTML
---
 fuel/app/views/stream/index.php |  50 ++++++++----
 public/assets/js/player.js      | 139 +++++++++++++++++++++++++-------
 2 files changed, 144 insertions(+), 45 deletions(-)

diff --git a/fuel/app/views/stream/index.php b/fuel/app/views/stream/index.php
index 1842adb..311ef16 100644
--- a/fuel/app/views/stream/index.php
+++ b/fuel/app/views/stream/index.php
@@ -1,5 +1,5 @@
-<input id="data_movie" type="hidden" data-src="<?php echo $movie->getStreamUrl($user_settings); ?>"/>
-<input id="data_movie_id" type="hidden" data-movie-id="<?php echo $movie->id; ?>"/>
+<input id="data_movie" type="hidden" data-src="<?php echo $movie->getStreamUrl($user_settings); ?>" data-movie-type="<?php echo $movie->type; ?>"/>
+<input id="data_movie_id" type="hidden" data-movie-id="<?php echo $movie->id; ?>" />
 <button aria-label="Lire" role="playCenter" type="button"
         class="PlayPauseOverlay-playButton-25OfW PlayButton-playButton-3WX8X Link-link-2XYrU Link-default-32xSO"
         style="z-index: 0">
@@ -48,18 +48,11 @@
                         <div class="EqualizerIcon-equalizer-2SoFA" style="width: 14px; height: 14px;">
                             <?php if($movie->id === $episode->id) : ?>
                                 <div class="EqualizerIcon-bar-1nPot"
-                                     style="left: 0px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 467.145ms; transform: scaleY(0.2);"></div>
+                                     style="left: 0px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 467.145ms; transform: scaleY(0.9);"></div>
                                 <div class="EqualizerIcon-bar-1nPot"
-                                     style="left: 5px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 409.912ms; transform: scaleY(0.2);"></div>
+                                     style="left: 5px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 409.912ms; transform: scaleY(0.9);"></div>
                                 <div class="EqualizerIcon-bar-1nPot"
-                                     style="left: 10px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 477.391ms; transform: scaleY(0.2);"></div>
-                            <?php else: ?>
-                                <div class="EqualizerIcon-bar-1nPot"
-                                     style="left: 0px; width: 3px; background-color: rgb(255, 255, 255); transition-duration: 467.145ms; transform: scaleY(0.2);"></div>
-                                <div class="EqualizerIcon-bar-1nPot"
-                                     style="left: 5px; width: 3px; background-color: rgb(255, 255, 255); transition-duration: 409.912ms; transform: scaleY(0.2);"></div>
-                                <div class="EqualizerIcon-bar-1nPot"
-                                     style="left: 10px; width: 3px; background-color: rgb(255, 255, 255); transition-duration: 477.391ms; transform: scaleY(0.2);"></div>
+                                     style="left: 9.5px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 477.391ms; transform: scaleY(0.9);"></div>
                             <?php endif; ?>
                         </div>
                     </div>
@@ -88,10 +81,23 @@
                             </div>
                         </div>
                         <div class="AudioVideoPlayerPlayQueueMetadata-titlesContainer-2G9lR" data-qa-id="playQueueTitleContainer">
-                            <a data-qa-id="metadataTitleLink" title="<?php echo $episode->title; ?>" href="#!/server/11f086036e179128e7b077495e238d1c922d605c/details?key=%2Flibrary%2Fmetadata%2F37"
-                               role="link" class=" MetadataPosterTitle-singleLineTitle-24_DN MetadataPosterTitle-title-3tU5F Link-link-2XYrU Link-default-32xSO"><?php echo $episode->title; ?></a>
+                            <a data-qa-id="metadataTitleLink" title="<?php echo $episode->title; ?>" href="<?php echo ($episode->type === 'movie' ? '/movie/' : '/episode/') . $episode->id; ?>"
+                               role="link" class="MetadataPosterTitle-singleLineTitle-24_DN MetadataPosterTitle-title-3tU5F Link-link-2XYrU Link-default-32xSO"><?php echo $episode->title; ?></a>
+                            <?php if ($episode->type === 'movie') : ?>
                             <span class=" MetadataPosterTitle-singleLineTitle-24_DN MetadataPosterTitle-title-3tU5F MetadataPosterTitle-isSecondary-2VUxY "
-                                    data-qa-id="metadataYear"><?php echo $episode->year; ?></span>
+                                    data-qa-id="metadataYear"><?php echo $episode->year; ?>
+                            </span>
+                            <?php else : ?>
+                            <span class=" MetadataPosterTitle-singleLineTitle-24_DN MetadataPosterTitle-title-3tU5F MetadataPosterTitle-isSecondary-2VUxY ">
+                                <span>
+                                    <a title="Saison 1" href="#" role="link" class=" Link-link-2n0yJ Link-default-2XA2b">S1</a>
+                                    <span class="DashSeparator-separator-2a3yn">·</span>
+                                    <a title="VOSTFR (BDRip" href="#" role="link" class=" Link-link-2n0yJ Link-default-2XA2b">E26</a>
+                                </span>
+                                <span class="DashSeparator-separator-2a3yn">—</span>
+                                <a data-qa-id="metadataTitleLink" title="VOSTFR (BDRip" href="#" role="link" class=" Link-link-2n0yJ Link-default-2XA2b">VOSTFR (BDRip</a>
+                            </span>
+                            <?php endif; ?>
                         </div>
                         <div class="AudioVideoPlayQueueItem-metadataDurationContainer-184Jw AudioVideoPlayerPlayQueueMetadata-durationContainer-2dgI9">
                             <?php echo $episode->getDuration(); ?>
@@ -137,6 +143,18 @@
         <div class="Measure-shrinkContent-32Udi Measure-expandContent-1JQfL"></div>
     </div>
 </div>
+<div class="Next hidden" style="position: absolute;bottom: 120px;right: 100px;">
+    <button name="close" type="button" class="AudioVideoPlayerControls-closeButton-2ULmA btn btn-danger">
+        <span class="btn-label">Fermer</span>
+    </button>
+    <?php foreach ($episodes as $index => $episode) : ?>
+    <?php if($movie->id === $episode->id && isset($episodes[$index + 1])) : ?>
+    <button id="next" type="button" class="submit-btn btn btn-primary" data-id="<?php echo $episodes[$index + 1]->id; ?>">
+        <span class="btn-label">Episode suivant</span>
+    </button>
+    <?php endif; ?>
+    <?php endforeach; ?>
+</div>
 <div class="AudioVideoFullPlayer-bottomBar-2yixi AudioVideoFullPlayer-bar-dDYeo"
      style="bottom: -86px; height: 86px; z-index: 0">
     <div class="AudioVideoBottomBar-controlsContainer-2c743">
@@ -259,7 +277,7 @@
                                     class="VolumeSlider-track-2WJDz Slider-track-28JOS"><div
                                         class="VolumeSlider-fill-3XkYy Slider-fill-35GFq"
                                         style="transform: scaleX(1);"></div></div><div
-                                    class="Slider-thumbTrack-21hGV" style="transform: translateX(0%);">
+                                    class="Slider-thumbTrack-21hGV" style="transform: translateX(-100%);">
                                 <button id="buttonVolume"
                                         role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
                                         class="Slider-thumb-2QGiU Link-link-2XYrU Link-default-32xSO      "
diff --git a/public/assets/js/player.js b/public/assets/js/player.js
index a12535c..c0cc330 100644
--- a/public/assets/js/player.js
+++ b/public/assets/js/player.js
@@ -13,19 +13,35 @@ function toHHMMSS(num) {
     return times + minutes + ':' + seconds;
 }
 
-var player = null;
+let player = null;
+let sliderTrack = null;
+let sliderSound = null;
 
 function launchPlayer(view) {
-    var lastTimeMouseMoved = null;
-    var timeout = null;
-    var buffered = null;
-    var totaltime = null;
+    let lastTimeMouseMoved = null;
+    let timeout = null;
+    let buffered = null;
+    let totaltime = null;
+
+    let left = null;
+
+    let data_movie = $(view)[0];
+    let movie_src = $(data_movie).data('src');
+    let movie_type = $(data_movie).data('movie-type');
+    let data_movie_id = $(view)[2];
+    let movie_id = $(data_movie_id).data('movie-id');
+
+    let movie_stream = document.querySelector('#movie_stream');
+    movie_stream.innerHTML = '';
+    let videoControles = document.querySelector('#video_controls');
+    videoControles.innerHTML = '';
+    videoControles.innerHTML += view;
 
-    var data_movie = $(view)[0];
-    var movie_src = $(data_movie).data('src');
+    let width = window.innerWidth;
+    let height = window.innerHeight;
 
-    var videoControles = document.getElementById('video_controls');
-    videoControles.innerHTML += view;
+    document.querySelector('#divVideo').style.backgroundImage = 'url("/cover/movie?movie_id=' + movie_id + '&width=' + width + '&height=' + height + '&art=true")';
+    document.querySelector('#divVideo').style.backgroundColor = '#000000';
 
     initSliders();
 
@@ -43,19 +59,33 @@ function launchPlayer(view) {
         },
         events: {
             onReady: function () {
-                $('#movie_stream').find('.media-control, .player-poster').remove();
+                $(document).find('#movie_stream .player-poster').remove();
+                // PREVENT PLAY IF THE PLAYER IS NOT VISIBLE
+                setTimeout(function (event) {
+                    $('button[role="playCenter"]').click();
+                }, 10);
+                left = parseInt($(sliderTrack.domNode).css('left').replace('px',''));
             },
             onPause: function () {
-                $('button[data-qa-id="resumeButton"] i').toggleClass('plex-icon-player-play-560 plex-icon-player-pause-560');
+                $('button[data-qa-id="resumeButton"] i').toggleClass('plex-icon-player-pause-560 plex-icon-player-play-560');
                 $('button[role="playCenter"]').show();
             },
             onTimeUpdate: function(progress) {
-                var timeplay = progress.current;
-                var percent = timeplay / totaltime;
+                let timeplay = progress.current;
+                let percent = timeplay / totaltime;
 
                 $('.media-time').html(toHHMMSS(timeplay));
 
                 $('.SeekBar-seekBarFill-1Lcu0').css('transform', 'scaleX('+ percent +')');
+                $(sliderTrack.railDomNode).css('transform', 'translateX(-' + parseFloat(100 - percent*100) + '%)');
+
+                percent = parseInt(percent * 100);
+
+                if(movie_type === 'episode' && percent > 97) {
+                    showNext();
+                } else {
+                    removeNext();
+                }
             }
         }
     });
@@ -63,27 +93,27 @@ function launchPlayer(view) {
     player.on(Clappr.Events.PLAYER_PLAY, function(){player.core.mediaControl.disable()});
 
     /** EVENT PLAYER WHEN LOADED GET TOTATL TIME **/
-    player.core.getCurrentContainer().on(Clappr.Events.CONTAINER_LOADEDMETADATA, function(metadata) {
+    player.core.activeContainer.on(Clappr.Events.CONTAINER_LOADEDMETADATA, function(metadata) {
         totaltime = metadata.duration;
     });
 
     /** EVENT PLAYER TO GET CURRENT TIME **/
     /** BUFFER BAR PROGRESS **/
-    player.core.getCurrentContainer().on(Clappr.Events.CONTAINER_PROGRESS, function(progress) {
+    player.core.activeContainer.on(Clappr.Events.CONTAINER_PROGRESS, function(progress) {
         var buffer = progress.current / progress.total;
         $('.SeekBar-seekBarBuffer-3bUz9').css('transform', 'scaleX('+ buffer +')');
     });
 
     /** PLAY CENTER **/
     $(document).on('click', 'button[role="playCenter"]', function () {
-        $('button[role="playCenter"]').hide();
-        $(document).find('button[data-qa-id="resumeButton"] > i').toggleClass('plex-icon-player-play-560 plex-icon-player-pause-560');
+        $(document).find('button[role="playCenter"]').hide();
+        $(document).find('button[data-qa-id="resumeButton"] i').toggleClass('plex-icon-player-pause-560 plex-icon-player-play-560');
         player.play();
     });
     /** RESUME **/
     $(document).on('click', 'button[data-qa-id="resumeButton"]', function () {
         if(!player.isPlaying())
-            $('button[role="playCenter"]').click();
+            $(document).find('button[role="playCenter"]').click();
         else
             player.pause();
     });
@@ -118,19 +148,19 @@ function launchPlayer(view) {
     });
 
     /** HOVER PLAYER, BUTTON CENTER AND NAVBAR SHOW NAVBAR **/
-    $(document).on('mouseover', '#movie_stream , button[role="playCenter"], .AudioVideoFullPlayer-topBar-2XUGM, .AudioVideoFullPlayer-bottomBar-2yixi, .AudioVideoPlaybackSettings-container-2pTAj.AudioVideoStripeContainer-container-MI02O', function (event) {
+    $(document).on('mouseover', '#divVideo, #movie_stream , button[role="playCenter"], .AudioVideoFullPlayer-topBar-2XUGM, .AudioVideoFullPlayer-bottomBar-2yixi, .AudioVideoPlaybackSettings-container-2pTAj.AudioVideoStripeContainer-container-MI02O', function (event) {
         clearTimeout(timeout);
         $('.AudioVideoFullPlayer-topBar-2XUGM').css('transform', 'translateY(60px)');
         $('.AudioVideoFullPlayer-bottomBar-2yixi').css('transform', 'translateY(-86px)');
     });
     /** BUTTON CENTER AND NAVBAR HIDE NAVBAR **/
-    $(document).on('mouseleave', '#movie_stream, #video_controls', function (event) {
+    $(document).on('mouseleave', '#divVideo, #movie_stream, #video_controls', function (event) {
         $('.AudioVideoFullPlayer-topBar-2XUGM').css('transform', '');
         $('.AudioVideoFullPlayer-bottomBar-2yixi').css('transform', '');
         $('.AudioVideoPlaybackSettings-container-2pTAj.AudioVideoStripeContainer-container-MI02O').css('transform', 'translateY(246px)');
     });
     /** MOUSE MOVE ON PLAYER KEEP VISIBLE NAVBAR **/
-    $(document).on('mousemove', '#movie_stream, button[role="playCenter"]', function () {
+    $(document).on('mousemove', '#divVideo, #movie_stream, button[role="playCenter"]', function () {
         $('button[role="playCenter"], #movie_stream').css('cursor', 'pointer');
         $('button[role="playCenter"], .AudioVideoFullPlayer-topBar-2XUGM, .AudioVideoFullPlayer-bottomBar-2yixi').mouseover();
         lastTimeMouseMoved = new Date().getTime();
@@ -143,6 +173,49 @@ function launchPlayer(view) {
             }
         }, 1000);
     });
+
+    /** NEXT EPISODE **/
+    $(document).on('click', '#next', function () {
+        var movie_id = $(this).data('id');
+        if (movie_id === '')
+            return;
+
+        event.stopPropagation();
+
+        $.ajax({
+            url: '/rest/movie/stream',
+            method: 'GET',
+            data: {movie_id: movie_id},
+            dataType: 'html'
+        }).done(function (view) {
+            launchPlayer(view);
+        }).fail(function (data) {
+            console.error(data.responseText);
+            show_alert('error', data.responseText);
+        });
+    })
+}
+
+function showNext() {
+    $('#movie_stream').css({
+        'position': 'relative',
+        'height': '240px',
+        'width': '380px',
+        'top': '100px',
+        'left': '200px'
+    });
+    $('.Next').removeClass('hidden');
+}
+
+function removeNext() {
+    $('#movie_stream').css({
+        'position': 'relative',
+        'height': '100%',
+        'width': '100%',
+        'top': 0,
+        'left': 0
+    });
+    $('.Next').addClass('hidden');
 }
 
 // Enter full screen
@@ -205,14 +278,14 @@ function exitFullScreen() {
 // Initialise Sliders on the page
 function initSliders () {
 
-    var slider1 = new Slider($('.Slider-thumbTrack-21hGV .Slider-thumb-2QGiU').get(0));
-    slider1.clickElementBefore = $('.SeekBar-seekBarTrack-3Gu5R').get(0);
-    slider1.init();
+    sliderTrack = new Slider($('.Slider-thumbTrack-21hGV .Slider-thumb-2QGiU').get(0));
+    sliderTrack.clickElementBefore = $('.SeekBar-seekBarTrack-3Gu5R').get(0);
+    sliderTrack.init();
 
-    var slider2 = new Slider($('.VolumeSlider-slider-1QXdT .Slider-thumb-2QGiU').get(0));
-    slider2.clickElementBefore = $('.VolumeSlider-fill-3XkYy').get(0);
-    slider2.clickElementAfter = $('.VolumeSlider-track-2WJDz').get(0);
-    slider2.init();
+    sliderSound = new Slider($('.VolumeSlider-slider-1QXdT .Slider-thumb-2QGiU').get(0));
+    sliderSound.clickElementBefore = $('.VolumeSlider-fill-3XkYy').get(0);
+    sliderSound.clickElementAfter = $('.VolumeSlider-track-2WJDz').get(0);
+    sliderSound.init();
 
 };
 
@@ -293,7 +366,7 @@ Slider.prototype.moveSliderTo = function (value) {
 
     if(this.domNode.id === 'buttonTrack') {
         document.getElementsByClassName('SeekBar-seekBarFill-1Lcu0')[0].style.transform = 'scaleX(' + percent / 100 + ')';
-        if(player && player.isPlaying()) {
+        if(player) {
             player.seekPercentage(percent);
         }
     }
@@ -312,12 +385,20 @@ Slider.prototype.handleKeyDown = function (event) {
 
     switch (event.keyCode) {
         case this.keyCode.left:
+            this.moveSliderTo(this.valueNow - 1);
+            flag = true;
+            break;
+
         case this.keyCode.down:
             this.moveSliderTo(this.valueNow - 1);
             flag = true;
             break;
 
         case this.keyCode.right:
+            this.moveSliderTo(this.valueNow + 1);
+            flag = true;
+            break;
+
         case this.keyCode.up:
             this.moveSliderTo(this.valueNow + 1);
             flag = true;