Mercurial > code > home > repos > video

annotate src/VideoSection.ts @ 6:ccfea3625cf6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
render thumbs and display them (no video player at all atm)
author drewp@bigasterisk.com
date Sun, 09 Apr 2023 18:02:25 -0700
parents c8a41359505c
children f80f8c22752d
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
1 import { LitElement, html, css } 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";
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
4
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
5 @customElement("video-section")
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
6 export class VideoSection extends LitElement {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
7 @property({ type: String }) manifest: string | undefined;
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 4
diff changeset
8 @property({ type: String }) thumbRelPath: string | undefined;
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
9 @property({ type: String }) title: string = "(unknown)";
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
10 @property({ type: String }) big: boolean = false;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
11
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
12 static styles = [
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
13 css`
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
14 section {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
15 background: #ffffff14;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
16 display: inline-block;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
17 padding: 10px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
18 color: white;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
19 width: 300px;
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 #video.big {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
22 z-index: 2;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
23 position: fixed;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
24 left: 0px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
25 top: 0px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
26 }
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
27 `,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
28 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
29 render() {
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
30 const vidCls = this.big ? "big" : "";
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
31 const inx = 20,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
32 iny = 50;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
33 const inw = 300,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
34 inh = 150;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
35 const outw = 720,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
36 outh = 480;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
37 const scl = outh / inh;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
38 const tx = (document.body.clientWidth - inw * scl) / 2,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
39 ty = (document.body.clientHeight - inh * scl) / 2;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
40 const style = this.big ? `transform: translate(${-inx - inw / 2}px,${-iny - inh / 2}px) scale(${outh / inh}) translate(${tx}px,${ty}px);` : "";
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
41 return html`
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
42 <section>
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
43 <h1>${this.title}</h1>
6
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 4
diff changeset
44 <!-- <shaka-video class="${vidCls}" style="${style}" id="video" width="720" height="480" src="${this.manifest}" controls></video>-->
ccfea3625cf6 render thumbs and display them (no video player at all atm)
drewp@bigasterisk.com
parents: 4
diff changeset
45 <img src="${this.thumbRelPath}" />
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
46 </section>
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
47 `;
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
48 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
49 updated() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
50 // const el=this.querySelector("#video")
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
51 // console.log(el.clientWidth);
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
52 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
53 }