chore(angular): setup dev workflow

g3r4n · Dec 20, 2020 · 9dbcfee · 9dbcfee
1 parent c0f55f1
commit 9dbcfee
Show file tree

Hide file tree

Showing 22 changed files with 364 additions and 25 deletions.
diff --git a/examples/angular/tsconfig.json b/examples/angular/tsconfig.json
@@ -6,12 +6,7 @@
 */
 {
   "files": [],
-  "references": [
-    {
+  "references": [{
       "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-]
+  }]
 }
diff --git a/package.json b/package.json
@@ -26,12 +26,14 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
+    "chokidar": "^3.4.3",
     "eslint": "^7.8.1",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
+    "fs-extra": "^9.0.1",
     "husky": "^4.2.5",
     "lerna": "^3.22.1",
     "react": "^17.0.0",

diff --git a/packages/angular/angular.json b/packages/angular/angular.json
@@ -22,6 +22,73 @@
           }
         }
       }
+    }, 
+    "@vime/angular-test": {
+      "projectType": "application",
+      "root": "test",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/vime/test",
+            "index": "test/src/index.html",
+            "main": "test/src/main.ts",
+            "polyfills": "test/src/polyfills.ts",
+            "tsConfig": "test/tsconfig.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "test/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "test/src/environments/environment.ts",
+                  "with": "test/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "@vime/angular-test:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "@vime/angular-test:build:production"
+            }
+          }
+        }
+      }
     }
   },
   "defaultProject": "@vime/angular"

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -1,20 +1,26 @@
 {
   "name": "@vime/angular",
   "version": "5.0.10",
+  "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "serve": "ng serve",
     "build": "ng build --prod",
+    "build:watch": "ng build @vime/angular --watch",
     "prepare": "node scripts/bump-version.js && node scripts/unpack-dist.js"
   },
+  "dependencies": {
+    "@vime/core": "^5.0.8"
+  },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1100.4",
     "@angular/cli": "~11.0.4",
     "@angular/common": "~11.0.4",
     "@angular/compiler": "~11.0.4",
     "@angular/compiler-cli": "~11.0.4",
     "@angular/core": "~11.0.4",
-    "fs-extra": "^9.0.1",
+    "@angular/platform-browser": "~10.2.1",
+    "@angular/platform-browser-dynamic": "~10.2.1",
     "ng-packagr": "^11.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

diff --git a/packages/angular/projects/vime/angular/src/VimeComponent.ts b/packages/angular/projects/vime/angular/src/VimeComponent.ts
@@ -5,8 +5,9 @@ import {
   usePlayerContext,
   createDispatcher,
 } from '@vime/core';
-import { ElementRef } from '@angular/core';
+import { ElementRef, Injectable } from '@angular/core';
 
