Mercurial > code > home > repos > video

comparison 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
comparison
equal deleted inserted replaced
46:882d0bb0f801 47:c2c51aae3e31
1 import { LitElement, html, css } from "lit"; 1 import { LitElement, css, html, unsafeCSS } from "lit";
2 import { customElement, property } from "lit/decorators.js"; 2 import { customElement, property } from "lit/decorators.js";
3 import "shaka-video-element"; 3 import "shaka-video-element";
4 import maincss from "./main.css?inline";
4 5
5 @customElement("video-section") 6 @customElement("video-section")
6 export class VideoSection extends LitElement { 7 export class VideoSection extends LitElement {
7 @property({ type: String }) manifest: string | undefined; 8 @property({ type: String }) manifest: string | undefined;
8 @property({ type: String }) webRelPath: string | undefined; 9 @property({ type: String }) webRelPath: string | undefined;
9 @property({ type: String }) thumbRelPath: string | undefined; 10 @property({ type: String }) thumbRelPath: string | undefined;
10 @property({ type: String }) title: string = "(unknown)"; 11 @property({ type: String }) title: string = "(unknown)";
11 @property({ type: String }) big: boolean = false; 12 @property({ type: String }) big: boolean = false;
12 13
13 static styles = [ 14 static styles = [
15 unsafeCSS(maincss),
14 css` 16 css`
15 :host { 17 :host {
16 display: inline-block;
17 }
18 section {
19 box-shadow: 4px 4px 2px #00000029;
20 border-radius: 5px;
21 background: #ffffff14;
22 display: inline-block;
23 padding: 10px;
24 color: white;
25 width: 255px;
26 }
27 .video-title {
28 line-clamp: 2;
29 height: 3.2em;
30 }
31 #imgCrop {
32 overflow: hidden;
33 width: 250px;
34 height: 140px;
35 background-repeat: no-repeat;
36 background-position: center;
37 background-size: contain;
38 display: inline-block; 18 display: inline-block;
39 } 19 }
40 `, 20 `,
41 ]; 21 ];
42 render() { 22 render() {
43 return html` 23 return html`
44 <section @click=${this.click}> 24 <div class="videoListing" @click=${this.click}>
45 <div class="video-title" title="${this.title}">${this.title}</div> 25 <div class="video-title" title="${this.title}">${this.title}</div>
46 <span id="imgCrop" style='background-image: url("${this.thumbRelPath}")'></span> 26 <span id="imgCrop" style='background-image: url("${this.thumbRelPath}")'></span>
47 </section> 27 </div>
48 `; 28 `;
49 } 29 }
50 click() { 30 click() {
51 this.dispatchEvent( 31 this.dispatchEvent(
52 new CustomEvent("playVideo", { 32 new CustomEvent("playVideo", {