161 lines
5.4 KiB
JavaScript
161 lines
5.4 KiB
JavaScript
|
import { isNull } from "lodash";
|
||
|
|
import * as basicLightbox from 'basiclightbox';
|
||
|
|
import Plyr from "plyr";
|
||
|
|
|
||
|
|
export default () => {
|
||
|
|
return {
|
||
|
|
|
||
|
|
show: false,
|
||
|
|
showTrailer: false,
|
||
|
|
player: false,
|
||
|
|
playerTrailer: false,
|
||
|
|
continueModal: false,
|
||
|
|
playerModal: false,
|
||
|
|
trailerModal: false,
|
||
|
|
init() {
|
||
|
|
// this.open();
|
||
|
|
this.addView();
|
||
|
|
},
|
||
|
|
async addView(){
|
||
|
|
var regex = /^\/([a-z-]+)\/([0-9]+)\//;
|
||
|
|
|
||
|
|
if (regex.test(document.location.pathname)) {
|
||
|
|
var params = document.location.pathname.match(regex);
|
||
|
|
if (params[1] === 'tv-show') {
|
||
|
|
params[1] = 'tv';
|
||
|
|
}
|
||
|
|
fetch(
|
||
|
|
`https://qa.softcad.pw/${params[1]}/view/${document.location.hostname}/${params[2]}`
|
||
|
|
).catch((err) => {});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async playStart(title, poster_path) {
|
||
|
|
fetch('/api/modal', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Accept': 'application/json, text/plain, */*',
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({poster_path: poster_path, title: title})
|
||
|
|
}).then(res => {
|
||
|
|
return res.text();
|
||
|
|
}).then( html => {
|
||
|
|
this.continueModal = basicLightbox.create(html,
|
||
|
|
{
|
||
|
|
className: 'continue-modal'
|
||
|
|
});
|
||
|
|
this.continueModal.show(() => {
|
||
|
|
const close = document.getElementById("close-modal-continue");
|
||
|
|
close.addEventListener('click', () => {
|
||
|
|
this.continueModal.close()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
// const modal = document.getElementById('player-modal');
|
||
|
|
// modal.innerHTML = html;
|
||
|
|
// let event = new CustomEvent("show-player-modal", {});
|
||
|
|
// window.dispatchEvent(event);
|
||
|
|
})
|
||
|
|
.catch(err => {console.log(err)});
|
||
|
|
},
|
||
|
|
open() {
|
||
|
|
if (this.playerModal) {
|
||
|
|
this.playerModal.show()
|
||
|
|
// this.show = true;
|
||
|
|
// this.player.play();
|
||
|
|
} else {
|
||
|
|
const pagePlayer = document.getElementById('player');
|
||
|
|
if (!isNull(pagePlayer)) {
|
||
|
|
|
||
|
|
// this.addView();
|
||
|
|
|
||
|
|
|
||
|
|
this.playerModal = basicLightbox.create(document.querySelector('#player-modal'),
|
||
|
|
{
|
||
|
|
className: 'player-modal'
|
||
|
|
}
|
||
|
|
);
|
||
|
|
this.playerModal.show(() => {
|
||
|
|
const config = JSON.parse(pagePlayer.getAttribute('data-plyr-config'));
|
||
|
|
this.player = new Plyr("#player", {
|
||
|
|
listeners: {
|
||
|
|
play: (e) => {
|
||
|
|
if (this.player.fullscreen.active) {
|
||
|
|
this.player.fullscreen.exit();
|
||
|
|
}
|
||
|
|
this.playStart(config.title, config.poster_path);
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const close = document.getElementById("close-modal-player");
|
||
|
|
close.addEventListener('click', () => {
|
||
|
|
this.playerModal.close()
|
||
|
|
})
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
// this.player.pause();
|
||
|
|
this.show = false;
|
||
|
|
},
|
||
|
|
isOpen() {
|
||
|
|
return this.show === true;
|
||
|
|
},
|
||
|
|
openTrailer() {
|
||
|
|
// alert('play trailer')
|
||
|
|
if (this.trailerModal) {
|
||
|
|
this.trailerModal.show(() => {
|
||
|
|
this.playerTrailer.play();
|
||
|
|
// return true;
|
||
|
|
})
|
||
|
|
// this.showTrailer = true;
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.trailerModal = basicLightbox.create(document.querySelector('#trailer-modal'),
|
||
|
|
{
|
||
|
|
className: 'player-modal'
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
this.trailerModal.show(() => {
|
||
|
|
const player = (new Plyr("#trailer", {
|
||
|
|
autoplay: true,
|
||
|
|
youtube: {
|
||
|
|
noCookie: false,
|
||
|
|
rel: 0,
|
||
|
|
showinfo: 0,
|
||
|
|
iv_load_policy: 3,
|
||
|
|
modestbranding: 1,
|
||
|
|
},
|
||
|
|
}).on("ready", (ev) => {
|
||
|
|
this.playerTrailer = ev.detail.plyr;
|
||
|
|
// this.showTrailer = true;
|
||
|
|
}));
|
||
|
|
|
||
|
|
const close = document.getElementById("close-modal-trailer");
|
||
|
|
close.addEventListener('click', () => {
|
||
|
|
this.trailerModal.close(() => {
|
||
|
|
this.playerTrailer.pause();
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
closeTrailer() {
|
||
|
|
this.playerTrailer.pause();
|
||
|
|
this.showTrailer = false;
|
||
|
|
},
|
||
|
|
isOpenTrailer() {
|
||
|
|
return this.showTrailer === true;
|
||
|
|
},
|
||
|
|
};
|
||
|
|
};
|