WIP: video can now be played but the 'play' icon doesn't display correctly
This commit is contained in:
parent
00b4e85525
commit
d2ce6edec5
4 changed files with 80 additions and 25 deletions
|
|
@ -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
46
resources/js/main.js
vendored
|
|
@ -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"
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue