fix(core): performance improvements to applying state changes

Enigma10 · Aug 17, 2020 · e3e121b · e3e121b
1 parent af62e25
commit e3e121b
Show file tree

Hide file tree

Showing 41 changed files with 563 additions and 543 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -34,8 +34,6 @@ jobs:
         run: curl -L https://raw.githubusercontent.com/pnpm/self-installer/master/install.js | node
       - name: Install dependencies
         run: pnpm install
-      - name: Lint
-        run: npm run lint
       - name: Test
         run: pnpm run test:ci --filter @vime/core
       - name: Coverage

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "pnpm": ">=5"
   },
   "scripts": {
-    "lint": "eslint packages/*/src/**/*.{ts,tsx} packages/*/cypress/**/*.{js,ts} --fix --ignore-path .gitignore",
+    "lint": "eslint packages/*/src/**/*.{ts,tsx} packages/*/cypress/**/*.{js,ts} --quiet --fix --ignore-path .gitignore",
     "script:size": "node scripts/core-dist-size.js"
   },
   "devDependencies": {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -49,7 +49,7 @@
     "cy:run.providers": "cypress run --spec \"cypress/tests/providers/**/*\""
   },
   "dependencies": {
-    "stencil-wormhole": "^3.0.1"
+    "stencil-wormhole": "^3.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",

diff --git a/packages/core/src/components/core/embed/embed.tsx b/packages/core/src/components/core/embed/embed.tsx
@@ -84,17 +84,17 @@ export class Embed implements ComponentInterface {
    * Emitted when the `embedSrc` or `params` props change. The payload contains the `params`
    * serialized into a query string and appended to `embedSrc`.
    */
-  @Event({ bubbles: false, }) vEmbedSrcChange!: EventEmitter<string>;
+  @Event({ bubbles: false }) vEmbedSrcChange!: EventEmitter<string>;
 
   /**
    * Emitted when a new message is received from the embedded player via `postMessage`.
    */
-  @Event({ bubbles: false, }) vEmbedMessage!: EventEmitter<any>;
+  @Event({ bubbles: false }) vEmbedMessage!: EventEmitter<any>;
 
   /**
    * Emitted when the embedded player and any new media has loaded.
    */
-  @Event({ bubbles: false, }) vEmbedLoaded!: EventEmitter<void>;
+  @Event({ bubbles: false }) vEmbedLoaded!: EventEmitter<void>;
 
   @Watch('preconnections')
   preconnectionsChange() {
@@ -107,11 +107,8 @@ export class Embed implements ComponentInterface {
       });
   }
 
-  connectedCallback() {
-    this.srcChange();
-  }
-
   componentWillLoad() {
+    this.srcChange();
     this.genIframeId();
   }
 

diff --git a/packages/core/src/components/core/player/Autopause.ts b/packages/core/src/components/core/player/Autopause.ts
@@ -1,9 +1,7 @@
-import { MediaPlayer } from './MediaPlayer';
-
-let players: MediaPlayer[] = [];
+let players: HTMLVimePlayerElement[] = [];
 
 export class Autopause {
-  constructor(private readonly player: MediaPlayer) {
+  constructor(private readonly player: HTMLVimePlayerElement) {
     players.push(player);
   }
 

diff --git a/packages/core/src/components/core/player/PlayerEvent.ts b/packages/core/src/components/core/player/PlayerEvent.ts
@@ -16,6 +16,7 @@ const isToggleStateEvent = new Set([
 
 // Events that are emitted without the 'Change' postfix.
 const hasShortenedEventName = new Set([
+  PlayerProp.Ready,
   PlayerProp.PlaybackStarted,
   PlayerProp.PlaybackEnded,
   PlayerProp.PlaybackReady,
@@ -46,6 +47,7 @@ export enum PlayerEvent {
   BufferingChange = 'vBufferingChange',
   DurationChange = 'vDurationChange',
   CurrentTimeChange = 'vCurrentTimeChange',
+  Ready = 'vReady',
   PlaybackReady = 'vPlaybackReady',
   PlaybackStarted = 'vPlaybackStarted',
   PlaybackEnded = 'vPlaybackEnded',
@@ -116,6 +118,11 @@ export interface PlayerEvents {
    */
   [PlayerEvent.CurrentTimeChange]: EventEmitter<PlayerProps[PlayerProp.CurrentTime]>
 
+  /**
+   * Emitted when the player has loaded and is ready to be interacted with.
+   */
+  [PlayerEvent.Ready]: EventEmitter<void>;
+
   /**
    * Emitted when the media is ready to begin playback. The following props are guaranteed to be
    * defined when this fires: `mediaTitle`, `currentSrc`, `currentPoster`, `duration`, `mediaType`,

diff --git a/packages/core/src/components/core/player/PlayerMethod.ts b/packages/core/src/components/core/player/PlayerMethod.ts
@@ -18,7 +18,8 @@ export enum PlayerMethod {
   ExitPiP = 'exitPiP',
   ExtendLanguage = 'extendLanguage',
   CallAdapter = 'callAdapter',
-  QueueStateChange = 'queueStateChange'
+  QueueStateChange = 'queueStateChange',
+  ToggleCaptionsVisibility = 'toggleCaptionsVisiblity',
 }
 
 export interface PlayerMethods {
@@ -119,6 +120,11 @@ export interface PlayerMethods {
    */
   [PlayerMethod.ExitPiP](): Promise<void>
 
+  /**
+   * Toggles the visibility of the captions.
+   */
+  [PlayerMethod.ToggleCaptionsVisibility](isVisible?: boolean): Promise<void>
+
   /**
    * Extends the translation map for a given language.
    */

diff --git a/packages/core/src/components/core/player/PlayerProp.ts b/packages/core/src/components/core/player/PlayerProp.ts
@@ -11,6 +11,7 @@ export enum PlayerProp {
   CurrentTime = 'currentTime',
   Seeking = 'seeking',
   Debug = 'debug',
+  Ready = 'ready',
   PlaybackStarted = 'playbackStarted',
   PlaybackEnded = 'playbackEnded',
   PlaybackRate= 'playbackRate',
@@ -57,6 +58,7 @@ export type InternalReadonlyPlayerProps = Pick<PlayerProps, PlayerProp.Autoplay
 | PlayerProp.Controls
 | PlayerProp.Debug
 | PlayerProp.Loop
+| PlayerProp.Ready
 | PlayerProp.IsAudio
 | PlayerProp.IsVideo
 | PlayerProp.IsMobile
@@ -102,6 +104,7 @@ const internalReadonly = new Set<InternalReadonlyPlayerProp>([
   PlayerProp.Autoplay,
   PlayerProp.Controls,
   PlayerProp.Loop,
+  PlayerProp.Ready,
   PlayerProp.Debug,
   PlayerProp.IsAudio,
   PlayerProp.IsVideo,
@@ -208,6 +211,11 @@ export interface PlayerProps {
    */
   [PlayerProp.Autoplay]: boolean
 
+  /**
+   * `@readonly` Whether the player has loaded and is ready to be interacted with.
+   */
+  [PlayerProp.Ready]: boolean
+
   /**
    * `@readonly` Whether media is ready for playback to begin.
    */