aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFlorian Larysch2017-01-03 01:43:04 +0100
committerFlorian Larysch2017-01-03 01:48:41 +0100
commit00990497857e5ec27405e2b795310fa0dc925545 (patch)
tree4aa9ff0591289e4cfdae9c0e064fd88bb30ee7b0
parent7aa212fc8151b52136fefb901ccd6b410ced96a8 (diff)
relive: add scrubbing thumbnail support
When the Relive manifest contains preview thumbnails for scrubbing, display them to the user.
-rw-r--r--assets/js/lustiges-script.js15
-rw-r--r--template/assemblies/player/relive.phtml6
-rw-r--r--template/page.phtml1
3 files changed, 22 insertions, 0 deletions
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 81db426..e949c6e 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -23,10 +23,25 @@ $(function() {
if($relivePlayer.length > 0) {
var player = new Clappr.Player({
baseUrl: 'assets/clapprio/',
+ plugins: {
+ core: [ClapprThumbnailsPlugin]
+ },
+
source: $relivePlayer.data('m3u8'),
height: $relivePlayer.data('height'),
width: $relivePlayer.data('width'),
autoPlay: true,
+ scrubThumbnails: {
+ backdropHeight: 64,
+ spotlightHeight: 84,
+ thumbs: ClapprThumbnailsPlugin.buildSpriteConfig(
+ $relivePlayer.data("sprites"),
+ $relivePlayer.data("sprites-n"),
+ 160, 90,
+ $relivePlayer.data("sprites-cols"),
+ $relivePlayer.data("sprites-interval")
+ ),
+ },
events: {
onReady: function() {
var playback = player.getPlugin('hls');
diff --git a/template/assemblies/player/relive.phtml b/template/assemblies/player/relive.phtml
index 93b6c95..361e1bb 100644
--- a/template/assemblies/player/relive.phtml
+++ b/template/assemblies/player/relive.phtml
@@ -4,5 +4,11 @@
data-width="<?=h($width)?>"
data-height="<?=h($height)?>"
data-m3u8="<?=h(forceproto($talk['playlist']))?>"
+ <? if(array_key_exists('sprites', $talk)): ?>
+ data-sprites="<?= h($talk['sprites']['url']) ?>"
+ data-sprites-n="<?= h($talk['sprites']['n']) ?>"
+ data-sprites-cols="<?= h($talk['sprites']['cols']) ?>"
+ data-sprites-interval="<?= h($talk['sprites']['interval']) ?>"
+ <? endif ?>
>
</div>
diff --git a/template/page.phtml b/template/page.phtml
index 508b271..016debf 100644
--- a/template/page.phtml
+++ b/template/page.phtml
@@ -56,6 +56,7 @@
<script type="text/javascript" src="<?=h($assets)?>mejs/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="<?=h($assets)?>clapprio/clappr.min.js"></script>
+ <script type="text/javascript" src="<?=h($assets)?>clapprio/clappr-thumbnails-plugin.js"></script>
<script type="text/javascript" src="<?=h($assets)?>js/lustiges-script.js"></script>
<? if(isset($subtitles) && $subtitles->isEnabled()): ?>