open-source-mirrors
/
PlexShare
mirror of https://github.com/Chewbaka69/PlexShare
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update player

Browse Source 
List next episode
Add button to play next episode like netflix
Clean HTML
pull/9/head
Chewbaka 6 years ago
parent 5be8ba55c3
commit b3dfbc19a4
2 changed files with 144 additions and 45 deletions
Show Stats Download Patch File Download Diff File

50
fuel/app/views/stream/index.php
Unescape View File

@ -1,5 +1,5 @@
<input id="data_movie" type="hidden" data-src="<?php echo $movie->getStreamUrl($user_settings); ?>"/> <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; ?>"/> <input id="data_movie_id" type="hidden" data-movie-id="<?php echo $movie->id; ?>" />
<button aria-label="Lire" role="playCenter" type="button" <button aria-label="Lire" role="playCenter" type="button"
class="PlayPauseOverlay-playButton-25OfW PlayButton-playButton-3WX8X Link-link-2XYrU Link-default-32xSO" class="PlayPauseOverlay-playButton-25OfW PlayButton-playButton-3WX8X Link-link-2XYrU Link-default-32xSO"
style="z-index: 0"> style="z-index: 0">
@ -48,18 +48,11 @@
<div class="EqualizerIcon-equalizer-2SoFA" style="width: 14px; height: 14px;"> <div class="EqualizerIcon-equalizer-2SoFA" style="width: 14px; height: 14px;">
<?php if($movie->id === $episode->id) : ?> <?php if($movie->id === $episode->id) : ?>
<div class="EqualizerIcon-bar-1nPot" <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" <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" <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> style="left: 9.5px; width: 3px; background-color: rgb(249, 190, 3); transition-duration: 477.391ms; transform: scaleY(0.9);"></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>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
@ -88,10 +81,23 @@
</div> </div>
</div> </div>
<div class="AudioVideoPlayerPlayQueueMetadata-titlesContainer-2G9lR" data-qa-id="playQueueTitleContainer"> <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" <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> 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 " <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>
<div class="AudioVideoPlayQueueItem-metadataDurationContainer-184Jw AudioVideoPlayerPlayQueueMetadata-durationContainer-2dgI9"> <div class="AudioVideoPlayQueueItem-metadataDurationContainer-184Jw AudioVideoPlayerPlayQueueMetadata-durationContainer-2dgI9">
<?php echo $episode->getDuration(); ?> <?php echo $episode->getDuration(); ?>
@ -137,6 +143,18 @@
<div class="Measure-shrinkContent-32Udi Measure-expandContent-1JQfL"></div> <div class="Measure-shrinkContent-32Udi Measure-expandContent-1JQfL"></div>
</div> </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" <div class="AudioVideoFullPlayer-bottomBar-2yixi AudioVideoFullPlayer-bar-dDYeo"
style="bottom: -86px; height: 86px; z-index: 0"> style="bottom: -86px; height: 86px; z-index: 0">
<div class="AudioVideoBottomBar-controlsContainer-2c743"> <div class="AudioVideoBottomBar-controlsContainer-2c743">
@ -259,7 +277,7 @@
class="VolumeSlider-track-2WJDz Slider-track-28JOS"><div class="VolumeSlider-track-2WJDz Slider-track-28JOS"><div
class="VolumeSlider-fill-3XkYy Slider-fill-35GFq" class="VolumeSlider-fill-3XkYy Slider-fill-35GFq"
style="transform: scaleX(1);"></div></div><div 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" <button id="buttonVolume"
role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
class="Slider-thumb-2QGiU Link-link-2XYrU Link-default-32xSO " class="Slider-thumb-2QGiU Link-link-2XYrU Link-default-32xSO "

139
public/assets/js/player.js
Unescape View File

