feat: lr-video stage 1

uploadcare · Jul 22, 2022 · 626d5b6 · 626d5b6
1 parent 7a73ac1
commit 626d5b6
Show file tree

Hide file tree

Showing 30 changed files with 570 additions and 91 deletions.
diff --git a/TOC.md b/TOC.md
@@ -56,6 +56,7 @@
       - [UploadDetails](./blocks/UploadDetails/) - displays file details and adittional features
       - [UploadList](./blocks/UploadList/) - shows the list of uploads
       - [UrlSource](./blocks/UrlSource/) - file uploading from the external URL
+      - [Video](./blocks/Video/) - wrapper element for the browser video tag
 
   - [abstract](./abstract/) - common code abstractions (abstract classes)
 

diff --git a/abstract/Block.js b/abstract/Block.js
@@ -63,6 +63,14 @@ export class Block extends BaseComponent {
     }
   }
 
+  connectedCallback() {
+    if (this.hasAttribute('retpl')) {
+      this.constructor['template'] = null;
+      this.processInnerHtml = true;
+    }
+    super.connectedCallback();
+  }
+
   initCallback() {
     this.$['*ctxTargetsRegistry']?.add(this.constructor['is']);
   }

diff --git a/blocks/CloudImageEditor/src/elements/slider/test.htm b/blocks/CloudImageEditor/src/elements/slider/test.htm
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SliderUi</title>
-    <script src="test.js" type="module"></script>
+    <script src="./test.js" type="module"></script>
   </head>
   <body>
     <lr-ctx-provider></lr-ctx-provider>

diff --git a/blocks/EditableCanvas/test/test.htm b/blocks/EditableCanvas/test/test.htm
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LocalEditor</title>
     <link rel="stylesheet" href="../../../site/css/dark-en.css" />
