Mercurial > code > home > repos > video

comparison src/PagePlayer.ts @ 8:f80f8c22752d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start PagePlayer, a singleton player that appears on top
author drewp@bigasterisk.com
date Sun, 09 Apr 2023 19:37:05 -0700
parents
children b5b29f6ef5cb
comparison
equal deleted inserted replaced
7:de93b9133acb 8:f80f8c22752d
1 import { LitElement, html, css, PropertyValues } from "lit";
2 import { customElement, property } from "lit/decorators.js";
3 import "shaka-video-element";
4
5 interface CustomVideoElement extends HTMLVideoElement {}
6
7 export interface ShakaVideoElement extends CustomVideoElement {}
8
9 @customElement("page-player")
10 export class PagePlayer extends LitElement {
11 @property({ type: String }) manifest: string | undefined;
12 @property({ type: String }) size: "hidden" | "big" | "full" = "hidden";
13 player!: Element;
14 static styles = [
15 css`
16 div {
17 z-index: 2;
18 position: fixed;
19 }
20 div.full {
21 inset: 0;
22 }
23 div.big {
24 inset: 5em;
25 }
26 div.hidden {
27 display: none;
28 }
29 shaka-video {
30 width: 100%;
31 height: 100%;
32 }
33 `,
34 ];
35
36 updated(oldVals: PropertyValues<this>) {
37 if (oldVals.get("size")) {
38 if (this.size == "hidden") {
39 const player = this.shadowRoot!.querySelector("shaka-video")! as ShakaVideoElement;
40 player.pause();
41 } else if (this.size == "big") {
42 } else if (this.size == "full") {
43 }
44 }
45 }
46 render() {
47 return html`
48 <div class="${this.size}">
49 <shaka-video src="${this.manifest}" controls></video>
50 </div>
51 `;
52 }
53 }