+@Injectable()
 export abstract class VimeComponent {
   private playerDispatch: Dispatcher = () => {};
 

diff --git a/packages/angular/projects/vime/angular/src/lib.ts b/packages/angular/projects/vime/angular/src/lib.ts
@@ -7,22 +7,22 @@ export const define = (tagName: string, clazz: any) => {
   if (isClient && !customElements.get(tagName)) customElements.define(tagName, clazz);
 };
 
-export const proxyInputs = (Cmp: any, inputs: string[]) => {
-  const Prototype = Cmp.prototype;
-  inputs.forEach((item) => {
-    Object.defineProperty(Prototype, item, {
+export const proxyInputs = (Component: any, inputs: string[]) => {
+  const Prototype = Component.prototype;
+  inputs.forEach((input) => {
+    Object.defineProperty(Prototype, input, {
       get() {
-        return this.el[item];
+        return this.el[input];
       },
       set(val: any) {
-        this.z.runOutsideAngular(() => (this.el[item] = val));
+        this.z.runOutsideAngular(() => (this.el[input] = val));
       },
     });
   });
 };
 
-export const proxyMethods = (Cmp: any, methods: string[]) => {
-  const Prototype = Cmp.prototype;
+export const proxyMethods = (Component: any, methods: string[]) => {
+  const Prototype = Component.prototype;
   methods.forEach((methodName) => {
     Prototype[methodName] = function () {
       const args = arguments;
@@ -36,11 +36,9 @@ export const initOutputs = (instance: any, events: string[]) => {
 }
 
 export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator = function (cls: any) {
-    if (opts.inputs) proxyInputs(cls, opts.inputs);
-    if (opts.methods) proxyMethods(cls, opts.methods);
-    return cls;
+  return function (Component: any) {
+    if (opts.inputs) proxyInputs(Component, opts.inputs);
+    if (opts.methods) proxyMethods(Component, opts.methods);
+    return Component;
   };
-
-  return decorator;
 }
diff --git a/packages/angular/scripts/bump-version.js b/packages/angular/scripts/bump-version.js
@@ -8,4 +8,5 @@ const rootPkg = JSON.parse(fs.readFileSync(rootPkgPath));
 const distPkg = JSON.parse(fs.readFileSync(distPkgPath));
 
 distPkg.version = rootPkg.version;
+distPkg.dependencies['@vime/core'] = rootPkg.dependencies['@vime/core'];
 fs.writeFileSync(distPkgPath, JSON.stringify(distPkg, undefined, 2));
diff --git a/packages/angular/test/.browserslistrc b/packages/angular/test/.browserslistrc
@@ -0,0 +1,8 @@
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/packages/angular/test/src/app/app.component.html b/packages/angular/test/src/app/app.component.html
@@ -0,0 +1,61 @@
+<div id="container">
+  <vm-player 
+    #player
+    playsinline
+    (vPlaybackReady)="onPlaybackReady()"
+  >
+    <vm-default-ui>
+      <!-- Custom UI component. -->
+      <tap-sides-to-seek></tap-sides-to-seek>
+    </vm-default-ui>
+
+      <!-- YOUTUBE -->
+      <!-- <vm-youtube video-id="DyTCOwB0DVw"></vm-youtube> -->
+
+      <!-- VIMEO -->
+      <!-- <vm-vimeo video-id="411652396"></vm-vimeo> -->
+
+      <!-- DAILYMOTION -->
+      <!-- <vm-dailymotion video-id="k3b11PemcuTrmWvYe0q"></vm-dailymotion> -->
+
+      <!-- VIDEO -->
+      <!-- <vm-video cross-origin="anonymous" poster="https://media.vimejs.com/poster.png">
+        <source data-src="https://media.vimejs.com/720.mp4" type="video/mp4" />
+        <track default kind="subtitles" src="https://media.vimejs.com/subs/english.vtt" srclang="en" label="English" />
+        <track kind="subtitles" src="https://media.vimejs.com/subs/spanish.vtt" srclang="es" label="Spanish" />
+      </vm-video> -->
+
+      <!-- AUDIO -->
+      <!-- <vm-audio cross-origin="anonymous">
+        <source data-src="https://media.vimejs.com/audio.mp3" type="audio/mp3" />
+      </vm-audio> -->
+
+      <!-- HLS -->
+      <!-- <vm-hls cross-origin="anonymous" poster="https://media.vimejs.com/poster.png">
+        <source data-src="https://media.vimejs.com/hls/index.m3u8" type="application/x-mpegURL" />
+      </vm-hls> -->
+
+      <!-- DASH -->
+      <!-- <vm-dash 
+        cross-origin="anonymous" 
+        src="https://media.vimejs.com/mpd/manifest.mpd"
+        poster="https://media.vimejs.com/poster.png"></vm-dash> -->
+  </vm-player>
+</div>
+
+<style>
+  :host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #container {
+    width: 100%;
+    max-width: 960px;
+  }
+</style>
+
+
diff --git a/packages/angular/test/src/app/app.component.ts b/packages/angular/test/src/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component, ViewChild } from '@angular/core';
+import { Player } from '@vime/angular';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Obtain a ref if you need to call any methods.
+  @ViewChild('player') player!: Player;
+
+  onPlaybackReady() {
+    // ...
+  }
+}
diff --git a/packages/angular/test/src/app/app.module.ts b/packages/angular/test/src/app/app.module.ts
@@ -0,0 +1,20 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { VimeModule } from '@vime/angular';
+
+import { AppComponent } from './app.component';
+import { TapSidesToSeekComponent } from './tap-sides-to-seek/tap-sides-to-seek.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    TapSidesToSeekComponent,
+  ],
+  imports: [
+    BrowserModule,
+    VimeModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
diff --git a/packages/angular/test/src/app/tap-sides-to-seek/tap-sides-to-seek.component.html b/packages/angular/test/src/app/tap-sides-to-seek/tap-sides-to-seek.component.html
@@ -0,0 +1,32 @@
+<div class="tapTarget backward" (click)="onSeekBackward()"></div>
+<div class="spacer"></div>
+<div class="tapTarget forward" (click)="onSeekForward()"></div>
+
+<style>
+  :host {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* 
+      Why 21? Simply because it's one index above the `ClickToPlay` component. Click the link
+      below and scroll down to the `Z-Index` section to see existing levels.
+
+      @see https://github.com/vime-js/vime/blob/master/packages/core/src/globals/themes/default.css
+    */
+    z-index: 21;
+    pointer-events: none;
+  }
+
+  :host > .spacer {
+    flex: 1;
+  }
+
+  :host > .tapTarget {
+    width: 7.5%;
+    height: 100%;
+    pointer-events: auto;
+  }
+</style>
diff --git a/packages/angular/test/src/app/tap-sides-to-seek/tap-sides-to-seek.component.ts b/packages/angular/test/src/app/tap-sides-to-seek/tap-sides-to-seek.component.ts
@@ -0,0 +1,48 @@
+import { Component, ElementRef } from '@angular/core';
+import { VimeComponent } from '@vime/angular';
+
+@Component({
+  selector: 'tap-sides-to-seek',
+  templateUrl: './tap-sides-to-seek.component.html',
+})
+export class TapSidesToSeekComponent extends VimeComponent {
+  currentTime = 0;
+
+  duration = -1;
+
+  /**
+   * When we extend the `Component` class a few things are happening under the hood.
+   *
+   * 1. The super constructor overwrites all player properties with fresh getters/setters. Not all
+   * properties contain setters (readonly), so it's best to refer to the documentation.
+   * 2. The component binds itself to the player context so that player properties are updated as
+   * they change.
+   * 3. The component will dispatch any updates to the player if a writable player prop is changed.
+   * 4. When the component is destroyed, it will automatically unbind itself from the player.
+   *
+   * IMPORTANT: The `ElementRef` is required as the `Component` class uses it to dispatch
+   * custom events to the player. Angular automatically injects this value.
+   *
+   * @see https://vimejs.com/components/core/player/api
+   */
+  constructor(protected ref: ElementRef) {
+    // Pass in the properties you'd like to bind to this component.
+    super([
+      'currentTime',
+      'duration',
+    ]);
+
+    // There is a player ref if you need to call any methods.
+    // this.player
+  }
+
+  onSeekBackward() {
+    if (this.currentTime < 5) return;
+    this.currentTime -= 5;
+  }
+
+  onSeekForward() {
+    if (this.currentTime > (this.duration - 5)) return;
+    this.currentTime += 5;
+  }
+}
diff --git a/packages/angular/test/src/environments/environment.prod.ts b/packages/angular/test/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};