mirror of https://github.com/requarks/wiki
NGPixel
4 weeks ago
parent
ad861ae377
commit
1aefb34d92
@ -0,0 +1,345 @@
|
|||||||
|
import { LitElement, html, css } from 'lit'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An attribute that means "off" when it says so.
|
||||||
|
*
|
||||||
|
* MDC writes every prop with a value — `autoplay="false"` is what the block picker produces for a
|
||||||
|
* toggle that was switched on and off again — and Lit's own Boolean converter reads any string at all
|
||||||
|
* as true, that one included.
|
||||||
|
*
|
||||||
|
* It is also what lets a prop here default to ON, which the note in `block-index` rules out for a
|
||||||
|
* block using the stock converter: `controls` is left out of the markup while it holds its default,
|
||||||
|
* and written as `controls="false"` the moment it does not, which this reads back correctly.
|
||||||
|
*/
|
||||||
|
const boolean = {
|
||||||
|
converter: {
|
||||||
|
fromAttribute: (value) => value !== null && value !== 'false',
|
||||||
|
toAttribute: (value) => (value ? 'true' : null)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Every YouTube host a link can arrive on, including the one their own privacy mode hands out. */
|
||||||
|
const HOSTS = /^(?:www\.|m\.)?youtube(?:-nocookie)?\.com$/
|
||||||
|
|
||||||
|
/** The paths that carry the id in them, rather than in `?v=`. */
|
||||||
|
const ID_PATHS = /^\/(?:embed|shorts|live|v)\/([^/?#]+)/
|
||||||
|
|
||||||
|
/** What a video id is made of. Length is not checked: that is YouTube's to change, not ours. */
|
||||||
|
const ID = /^[A-Za-z0-9_-]+$/
|
||||||
|
|
||||||
|
/** A timestamp as YouTube writes it in a share link: `90`, `1m30s`, `1h2m3s`. */
|
||||||
|
const TIMESTAMP = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The video a link points at, or null for a link that points at no video.
|
||||||
|
*
|
||||||
|
* Every shape YouTube hands out: `watch?v=`, `youtu.be/`, `/embed/`, `/shorts/`, `/live/`. A bare id
|
||||||
|
* is taken as one too — it is what an author who copied the id rather than the link will paste, and
|
||||||
|
* there is nothing else an eleven-character word could be meant as here.
|
||||||
|
*/
|
||||||
|
function videoId(source) {
|
||||||
|
const value = source.trim()
|
||||||
|
if (!value) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if (ID.test(value)) {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
// -> A link written without a scheme is still a link; `new URL` disagrees, so it is given one
|
||||||
|
const url = URL.parse(value) ?? URL.parse(`https://${value}`)
|
||||||
|
if (!url) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
const host = url.hostname.toLowerCase()
|
||||||
|
const id =
|
||||||
|
host === 'youtu.be'
|
||||||
|
? url.pathname.slice(1).split('/')[0]
|
||||||
|
: !HOSTS.test(host)
|
||||||
|
? null
|
||||||
|
: url.pathname === '/watch'
|
||||||
|
? url.searchParams.get('v')
|
||||||
|
: (ID_PATHS.exec(url.pathname)?.[1] ?? null)
|
||||||
|
return id && ID.test(id) ? id : null
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Where in the video a link says to start, in seconds. 0 for one that does not say.
|
||||||
|
*
|
||||||
|
* `t` is what the "copy link at current time" button adds, and it arrives either as a plain count of
|
||||||
|
* seconds or as `1m30s`. `start` is the same thing spelled the way the embed parameter is.
|
||||||
|
*/
|
||||||
|
function linkStart(source) {
|
||||||
|
const url = URL.parse(source.trim()) ?? URL.parse(`https://${source.trim()}`)
|
||||||
|
const value = url?.searchParams.get('t') ?? url?.searchParams.get('start') ?? ''
|
||||||
|
if (/^\d+$/.test(value)) {
|
||||||
|
return Number(value)
|
||||||
|
}
|
||||||
|
const parts = TIMESTAMP.exec(value)
|
||||||
|
if (!parts || !parts.slice(1).some(Boolean)) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
return Number(parts[1] ?? 0) * 3600 + Number(parts[2] ?? 0) * 60 + Number(parts[3] ?? 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Block YouTube
|
||||||
|
*
|
||||||
|
* A YouTube player, from the address of a video. Nothing is fetched until the frame is scrolled near,
|
||||||
|
* and the frame is the only thing here: the player, its controls and everything it does are YouTube's,
|
||||||
|
* driven by the parameters below.
|
||||||
|
*/
|
||||||
|
export class BlockYoutubeElement extends LitElement {
|
||||||
|
/**
|
||||||
|
* Metadata for the admin area and the editor's block picker. Collected at build time into
|
||||||
|
* `compiled/blocks.manifest.json`, which the server reads to register the block. Values must be
|
||||||
|
* plain literals. See `props` in `block-index` for what the picker does with that list.
|
||||||
|
*/
|
||||||
|
static definition = {
|
||||||
|
block: 'youtube',
|
||||||
|
name: 'YouTube Player',
|
||||||
|
description: 'Embeds a YouTube video.',
|
||||||
|
icon: 'youtube',
|
||||||
|
props: [
|
||||||
|
{
|
||||||
|
name: 'url',
|
||||||
|
type: 'string',
|
||||||
|
label: 'Video URL',
|
||||||
|
hint: 'Address of the video, as YouTube gives it — a watch, youtu.be or shorts link.',
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'width',
|
||||||
|
type: 'number',
|
||||||
|
label: 'Width',
|
||||||
|
hint: 'Width of the player in pixels. Empty fills the width of the page.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'height',
|
||||||
|
type: 'number',
|
||||||
|
label: 'Height',
|
||||||
|
hint: 'Height of the player in pixels. Empty keeps the widescreen shape.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'autoplay',
|
||||||
|
type: 'boolean',
|
||||||
|
label: 'Autoplay',
|
||||||
|
hint: 'Start as soon as the page is opened. Browsers only allow that muted, so it is.',
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'controls',
|
||||||
|
type: 'boolean',
|
||||||
|
label: 'Show Controls',
|
||||||
|
hint: 'Show the play bar over the video.',
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'fs',
|
||||||
|
type: 'boolean',
|
||||||
|
label: 'Allow Fullscreen',
|
||||||
|
hint: 'Offer the fullscreen button.',
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'loop',
|
||||||
|
type: 'boolean',
|
||||||
|
label: 'Loop',
|
||||||
|
hint: 'Start again on reaching the end.',
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'start',
|
||||||
|
type: 'number',
|
||||||
|
label: 'Start At',
|
||||||
|
hint: 'Seconds into the video to start at. 0 uses the time in the URL, if it carries one.',
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
The frame's box, and the gap below the block. On this element rather than :host: see
|
||||||
|
block-index.
|
||||||
|
|
||||||
|
-> A max-width rather than a plain width, so a player asked for at 1280 on a phone is the
|
||||||
|
width of the phone instead of pushing the page sideways. The aspect ratio then keeps it
|
||||||
|
widescreen at whatever width it ends up with, which is what a fixed height would not.
|
||||||
|
*/
|
||||||
|
.player {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px dashed color-mix(in srgb, currentColor 50%, transparent);
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--q-negative, #c10015);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
/**
|
||||||
|
* Address of the video
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
url: { type: String },
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Width of the player in pixels
|
||||||
|
* @type {number}
|
||||||
|
*/
|
||||||
|
width: { type: Number },
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Height of the player in pixels
|
||||||
|
* @type {number}
|
||||||
|
*/
|
||||||
|
height: { type: Number },
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to start without being asked
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
autoplay: boolean,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the play bar is shown
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
controls: boolean,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether the fullscreen button is offered
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
fs: boolean,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether to start again at the end
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
loop: boolean,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Seconds into the video to start at
|
||||||
|
* @type {number}
|
||||||
|
*/
|
||||||
|
start: { type: Number }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.url = ''
|
||||||
|
this.width = null
|
||||||
|
this.height = null
|
||||||
|
this.autoplay = false
|
||||||
|
this.controls = true
|
||||||
|
this.fs = true
|
||||||
|
this.loop = false
|
||||||
|
this.start = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A prop given a usable number, or null for one left empty. */
|
||||||
|
_size(value) {
|
||||||
|
const size = Number(value)
|
||||||
|
return Number.isFinite(size) && size > 0 ? size : null
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The address of the player, with what it was asked for.
|
||||||
|
*
|
||||||
|
* Only the parameters that were actually changed: an option left out is YouTube's own default,
|
||||||
|
* which is the one that goes on being maintained.
|
||||||
|
*/
|
||||||
|
_embedUrl(id) {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
if (this.autoplay) {
|
||||||
|
params.set('autoplay', '1')
|
||||||
|
/*
|
||||||
|
-> Muted, because that is the only way it plays. Every browser refuses to start a video with
|
||||||
|
sound before the reader has interacted with the page, and refuses silently: the player
|
||||||
|
simply sits there, which reads as a block that is broken rather than one being overruled.
|
||||||
|
*/
|
||||||
|
params.set('mute', '1')
|
||||||
|
}
|
||||||
|
if (!this.controls) {
|
||||||
|
params.set('controls', '0')
|
||||||
|
}
|
||||||
|
if (!this.fs) {
|
||||||
|
params.set('fs', '0')
|
||||||
|
}
|
||||||
|
if (this.loop) {
|
||||||
|
params.set('loop', '1')
|
||||||
|
// -> A single video loops only as a playlist of itself; `loop` alone does nothing to one
|
||||||
|
params.set('playlist', id)
|
||||||
|
}
|
||||||
|
const start = this._size(this.start) ?? linkStart(this.url)
|
||||||
|
if (start > 0) {
|
||||||
|
params.set('start', String(start))
|
||||||
|
}
|
||||||
|
const query = params.toString()
|
||||||
|
return `https://www.youtube.com/embed/${id}${query ? `?${query}` : ''}`
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const id = videoId(this.url ?? '')
|
||||||
|
if (!id) {
|
||||||
|
return html`
|
||||||
|
<div class="error">
|
||||||
|
${
|
||||||
|
this.url?.trim()
|
||||||
|
? `${this.url} is not the address of a YouTube video.`
|
||||||
|
: 'This player needs the address of a YouTube video.'
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
const width = this._size(this.width)
|
||||||
|
const height = this._size(this.height)
|
||||||
|
/*
|
||||||
|
A height that was asked for wins outright; without one the frame is widescreen, which is the
|
||||||
|
shape all but the oldest videos are. Letterboxing inside the frame is YouTube's business either
|
||||||
|
way -- the player fits the video to whatever box it is given.
|
||||||
|
*/
|
||||||
|
const style = [
|
||||||
|
width ? `width: ${width}px` : 'width: 100%',
|
||||||
|
height ? `height: ${height}px` : 'aspect-ratio: 16 / 9'
|
||||||
|
].join('; ')
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="player" style=${style}>
|
||||||
|
<iframe
|
||||||
|
src=${this._embedUrl(id)}
|
||||||
|
title="YouTube video player"
|
||||||
|
loading="lazy"
|
||||||
|
referrerpolicy="strict-origin-when-cross-origin"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
?allowfullscreen=${this.fs}></iframe>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.customElements.define('block-youtube', BlockYoutubeElement)
|
||||||
Loading…
Reference in new issue