@luceosports/play-rendering 2.5.7 → 2.6.1

package/src/models/LineModel.ts

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import Model from './Base/InternalFrameModel';
-import { Line as LineData, LinePart, Player } from '../types';
+import { AnimationMode, Line as LineData, LinePart } from '../types';
 
 export type CourtPointAdjusted = { x: number; y: number; time?: number };
-export type LineAdjusted = LineData & { animationKeyTimeChunks: [number, number][] };
+export type LineAdjusted = LineData;
 export type LinePartAdjusted = {
   controlPoints:
     | [CourtPointAdjusted, CourtPointAdjusted]
@@ -54,29 +54,6 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
     }
   }
 
-  setAnimationKeyTimesChunked(linePlayer: Player) {
-    let keyTimesChunks: [number, number][] = [];
-    this.animations[0].keyTimes.forEach((value, index) => {
-      if (index) keyTimesChunks.push([this.animations[0].keyTimes[index - 1], value]);
-    });
-
-    if (keyTimesChunks.length !== this.getLineParts().length) {
-      const [[start, end]] = keyTimesChunks;
-      const [animation] = linePlayer.animations;
-      const playerAnimStartIndex = animation.keyTimes.indexOf(start);
-      const playerAnimEndIndex = animation.keyTimes.indexOf(end);
-      if (playerAnimStartIndex >= 0 && playerAnimEndIndex >= 0) {
-        const lineKeyTimes = animation.keyTimes.slice(playerAnimStartIndex, playerAnimEndIndex + 1);
-        keyTimesChunks = [];
-        lineKeyTimes.forEach((value, index) => {
-          if (index) keyTimesChunks.push([lineKeyTimes[index - 1], value]);
-        });
-      }
-    }
-
-    this.animationKeyTimeChunks = keyTimesChunks;
-  }
-
   addLinePartAdjusted(data: LinePartAdjusted) {
     this.linePartsAdjusted.push(data);
   }
@@ -132,20 +109,14 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
     return this._getAttr('animations');
   }
 