@ -13,19 +13,35 @@ function toHHMMSS(num) {
return times + minutes + ':' + seconds; return times + minutes + ':' + seconds;
} }
var player = null; let player = null;
let sliderTrack = null;
let sliderSound = null;
function launchPlayer(view) { function launchPlayer(view) {
var lastTimeMouseMoved = null; let lastTimeMouseMoved = null;
var timeout = null; let timeout = null;
var buffered = null; let buffered = null;
var totaltime = 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]; let width = window.innerWidth;
var movie_src = $(data_movie).data('src'); let height = window.innerHeight;
var videoControles = document.getElementById('video_controls'); document.querySelector('#divVideo').style.backgroundImage = 'url("/cover/movie?movie_id=' + movie_id + '&width=' + width + '&height=' + height + '&art=true")';
videoControles.innerHTML += view; document.querySelector('#divVideo').style.backgroundColor = '#000000';
initSliders(); initSliders();
@ -43,19 +59,33 @@ function launchPlayer(view) {
}, },
events: { events: {
onReady: function () { 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 () { 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(); $('button[role="playCenter"]').show();
}, },
onTimeUpdate: function(progress) { onTimeUpdate: function(progress) {
var timeplay = progress.current; let timeplay = progress.current;
var percent = timeplay / totaltime; let percent = timeplay / totaltime;
$('.media-time').html(toHHMMSS(timeplay)); $('.media-time').html(toHHMMSS(timeplay));
$('.SeekBar-seekBarFill-1Lcu0').css('transform', 'scaleX('+ percent +')'); $('.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()}); player.on(Clappr.Events.PLAYER_PLAY, function(){player.core.mediaControl.disable()});
/** EVENT PLAYER WHEN LOADED GET TOTATL TIME **/ /** 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; totaltime = metadata.duration;
}); });
/** EVENT PLAYER TO GET CURRENT TIME **/ /** EVENT PLAYER TO GET CURRENT TIME **/
/** BUFFER BAR PROGRESS **/ /** 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; var buffer = progress.current / progress.total;
$('.SeekBar-seekBarBuffer-3bUz9').css('transform', 'scaleX('+ buffer +')'); $('.SeekBar-seekBarBuffer-3bUz9').css('transform', 'scaleX('+ buffer +')');
}); });
/** PLAY CENTER **/ /** PLAY CENTER **/
$(document).on('click', 'button[role="playCenter"]', function () { $(document).on('click', 'button[role="playCenter"]', function () {
$('button[role="playCenter"]').hide(); $(document).find('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[data-qa-id="resumeButton"] i').toggleClass('plex-icon-player-pause-560 plex-icon-player-play-560');
player.play(); player.play();
}); });
/** RESUME **/ /** RESUME **/
$(document).on('click', 'button[data-qa-id="resumeButton"]', function () { $(document).on('click', 'button[data-qa-id="resumeButton"]', function () {
if(!player.isPlaying()) if(!player.isPlaying())
$('button[role="playCenter"]').click(); $(document).find('button[role="playCenter"]').click();
else else
player.pause(); player.pause();
}); });
@ -118,19 +148,19 @@ function launchPlayer(view) {
}); });
/** HOVER PLAYER, BUTTON CENTER AND NAVBAR SHOW NAVBAR **/ /** 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); clearTimeout(timeout);
$('.AudioVideoFullPlayer-topBar-2XUGM').css('transform', 'translateY(60px)'); $('.AudioVideoFullPlayer-topBar-2XUGM').css('transform', 'translateY(60px)');
$('.AudioVideoFullPlayer-bottomBar-2yixi').css('transform', 'translateY(-86px)'); $('.AudioVideoFullPlayer-bottomBar-2yixi').css('transform', 'translateY(-86px)');
}); });
/** BUTTON CENTER AND NAVBAR HIDE NAVBAR **/ /** 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-topBar-2XUGM').css('transform', '');
$('.AudioVideoFullPlayer-bottomBar-2yixi').css('transform', ''); $('.AudioVideoFullPlayer-bottomBar-2yixi').css('transform', '');
$('.AudioVideoPlaybackSettings-container-2pTAj.AudioVideoStripeContainer-container-MI02O').css('transform', 'translateY(246px)'); $('.AudioVideoPlaybackSettings-container-2pTAj.AudioVideoStripeContainer-container-MI02O').css('transform', 'translateY(246px)');
}); });
/** MOUSE MOVE ON PLAYER KEEP VISIBLE NAVBAR **/ /** 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"], #movie_stream').css('cursor', 'pointer');
$('button[role="playCenter"], .AudioVideoFullPlayer-topBar-2XUGM, .AudioVideoFullPlayer-bottomBar-2yixi').mouseover(); $('button[role="playCenter"], .AudioVideoFullPlayer-topBar-2XUGM, .AudioVideoFullPlayer-bottomBar-2yixi').mouseover();
lastTimeMouseMoved = new Date().getTime(); lastTimeMouseMoved = new Date().getTime();
@ -143,6 +173,49 @@ function launchPlayer(view) {
} }
}, 1000); }, 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 // Enter full screen
@ -205,14 +278,14 @@ function exitFullScreen() {
// Initialise Sliders on the page // Initialise Sliders on the page
function initSliders () { function initSliders () {
var slider1 = new Slider($('.Slider-thumbTrack-21hGV .Slider-thumb-2QGiU').get(0)); sliderTrack = new Slider($('.Slider-thumbTrack-21hGV .Slider-thumb-2QGiU').get(0));
slider1.clickElementBefore = $('.SeekBar-seekBarTrack-3Gu5R').get(0); sliderTrack.clickElementBefore = $('.SeekBar-seekBarTrack-3Gu5R').get(0);
slider1.init(); sliderTrack.init();
var slider2 = new Slider($('.VolumeSlider-slider-1QXdT .Slider-thumb-2QGiU').get(0)); sliderSound = new Slider($('.VolumeSlider-slider-1QXdT .Slider-thumb-2QGiU').get(0));
slider2.clickElementBefore = $('.VolumeSlider-fill-3XkYy').get(0); sliderSound.clickElementBefore = $('.VolumeSlider-fill-3XkYy').get(0);
slider2.clickElementAfter = $('.VolumeSlider-track-2WJDz').get(0); sliderSound.clickElementAfter = $('.VolumeSlider-track-2WJDz').get(0);
slider2.init(); sliderSound.init();
}; };
@ -293,7 +366,7 @@ Slider.prototype.moveSliderTo = function (value) {
if(this.domNode.id === 'buttonTrack') { if(this.domNode.id === 'buttonTrack') {
document.getElementsByClassName('SeekBar-seekBarFill-1Lcu0')[0].style.transform = 'scaleX(' + percent / 100 + ')'; document.getElementsByClassName('SeekBar-seekBarFill-1Lcu0')[0].style.transform = 'scaleX(' + percent / 100 + ')';
if(player && player.isPlaying()) { if(player) {
player.seekPercentage(percent); player.seekPercentage(percent);
} }
} }
@ -312,12 +385,20 @@ Slider.prototype.handleKeyDown = function (event) {
switch (event.keyCode) { switch (event.keyCode) {
case this.keyCode.left: case this.keyCode.left:
this.moveSliderTo(this.valueNow - 1);
flag = true;
break;
case this.keyCode.down: case this.keyCode.down:
this.moveSliderTo(this.valueNow - 1); this.moveSliderTo(this.valueNow - 1);
flag = true; flag = true;
break; break;
case this.keyCode.right: case this.keyCode.right:
this.moveSliderTo(this.valueNow + 1);
flag = true;
break;
case this.keyCode.up: case this.keyCode.up:
this.moveSliderTo(this.valueNow + 1); this.moveSliderTo(this.valueNow + 1);
flag = true; flag = true;

Write Preview
Loading…
Cancel
Save