-    <script src="test.js" type="module"></script>
+    <script src="./test.js" type="module"></script>
     <style>
       html,
       body {

diff --git a/blocks/FileItem/ref.htm b/blocks/FileItem/ref.htm
@@ -2,7 +2,7 @@ <h1>FileItem</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-file-item class="lr-wgt-common"></lr-file-item>
 </lr-live-html>
diff --git a/blocks/Icon/ref.htm b/blocks/Icon/ref.htm
@@ -2,7 +2,7 @@ <h1>Icon</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-icon class="lr-wgt-common" name="file"></lr-icon>
 </lr-live-html>
diff --git a/blocks/ProgressBar/ref.htm b/blocks/ProgressBar/ref.htm
@@ -2,7 +2,7 @@ <h1>ProgressBar</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-progress-bar class="lr-wgt-common"></lr-progress-bar>
 </lr-live-html>
diff --git a/blocks/Range/Range.js b/blocks/Range/Range.js
@@ -1,47 +1,60 @@
-import { Block } from '../../abstract/Block.js';
+import { BaseComponent } from '@symbiotejs/symbiote';
 
-export class Range extends Block {
+export class Range extends BaseComponent {
   init$ = {
-    ...this.init$,
     cssLeft: '50%',
-    caption: 'CAPTION',
     barActive: false,
-    '*rangeValue': 100,
-    onChange: () => {
-      this.$['*rangeValue'] = this.ref.range['value'];
+    value: 50,
+    onChange: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.$.value = parseFloat(this._range.value);
+      this.dispatchEvent(new Event('change'));
     },
   };
 
   initCallback() {
     super.initCallback();
+    /** @type {HTMLInputElement} */
+    this._range = this.ref.range;
     [...this.attributes].forEach((attr) => {
       let exclude = ['style', 'ref'];
       if (!exclude.includes(attr.name)) {
         this.ref.range.setAttribute(attr.name, attr.value);
       }
     });
-    this.sub('*rangeValue', (val) => {
-      let pcnt = (val / this.ref.range['max']) * 100;
+    this.sub('value', (val) => {
+      let pcnt = (val / 100) * 100;
       this.$.cssLeft = `${pcnt}%`;
     });
+    this.defineAccessor('value', (val) => {
+      this.$.value = val;
+    });
   }
 }
 
 Range.template = /*html*/ `
-<datalist id="range-values">
-  <option value="0" label="min"></option>
-  <option value="100" label="0"></option>
-  <option value="200" label="max"></option>
-</datalist>
-<div class="track">
-  <div class="bar" set="style.width: cssLeft; @active: barActive"></div>
-  <div class="slider" set="style.left: cssLeft"></div>
-  <div class="center"></div>
-  <div class="caption" set="@text: caption">{{caption}}</div>
+<div class="track-wrapper">
+  <div
+    class="track">
+  </div>
+  <div 
+    class="bar" 
+    set
+    -style.width="cssLeft"
+    -@active="barActive">
+  </div>
+  <div 
+    class="slider" 
+    set
+    -style.left="cssLeft">
+  </div>
 </div>
+
 <input
   type="range"
   ref="range"
-  list="range-values"
-  set="@value: *rangeValue; oninput: onChange">
+  set
+  -@value="value"
+  -oninput="onChange" />
 `;
diff --git a/blocks/Range/range.css b/blocks/Range/range.css
@@ -16,25 +16,36 @@ lr-range input {
   opacity: 0;
 }
 
+lr-range .track-wrapper {
+  position: absolute;
+  right: 10px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2px;
+  user-select: none;
+  pointer-events: none;
+}
+
 lr-range .track {
   position: absolute;
   right: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--ui-size);
-  background-color: var(--clr-shade-lv1);
-  border: 2px solid var(--clr-background);
-  user-select: none;
-  pointer-events: none;
+  height: 2px;
+  background-color: currentColor;
+  border-radius: 2px;
+  opacity: 0.5;
 }
 
 lr-range .slider {
   position: absolute;
-  width: var(--ui-size);
-  height: var(--ui-size);
-  background-color: transparent;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
   border-radius: 100%;
   transform: translateX(-50%);
 }
@@ -43,23 +54,8 @@ lr-range .bar {
   position: absolute;
   left: 0;
   height: 100%;
-  background-color: var(--clr-accent);
-  opacity: 0.5;
-  transition: opacity 0.2s;
-}
-
-lr-range:hover:active .bar {
-  opacity: 1;
-}
-
-lr-range .center {
-  position: absolute;
-  left: 50%;
-  height: 100%;
-  border: 4px solid transparent;
-  border-top: 4px solid var(--clr-background);
-  border-bottom: 4px solid var(--clr-background);
-  transform: translateX(-50%);
+  background-color: currentColor;
+  border-radius: 2px;
 }
 
 lr-range .caption {

diff --git a/blocks/Range/ref.htm b/blocks/Range/ref.htm
@@ -2,7 +2,7 @@ <h1>Range</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-range class="lr-wgt-common"></lr-range>
 </lr-live-html>
diff --git a/blocks/Select/ref.htm b/blocks/Select/ref.htm
@@ -2,7 +2,7 @@ <h1>Select</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-select class="lr-wgt-common"></lr-select>
 </lr-live-html>
diff --git a/blocks/SimpleBtn/ref.htm b/blocks/SimpleBtn/ref.htm
@@ -2,7 +2,7 @@ <h1>SimpleBtn</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-simple-btn class="lr-wgt-common"></lr-simple-btn>
 </lr-live-html>
diff --git a/blocks/SourceBtn/ref.htm b/blocks/SourceBtn/ref.htm
@@ -2,7 +2,7 @@ <h1>SourceBtn</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-source-btn class="lr-wgt-common" type="camera"></lr-source-btn>
 </lr-live-html>
diff --git a/blocks/SourceList/ref.htm b/blocks/SourceList/ref.htm
@@ -2,7 +2,7 @@ <h1>SourceList</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-source-list class="lr-wgt-common"></lr-source-list>
 </lr-live-html>
diff --git a/blocks/StartFrom/ref.htm b/blocks/StartFrom/ref.htm
@@ -2,7 +2,7 @@ <h1>StartFrom</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-start-from class="lr-wgt-common">START</lr-start-from>
 </lr-live-html>
diff --git a/blocks/Tabs/ref.htm b/blocks/Tabs/ref.htm
@@ -2,7 +2,7 @@ <h1>Tabs</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
-  <script src="test.js" type="module"></script>
+  <script src="./test.js" type="module"></script>
 
   <lr-tabs class="lr-wgt-common" tab-list="First, Second" default="First">
     <h2 tab-ctx="First">First</h2>

diff --git a/blocks/UploadCtxProvider/UploadCtxProvider.js b/blocks/UploadCtxProvider/UploadCtxProvider.js
@@ -0,0 +1,3 @@
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+
+export class UploadCtxProvider extends UploaderBlock {}
diff --git a/blocks/UploadDetails/ref.htm b/blocks/UploadDetails/ref.htm
@@ -2,8 +2,7 @@ <h1>UploadDetails</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
+  <script src="./test.js" type="module"></script>
 
-  <script src="test.js" type="module"></script>
-
-  <div id="viewport"></div>
+  <lr-upload-details class="lr-wgt-common"></lr-upload-details>
 </lr-live-html>
diff --git a/blocks/UploadDetails/test.js b/blocks/UploadDetails/test.js
@@ -1,15 +1,13 @@
+import { ifRef } from '../../utils/ifRef.js';
 import { UploadDetails } from './UploadDetails.js';
 import { Icon } from '../Icon/Icon.js';
 import { Tabs } from '../Tabs/Tabs.js';
 import { EditableCanvas } from '../EditableCanvas/EditableCanvas.js';
 import { registerBlocks } from '../../abstract/registerBlocks.js';
 
-registerBlocks({ UploadDetails, Icon, Tabs, EditableCanvas });
-
-const uploadDetails = new UploadDetails();
-uploadDetails.classList.add('lr-wgt-common');
-
-window.onload = () => {
-  document.querySelector('#viewport')?.appendChild(uploadDetails);
+ifRef(() => {
+  registerBlocks({ UploadDetails, Icon, Tabs, EditableCanvas });
+  /** @type {UploadDetails} */
+  let uploadDetails = document.querySelector(UploadDetails.is);
   uploadDetails.$['*currentActivity'] = 'details';
-};
+});
diff --git a/blocks/UploadList/ref.htm b/blocks/UploadList/ref.htm
@@ -2,8 +2,7 @@ <h1>UploadList</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
+  <script src="./test.js" type="module"></script>
 
-  <script src="test.js" type="module"></script>
-
-  <div id="viewport"></div>
+  <lr-upload-list class="lr-wgt-common"></lr-upload-list>
 </lr-live-html>
diff --git a/blocks/UploadList/test.js b/blocks/UploadList/test.js
@@ -1,12 +1,10 @@
+import { ifRef } from '../../utils/ifRef.js';
 import { UploadList } from './UploadList.js';
 import { registerBlocks } from '../../abstract/registerBlocks.js';
 
-registerBlocks({ UploadList });
-
-const uploadList = new UploadList();
-uploadList.classList.add('lr-wgt-common');
-
-window.onload = () => {
-  document.querySelector('#viewport')?.appendChild(uploadList);
+ifRef(() => {
+  registerBlocks({ UploadList });
+  /** @type {UploadList} */
+  let uploadList = document.querySelector(UploadList.is);
   uploadList.$['*currentActivity'] = 'upload-list';
-};
+});
diff --git a/blocks/UrlSource/ref.htm b/blocks/UrlSource/ref.htm
@@ -2,8 +2,7 @@ <h1>UrlSource</h1>
 
 <lr-live-html>
   <link rel="stylesheet" href="../themes/lr-basic/index.css" />
+  <script src="./test.js" type="module"></script>
 
-  <script src="test.js" type="module"></script>
-
-  <div id="viewport"></div>
+  <lr-url-source class="lr-wgt-common"></lr-url-source>
 </lr-live-html>
diff --git a/blocks/UrlSource/test.js b/blocks/UrlSource/test.js
@@ -1,12 +1,10 @@
+import { ifRef } from '../../utils/ifRef.js';
 import { UrlSource } from './UrlSource.js';
 import { registerBlocks } from '../../abstract/registerBlocks.js';
 
-registerBlocks({ UrlSource });
-
-const urlSource = new UrlSource();
-urlSource.classList.add('lr-wgt-common');
-
-window.onload = () => {
-  document.querySelector('#viewport')?.appendChild(urlSource);
+ifRef(() => {
+  registerBlocks({ UrlSource });
+  /** @type {UrlSource} */
+  let urlSource = document.querySelector(UrlSource.is);
   urlSource.$['*currentActivity'] = 'url';
-};
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { UploaderBlock } from '../../abstract/UploaderBlock.js';

		export class UploadCtxProvider extends UploaderBlock {}