-  get animationsByEndTime() {
-    return this._getAttr('animations').map(a => _.last(a.keyTimes));
-  }
-
-  get animationKeyTimeChunks() {
-    return this._getAttr('animationKeyTimeChunks') || [];
-  }
-
-  set animationKeyTimeChunks(value) {
-    this._setAttr('animationKeyTimeChunks', value);
+  animationsByEndTime(mode: AnimationMode) {
+    return this._getAttr('animations').map(a =>
+      _.last(mode === AnimationMode.SEQUENTIAL ? a.keyTimesSeq || a.keyTimes : a.keyTimes)
+    );
   }
 
-  get lastAnimEndTime() {
-    return _.max(this.animationsByEndTime);
+  lastAnimEndTime(mode: AnimationMode) {
+    return _.max(this.animationsByEndTime(mode));
   }
 
   get firstLinePartControlPoint() {

package/src/models/Play/Options.ts

@@ -1,39 +1,41 @@
-import { PlayModelOptions } from '../PlayModel';
-
-export function useDefaults(options?: Partial<PlayModelOptions>): PlayModelOptions {
-  const defaults = {
-    width: 300,
-    lineColor: '#fff', // courtBorderColor
-    linesDisplay: 'VISIBLE' as const,
-    linesDisplayOnMoveOnly: true,
-    linesHiddenIds: [],
-    linesHighlightedIds: [],
-    linesSelectedIds: [],
-    shapeSelectedId: null,
-    noteSelectedId: null,
-    playersHiddenPositions: [],
-    background: '',
-    watermark: null,
-    mirror: false,
-    speed: 1,
-    position: null,
-    huddleMode: false,
-    magnetMode: false,
-    flipPlayerLabels: false,
-    legacyPrintStyle: false,
-    playerTokenScale: 1,
-    showBallMode: false,
-    // showBallMode sub-options (defaults match current behavior)
-    highlightPlayerPuck: true,
-    showPassLinesDuringPlayback: true,
-    // TODO: refactor NBA court type constants below
-    showHalfCourtCircle: true,
-    playersMap: [],
-    labelsOverrideType: null,
-    inDrawingState: false
-  };
-  return {
-    ...defaults,
-    ...(options || {})
-  };
-}
+import { PlayModelOptions } from '../PlayModel';
+import { AnimationMode } from '../../types';
+
+export function useDefaults(options?: Partial<PlayModelOptions>): PlayModelOptions {
+  const defaults = {
+    width: 300,
+    lineColor: '#fff', // courtBorderColor
+    linesDisplay: 'VISIBLE' as const,
+    linesDisplayOnMoveOnly: true,
+    linesHiddenIds: [],
+    linesHighlightedIds: [],
+    linesSelectedIds: [],
+    shapeSelectedId: null,
+    noteSelectedId: null,
+    playersHiddenPositions: [],
+    background: '',
+    watermark: null,
+    mirror: false,
+    speed: 1,
+    position: null,
+    huddleMode: false,
+    magnetMode: false,
+    flipPlayerLabels: false,
+    legacyPrintStyle: false,
+    playerTokenScale: 1,
+    animationMode: AnimationMode.PREDICTIVE,
+    showBallMode: false,
+    // showBallMode sub-options (defaults match current behavior)
+    highlightPlayerPuck: true,
+    showPassLinesDuringPlayback: true,
+    // TODO: refactor NBA court type constants below
+    showHalfCourtCircle: true,
+    playersMap: [],
+    labelsOverrideType: null,
+    inDrawingState: false
+  };
+  return {
+    ...defaults,
+    ...(options || {})
+  };
+}

package/src/models/PlayModel.ts

@@ -17,7 +17,7 @@ import {
   SPORT_TYPE_VOLLEYBALL
 } from '../constants';
 
-import { PlayConstructData, PlayData, Position, SportType } from '../types';
+import { AnimationMode, PlayConstructData, PlayData, Position, SportType } from '../types';
 
 import hardwoodImageData from '../assets/wood_bg.png';
 import grassImageData from '../assets/grass_bg.png';
@@ -96,6 +96,7 @@ export type PlayModelOptions = {
   // sub-options for showBallMode
   highlightPlayerPuck: boolean;
   showPassLinesDuringPlayback: boolean;
+  animationMode: AnimationMode;
 };
 
 export default class PlayModel {

package/src/models/PlayerModel.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import Model from './Base/InternalFrameModel';
-import { Line, Player as PlayerData } from '../types';
+import { AnimationMode, Line, Player as PlayerData, PlayerAnimation } from '../types';
 
 export default class PlayerModel extends Model<PlayerData, PlayerData> {
   get id() {
@@ -51,12 +51,16 @@ export default class PlayerModel extends Model<PlayerData, PlayerData> {
     return this._getAttr('animations');
   }
 
-  get animationsByEndTime() {
-    return this._getAttr('animations').map(a => _.last(a.keyTimes));
+  private getAnimationKeyTimes(animation: PlayerAnimation, mode: AnimationMode) {
+    return mode === AnimationMode.SEQUENTIAL ? animation.keyTimesSeq || animation.keyTimes : animation.keyTimes;
   }
 
-  get lastAnimEndTime() {
-    return _.max(this.animationsByEndTime);
+  animationsByEndTime(mode: AnimationMode) {
+    return this._getAttr('animations').map(a => _.last(this.getAnimationKeyTimes(a, mode)));
+  }
+
+  lastAnimEndTime(mode: AnimationMode) {
+    return _.max(this.animationsByEndTime(mode));
   }
 
   get lastAnimation() {

package/src/types/enums.ts

@@ -0,0 +1,4 @@
+export enum AnimationMode {
+  PREDICTIVE = 'PREDICTIVE',
+  SEQUENTIAL = 'SEQUENTIAL'
+}

package/src/types/index.ts

@@ -1,3 +1,5 @@
+export { AnimationMode } from './enums';
+
 export type PlayerPosition = `${number}`;
 
 export type DefenderPosition = `x${number}`;
@@ -136,6 +138,7 @@ export type PlayerAnimationType = 'POSITION';
 export interface Animation {
   id: string;
   keyTimes: number[];
+  keyTimesSeq?: number[];
 }
 
 export interface PlayerAnimation extends Animation {
@@ -155,10 +158,8 @@ export interface Player {
 
 export type LineAnimationType = 'LINESTROKE';
 
-export interface LineAnimation {
-  id: string;
+export interface LineAnimation extends Animation {
   type: LineAnimationType;
-  keyTimes: number[];
   strokeStartValues: [number, number, number];
 }