Mercurial > code > home > repos > video

annotate 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
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;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
25 }
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
26 div.hidden {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
27 display: none;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
28 }
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
29 shaka-video {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
30 width: 100%;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
31 height: 100%;
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
32 }
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 updated(oldVals: PropertyValues<this>) {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
37 if (oldVals.get("size")) {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
38 if (this.size == "hidden") {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
39 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
40 player.pause();
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
41 } else if (this.size == "big") {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
42 } else if (this.size == "full") {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
43 }
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 render() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
47 return html`
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
48 <div class="${this.size}">
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
49 <shaka-video src="${this.manifest}" controls></video>
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
50 </div>
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents:
diff changeset
51 `;
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 }