112 lines
3 KiB
JavaScript
112 lines
3 KiB
JavaScript
// import Plyr from 'plyr';
|
|
// import Swal from 'sweetalert2';
|
|
|
|
import { isNull } from "lodash";
|
|
|
|
function trailerData() {
|
|
return {
|
|
modalOpened: false,
|
|
openModal() {
|
|
this.modalOpened = true;
|
|
const player = (new Plyr("#trailer", {
|
|
autoplay: true,
|
|
youtube: {
|
|
noCookie: false,
|
|
rel: 0,
|
|
showinfo: 0,
|
|
iv_load_policy: 3,
|
|
modestbranding: 1,
|
|
},
|
|
}).source = {
|
|
type: "video",
|
|
sources: [
|
|
{
|
|
src: "7sdf-MwzfEA",
|
|
provider: "youtube",
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function showTrailer(embedId) {
|
|
Swal.fire({
|
|
// allowOutsideClick: true,
|
|
|
|
width: "90%",
|
|
allowEscapeKey: true,
|
|
showCloseButton: true,
|
|
showConfirmButton: false,
|
|
// title: player.title,
|
|
html: `<div id="trailer" data-plyr-provider="youtube" data-plyr-embed-id="${embedId}"></div>`,
|
|
focusConfirm: false,
|
|
// confirmButtonText: 'CONTINUE',
|
|
didRender: () => {
|
|
const player = (new Plyr("#trailer", {
|
|
autoplay: true,
|
|
youtube: {
|
|
noCookie: false,
|
|
rel: 0,
|
|
showinfo: 0,
|
|
iv_load_policy: 3,
|
|
modestbranding: 1,
|
|
},
|
|
}).source = {
|
|
type: "video",
|
|
sources: [
|
|
{
|
|
src: "7sdf-MwzfEA",
|
|
provider: "youtube",
|
|
},
|
|
],
|
|
});
|
|
},
|
|
didDestroy: () => {},
|
|
});
|
|
}
|
|
|
|
export function initialize() {
|
|
window.trailer = function () {
|
|
return {
|
|
open: false,
|
|
open() {
|
|
this.show = true;
|
|
},
|
|
close() {
|
|
this.show = false;
|
|
},
|
|
isOpen() {
|
|
return this.show === true;
|
|
}
|
|
};
|
|
};
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('trailer', () => ({
|
|
open: false,
|
|
|
|
toggle() {
|
|
this.open = ! this.open
|
|
},
|
|
}))
|
|
})
|
|
|
|
// document.addEventListener('alpine:init', () => { alert('trailer');
|
|
// Alpine.data('trailer', () => ({
|
|
// init() {
|
|
// alert('trailer');
|
|
// // I get called before the element using this data initializes.
|
|
// }
|
|
|
|
// }))
|
|
// })
|
|
// const clickTrailer = document.querySelector(".trailer");
|
|
// if (!isNull(clickTrailer)) {
|
|
// const embedId = clickTrailer.getAttribute("data-id");
|
|
// clickTrailer.addEventListener("click", (event) => {
|
|
// event.preventDefault();
|
|
// showTrailer(embedId);
|
|
// });
|
|
// }
|
|
}
|