1// javascript/chives-video.js
2// chives version: 52
3
4// ChivesVideo provides a <chives-video> component that renders
5// a VideoEntity on a web page.
6//
7// Example usage:
8//
9//     const elem = document.createElement("chives-video");
10//
11//     elem.href = props.path;
12//     elem.videoEntity = props;
13//
14class ChivesVideo extends HTMLElement {
15  static get observedAttributes() {
16    return [
17      //
18      // Fields from VideoEntity
19      "path",
20      "width",
21      "height",
22      "poster-path",
23      "subtitles",
24      "autoplay",
25    ];
26  }
27
28  // videoEntity allows you to pass a VideoEntity directly from JavaScript.
29  //
30  // For example:
31  //
32  //     const elem = document.createElement("chives-video");
33  //     elem.videoEntity = videoEntity;
34  //
35  set videoEntity(entity) {
36    this.setAttribute("path", entity.path);
37    this.setAttribute("width", entity.width);
38    this.setAttribute("height", entity.height);
39
40    this.setAttribute("poster-path", entity.poster.path);
41
42    if (Array.isArray(entity.subtitles)) {
43      this.setAttribute(
44        "subtitles",
45        entity.subtitles.map(s => s.label).join(";"),
46      );
47      entity.subtitles.forEach(s =>
48        this.#setSubtitleAttribute(s.label, s.path)
49      );
50    }
51
52    if (entity.autoplay) {
53      this.setAttribute("autoplay", "");
54    } else {
55      this.removeAttribute("autoplay");
56    }
57  }
58
59  // Rather than re-rendering the component on every attribute change
60  // (which will fire seven times when we set imageEntity), batch render
61  // changes together into the next event loop tick.
62  #renderTimeout = null;
63
64  connectedCallback() {
65    this.scheduleRender();
66  }
67
68  attributeChangedCallback() {
69    this.scheduleRender();
70  }
71
72  scheduleRender() {
73    if (this.#renderTimeout) {
74      cancelAnimationFrame(this.#renderTimeout);
75    }
76    this.#renderTimeout = requestAnimationFrame(() => {
77      this.render();
78    });
79  }
80
81  // Render the component.
82  render() {
83    // Gather properties from attributes
84
85    const path = this.getAttribute("path");
86    const width = this.getAttribute("width");
87    const height = this.getAttribute("height");
88
89    const posterPath = this.getAttribute("poster-path");
90
91    const subtitles = (this.getAttribute("subtitles") || "")
92      .split(";")
93      .filter(label => label !== "")
94      .map(label => {
95        const path = this.#getSubtitleAttribute(label);
96        return { label, path };
97      });
98
99    const autoplay = this.hasAttribute("autoplay");
100
101    // Create a wrapper div.
102    const wrapper = document.createElement("div");
103
104    // Add CSS classes and properties to the wrapper element.
105    wrapper.classList.add("chives_video");
106
107    wrapper.style.setProperty("--width", width);
108    wrapper.style.setProperty("--height", height);
109
110    // Add a data-orientation property to the wrapper element.
111    const widthNum = parseFloat(width);
112    const heightNum = parseFloat(height);
113
114    if (!isNaN(widthNum) && !isNaN(heightNum)) {
115      let orientation = "square";
116      if (widthNum > heightNum) {
117        orientation = "landscape";
118      } else if (widthNum < heightNum) {
119        orientation = "portrait";
120      }
121      wrapper.setAttribute("data-orientation", orientation);
122    }
123
124    // Build the <video> element.
125    const video = document.createElement("video");
126
127    if (autoplay) {
128      video.autoplay = true;
129      video.loop = true;
130      video.muted = true;
131      video.playsInline = true;
132    } else {
133      video.controls = true;
134    }
135
136    video.preload = "none";
137    video.src = path;
138    video.poster = posterPath;
139
140    subtitles.forEach(s => {
141      const track = document.createElement("track");
142      track.kind = "subtitles";
143      track.label = s.label;
144      track.src = s.path;
145      track.srclang = s.label.substring(0, 2).toLowerCase()
146      video.appendChild(track);
147    });
148
149    wrapper.appendChild(video);
150    this.replaceChildren(wrapper);
151  }
152
153  // We store subtitle paths in attributes like `subtitles-english-cc`.
154  //
155  // Because spaces and special characters break HTML attribute value parsing,
156  // tidy labels into lowercase, hyphen-separated strings.
157  #subtitleAttributeName(label) {
158    return "subtitles-" + label.replace(/[^a-zA-Z]+/g, "-").toLowerCase();
159  }
160
161  #setSubtitleAttribute(label, path) {
162    this.setAttribute(this.#subtitleAttributeName(label), path);
163  }
164
165  #getSubtitleAttribute(label) {
166    return this.getAttribute(this.#subtitleAttributeName(label));
167  }
168}
169
170// Register global styles for the <chives-video> element.
171if (typeof document !== "undefined" &&
172    !document.getElementById("chives-video-styles")) {
173  const style = document.createElement("style");
174  style.id = "chives-video-styles";
175  style.textContent = `
176    .chives_video {
177      display: block;
178      aspect-ratio: var(--width) / var(--height);
179      width:        100%;
180
181      video {
182        width:  100%;
183        height: 100%;
184        object-fit: cover;
185        display: block;
186      }
187    }
188  `;
189  document.head.appendChild(style);
190}
191
192// Register the custom HTML tag <chives-video>
193if (!customElements.get("chives-video")) {
194  customElements.define("chives-video", ChivesVideo);
195}