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 5 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_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 "

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

@ -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;

Write Preview
Loading…
Cancel
Save