Files
v10/site/src/components/LegacyBanner.astro
T

61 lines
1.5 KiB
Plaintext

---
import { BANNER_DISMISS_KEY } from '@/consts';
---
<div
data-legacy-banner
class:list={[
"banner-dismissed:hidden",
"relative py-2 text-p3 md:text-p2",
"border-b border-manila-75 bg-manila-50 text-faded-black",
"dark:border-soot dark:bg-warm-gray dark:text-manila-light",
]}
>
<p class="px-12 text-center">
Using Video.js v8 or earlier?{" "}
<a
href="https://legacy.videojs.org"
class="font-bold whitespace-nowrap underline intent:decoration-gold"
>
Visit legacy.videojs.org
</a>
</p>
<button
type="button"
data-legacy-banner-dismiss
aria-label="Dismiss banner"
class:list={[
"absolute top-1/2 right-2 -translate-y-1/2",
"shrink-0 cursor-pointer rounded p-2 intent:bg-manila-light dark:intent:bg-faded-black",
]}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<script is:inline define:vars={{ bannerKey: BANNER_DISMISS_KEY }}>
var dismissBtn = document.querySelector("[data-legacy-banner-dismiss]");
if (dismissBtn) {
dismissBtn.addEventListener("click", function () {
try {
localStorage.setItem(bannerKey, "true");
} catch (e) {}
document.documentElement.classList.add("banner-dismissed");
});
}
</script>