This commit is contained in:
booploops 2021-12-08 01:52:24 -08:00
commit cb3f18874d
3 changed files with 30 additions and 28 deletions

View file

@ -294,30 +294,6 @@ const app = new Vue({
}
return hash;
},
playAnimatedArtwork(url) {
if (Hls.isSupported()) {
var video = document.querySelector(`[vid="${app.hashCode(url)}"] > video`)
console.log('supported');
var hls = new Hls();
// bind them together
if (video) {
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('video and hls.js are now bound together !');
hls.loadSource(url);
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
video.play();
return "";
});
});
} else {
console.log("hso");
return "";
}
} else {
return "";
}
},
routeView(item) {
let self = this
app.showingPlaylist = [];
@ -1432,4 +1408,3 @@ var checkIfScrollIsStatic = setInterval(() => {
}
}, 50);

View file

@ -1,7 +1,7 @@
<script type="text/x-template" id="animatedartwork-view">
<template v-if="video">
<div class="animated" v-bind:vid="app.hashCode(video).toString()">
<video class="animated-artwork-video" loop id="animated-artwork"></video>
<video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
</div>
</template>
</script>
@ -9,13 +9,39 @@
<script>
Vue.component('animatedartwork-view', {
template: '#animatedartwork-view',
props: ['video'],
props: ['video', 'hls'],
mounted() {
if (this.video) {
this.$nextTick(function () {
app.playAnimatedArtwork(this.video);
var config = {
backBufferLength: 0,
enableWebVTT: false,
enableCEA708Captions: false,
emeEnabled: false,
abrEwmaDefaultEstimate: 10000,
testBandwidth: false
};
if (this.hls) {
console.log('detached');
this.hls.detachMedia();
} else {
this.hls = new Hls(config);
}
// bind them together
if (this.$refs.video) {
this.hls.attachMedia(this.$refs.video);
this.hls.loadSource(this.video);
this.hls.loadLevel = 4;
}
})
}
},
beforeDestroy() {
this.hls.detachMedia();
this.hls.destroy();
console.log('killed')
}
});
</script>

View file

@ -6,6 +6,7 @@
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
size="300"
:type="item.type"></mediaitem-artwork>
</div>