WIP: video can now be played but the 'play' icon doesn't display correctly

This commit is contained in:
Noah Lancien 2023-06-09 17:06:20 +02:00
parent 00b4e85525
commit d2ce6edec5
4 changed files with 80 additions and 25 deletions

View file

@ -73,7 +73,7 @@ class SecureHeaders
);
$response->headers->set('Feature-Policy', \implode(',', [
'fullscreen', 'accelerometer', 'encrypted-media',
'gyroscope', 'picture-in-picture', '\'self\''
'gyroscope', 'picture-in-picture'
]) . ';');
return $response;
}

46
resources/js/main.js vendored
View file

@ -41,6 +41,52 @@ pages.keys().map(key => {
});
});
document.addEventListener('DOMContentLoaded', function () {
// * Video frames.
console.log('là');
const videoFrameList = document.querySelectorAll(".video-frame");
console.log(videoFrameList);
for (const videoLink of videoFrameList) {
if (!videoLink.dataset.type) {
throw new Error("Missing dataset type");
}
if (!videoLink.dataset.frame) {
throw new Error("Missing dataset frame");
}
// @ts-ignore
window.__CN_VIDEO = window.__CN_VIDEO ?? {};
const newIframe = document.createElement("iframe");
newIframe.frameBorder = "0";
newIframe.allow = "fullscreen";
newIframe.width = "1920px";
newIframe.height = "1080px";
newIframe.setAttribute("allowfullscreen", "allowfullscreen");
// @ts-ignore
const instance = new FsLightbox();
instance.props.sources = [newIframe];
setTimeout(() => {
videoLink.addEventListener("click", (e) => {
e.preventDefault();
// * This comes fslightbox lib
// @ts-ignore
instance.open();
setTimeout(function () {
// @ts-ignore
newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
? String(videoLink.href)
: String(videoLink.dataset.frame);
console.log(newIframe);
}, 50);
return false;
});
}, 300);
}
})
let vueOptions = {
el: "#app"
};

View file

@ -1,3 +1,9 @@
<div class="video vimeo" data-authorize="0">
<iframe src="/frame/vimeo" data-src="https://player.vimeo.com/video{{ parse_url($url, PHP_URL_PATH) }}" width="100%" height="100%" frameborder="0" allow="fullscreen"></iframe>
</div>
<a class="video vimeo video-frame" style="display: block;width: 1rem" data-type="vimeo" data-frame="{{ route('front.frame', ['type' => 'vimeo']) }}" href="https://player.vimeo.com/video{{ parse_url($url, PHP_URL_PATH) }}" data-authorize="0">
<img
class="relative w-100"
src="https://vumbnail.com/{{ parse_url($url, PHP_URL_PATH) }}.jpg"
alt="Alt"
title="Title"
>
<i class="youtube-play-button absolute top-50 left-50 fa fa-regular fa-circle-play"></i>
</a>

View file

@ -64,9 +64,9 @@ FALLBACK;
// VIMEO
$cookies['vimeo'] = [
'name' => __('cookie-notice.custom.youtube.name'),
'description' => __('cookie-notice.custom.youtube.description'),
'labelLink' => __('cookie-notice.custom.youtube.labelLink'),
'name' => __('cookie-notice.custom.vimeo.name'),
'description' => __('cookie-notice.custom.vimeo.description'),
'labelLink' => __('cookie-notice.custom.vimeo.labelLink'),
'link' => 'https://vimeo.com/cookie_policy',
'cookies' => []
];
@ -201,23 +201,26 @@ SCRIPT;
@push('scripts')
<script nonce="{{ $nonce ?? '' }}">
window.WebCookieNotice = {};
@foreach($cookies as $index_name => $cookie)
window.WebCookieNotice['{{ $index_name }}'] = {};
window.WebCookieNotice['{{ $index_name }}'].tmp = {};
// SCRIPT
window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
@php unset($cookie['script']); @endphp
// FALLBACK
@if(isset($cookie['fallback']))
window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
@php unset($cookie['fallback']); @endphp
@endif
window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
@endforeach
window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
document.addEventListener('DOMContentLoaded', function () {
window.WebCookieNotice = {};
@foreach($cookies as $index_name => $cookie)
window.WebCookieNotice['{{ $index_name }}'] = {};
window.WebCookieNotice['{{ $index_name }}'].tmp = {};
// SCRIPT
window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
@php unset($cookie['script']); @endphp
// FALLBACK
@if(isset($cookie['fallback']))
window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
@php unset($cookie['fallback']); @endphp
@endif
window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
@endforeach
window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
});
</script>
@endpush