Mercurial > code > home > repos > video

annotate src/VideoSection.ts @ 41:44bd161e4779

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
layout
author drewp@bigasterisk.com
date Thu, 05 Dec 2024 21:33:25 -0800
parents ff73b95fc72f
children df51269bcef4
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`
41
drewp@bigasterisk.com
parents: 22
diff changeset
14 :host {
drewp@bigasterisk.com
parents: 22
diff changeset
15 display: inline-block;
drewp@bigasterisk.com
parents: 22
diff changeset
16 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
17 section {
41
drewp@bigasterisk.com
parents: 22
diff changeset
18 box-shadow: 4px 4px 2px #00000029;
drewp@bigasterisk.com
parents: 22
diff changeset
19 border-radius: 5px;
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
20 background: #ffffff14;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
21 display: inline-block;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
22 padding: 10px;
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
23 color: white;
41
drewp@bigasterisk.com
parents: 22
diff changeset
24 width: 255px;
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
25 }
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 8
diff changeset
26 .video-title {
41
drewp@bigasterisk.com
parents: 22
diff changeset
27 line-clamp: 2;
drewp@bigasterisk.com
parents: 22
diff changeset
28 height: 3.2em;
drewp@bigasterisk.com
parents: 22
diff changeset
29 }
drewp@bigasterisk.com
parents: 22
diff changeset
30 #imgCrop {
drewp@bigasterisk.com
parents: 22
diff changeset
31 overflow: hidden;
drewp@bigasterisk.com
parents: 22
diff changeset
32 width: 250px;
drewp@bigasterisk.com
parents: 22
diff changeset
33 height: 140px;
drewp@bigasterisk.com
parents: 22
diff changeset
34 background-repeat: no-repeat;
drewp@bigasterisk.com
parents: 22
diff changeset
35 background-position: center;
drewp@bigasterisk.com
parents: 22
diff changeset
36 background-size: contain;
drewp@bigasterisk.com
parents: 22
diff changeset
37 display: inline-block;
22
ff73b95fc72f frontend cleanups and improvements. this commit contains some future work too
drewp@bigasterisk.com
parents: 8
diff changeset
38 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
39 `,
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
40 ];
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
41 render() {
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
42 return html`
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
43 <section @click=${this.click}>
41
drewp@bigasterisk.com
parents: 22
diff changeset
44 <div class="video-title" title="${this.title}">${this.title}</div>
drewp@bigasterisk.com
parents: 22
diff changeset
45 <span id="imgCrop" style='background-image: url("${this.thumbRelPath}")'></span>
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 }
8
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
49 click() {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
50 this.dispatchEvent(
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
51 new CustomEvent("playVideo", {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
52 detail: {
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
53 manifest: this.manifest,
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
54 zoomFrom: "my location",
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
55 },
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
56 })
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
57 );
f80f8c22752d start PagePlayer, a singleton player that appears on top
drewp@bigasterisk.com
parents: 6
diff changeset
58 }
4
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
59 updated() {
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
60 // const el=this.querySelector("#video")
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
61 // console.log(el.clientWidth);
c8a41359505c server provides video listing from disk
drewp@bigasterisk.com
parents: 2
diff changeset
62 }
2
78c1a2983010 rewrite UI and file serving parts; use vite
drewp@bigasterisk.com
parents:
diff changeset
63 }