Mercurial > code > home > repos > video

annotate src/PagePlayer.ts @ 39:b5b29f6ef5cb

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