Mercurial > code > home > repos > video

annotate src/VideoSection.ts @ 47:c2c51aae3e31

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
pull styles into main.css
author drewp@bigasterisk.com
date Fri, 06 Dec 2024 09:27:10 -0800
parents df51269bcef4
children 046673b1cc24
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
47
c2c51aae3e31 pull styles into main.css
drewp@bigasterisk.com
parents: 45
diff changeset
1 import { LitElement, css, html, unsafeCSS } from "lit";
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, property } from "lit/decorators.js";
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
3 import "shaka-video-element";
47
c2c51aae3e31 pull styles into main.css
drewp@bigasterisk.com
parents: 45
diff changeset
4 import maincss from "./main.css?inline";
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
5
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
6 @customElement("video-section")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
7 export class VideoSection extends LitElement {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
8 @property({ type: String }) manifest: string | undefined;
45
df51269bcef4 fix back/fwd nav and player loading
drewp@bigasterisk.com
parents: 41
diff changeset
9 @property({ type: String }) webRelPath: string | undefined;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 4
diff changeset
10 @property({ type: String }) thumbRelPath: string | undefined;
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
11 @property({ type: String }) title: string = "(unknown)";
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
12 @property({ type: String }) big: boolean = false;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
13
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 static styles = [
47
c2c51aae3e31 pull styles into main.css
drewp@bigasterisk.com
parents: 45
diff changeset
15 unsafeCSS(maincss),
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
16 css`
41
drewp@bigasterisk.com
parents: 22
diff changeset
17 :host {
drewp@bigasterisk.com
parents: 22
diff changeset
18 display: inline-block;
drewp@bigasterisk.com
parents: 22
diff changeset
19 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
20 `,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
21 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
22 render() {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
23 return html`
47
c2c51aae3e31 pull styles into main.css
drewp@bigasterisk.com
parents: 45
diff changeset
24 <div class="videoListing" @click=${this.click}>
41
drewp@bigasterisk.com
parents: 22
diff changeset
25 <div class="video-title" title="${this.title}">${this.title}</div>
drewp@bigasterisk.com
parents: 22
diff changeset
26 <span id="imgCrop" style='background-image: url("${this.thumbRelPath}")'></span>
47
c2c51aae3e31 pull styles into main.css
drewp@bigasterisk.com
parents: 45
diff changeset
27 </div>
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
28 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
29 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
30 click() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
31 this.dispatchEvent(
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
32 new CustomEvent("playVideo", {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
33 detail: {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
34 manifest: this.manifest,
45
df51269bcef4 fix back/fwd nav and player loading
drewp@bigasterisk.com
parents: 41
diff changeset
35 webRelPath: this.webRelPath,
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
36 zoomFrom: "my location",
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
37 },
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
38 })
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
39 );
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
40 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
41 updated() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
42 // const el=this.querySelector("#video")
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
43 // console.log(el.clientWidth);
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
44 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
45 }