@luceosports/play-rendering 2.5.7 → 2.6.0

package/dist/types/models/LineModel.d.ts

@@ -1,4 +1,4 @@
-import { Color, CourtPoint, Line, LineAnimation, LinePart, LineType, Position } from '../../play-rendering';
+import { Color, CourtPoint, Line, LineAnimation, LinePart, LineType, Position, AnimationMode } from '../../play-rendering';
 
 export class LineModel {
     readonly lineParts: LinePart[];
@@ -14,10 +14,10 @@ export class LineModel {
     get playerLineSequence(): number;
     get hideLineTip(): boolean;
     get animations(): LineAnimation[];
-    get animationsByEndTime(): number[];
+    animationsByEndTime(mode: AnimationMode): number[];
     get animationKeyTimeChunks(): [number, number][];
     set animationKeyTimeChunks(value: [number, number][]);
-    get lastAnimEndTime(): number;
+    lastAnimEndTime(mode: AnimationMode): number;
     get firstLinePartControlPoint(): CourtPoint;
     get lastLinePartControlPoint(): CourtPoint;
 }

package/dist/types/models/PlayModel.d.ts

@@ -1,5 +1,5 @@
 import { PlayConstructData, PlayData,  } from "../../play-rendering";
-import { Position } from '../../../src/types';
+import { AnimationMode, Position } from '../../../src/types';
 
 export type PlayersMapItem = {
     position: Position;
@@ -37,6 +37,7 @@ export type PlayModelOptions = {
     // sub-options for showBallMode
     highlightPlayerPuck: boolean;
     showPassLinesDuringPlayback: boolean;
+    animationMode: AnimationMode;
 }
 
 export type TeamPlayer = {

package/dist/types/models/PlayerModel.d.ts

@@ -1,4 +1,4 @@
-import { Color, CourtPoint, Line, Player, PlayerAnimation, Position } from "../../play-rendering";
+import { Color, CourtPoint, Line, Player, PlayerAnimation, Position, AnimationMode } from "../../play-rendering";
 
 export class PlayerModel {
     constructor(data: Player);
@@ -13,8 +13,8 @@ export class PlayerModel {
     get location(): CourtPoint;
     get color(): Color;
     get animations(): PlayerAnimation[];
-    get animationsByEndTime(): number[];
-    get lastAnimEndTime(): number;
+    animationsByEndTime(mode: AnimationMode): number[];
+    lastAnimEndTime(mode: AnimationMode): number;
     get lastAnimation(): PlayerAnimation;
     get lastAnimationLastLinePartControlPoint(): CourtPoint;
     setPossession(prevPassLines: Line[]): void;

package/dist/types/types/enums.d.ts

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

package/dist/types/types/index.d.ts

@@ -1,142 +1,142 @@
-export type PlayerPosition = `${number}`;
-export type DefenderPosition = `x${number}`;
-export type ExtraPosition = `+${number}`;
-export type CoachPosition = 'C';
-export type Position = PlayerPosition | DefenderPosition | ExtraPosition | CoachPosition;
-export type LineType = 'PASS' | 'CUT' | 'SCREEN' | 'DRIBBLE' | 'HANDOFF' | 'SHOT';
-export type LineShapeType = 'LINE.CUT' | 'LINE.SCREEN' | 'LINE.DRIBBLE' | 'LINE.PASS' | 'LINE.HANDOFF';
-export type ShapeType = 'CIRCLE' | 'SQUARE' | 'TRIANGLE' | 'FOV' | 'XMARK' | 'STRAIGHT' | 'CONE' | LineShapeType;
-export type SportType = 'FOOTBALL' | 'BASKETBALL' | 'VOLLEYBALL' | 'BEACH_VOLLEYBALL' | 'LACROSSE' | 'LACROSSE_BOX' | 'SOCCER' | 'HOCKEY' | 'BASEBALL' | 'SOFTBALL';
-export type CourtTypeSportBasketball = 'BIG3' | 'NBA' | 'WNBA' | 'FIBA' | 'NCAAM' | 'NCAAW' | 'US_HIGH_SCHOOL' | 'US_JUNIOR_HIGH';
-export type CourtTypeSportVolleyball = 'VOLLEYBALL_INDOOR';
-export type CourtTypeSportBeachVolleyball = 'BEACH_VOLLEYBALL_NCAA' | 'BEACH_VOLLEYBALL_RECREATIONAL';
-export type CourtTypeSportSoccer = 'SOCCER_FIFA' | 'SOCCER_NCAA' | 'SOCCER_NFHS' | 'SOCCER_U10' | 'SOCCER_U12' | 'SOCCER_U19';
-export type CourtTypeSportHockey = 'HOCKEY_NHL' | 'HOCKEY_INTERNATIONAL';
-export type CourtTypeSportBaseball = 'BASEBALL_HIGH_SCHOOL';
-export type CourtTypeSportSoftball = 'SOFTBALL_FP_COLLEGE' | 'SOFTBALL_FP_HS';
-export type CourtTypeSportLacrosse = 'LACROSSE_US_M' | 'LACROSSE_US_W';
-export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US' | 'LACROSSE_BOX_CLA';
-export type CourtTypeSportFootball = 'FOOTBALL_HIGH_SCHOOL' | 'FOOTBALL_COLLEGE' | 'FOOTBALL_NFL';
-export type CourtTypeSportFootballLegacy = 'FOOTBALL';
-export type CourtType = CourtTypeSportBasketball | CourtTypeSportVolleyball | CourtTypeSportBeachVolleyball | CourtTypeSportLacrosse | CourtTypeSportLacrosseBox | CourtTypeSportSoccer | CourtTypeSportHockey | CourtTypeSportBaseball | CourtTypeSportSoftball | CourtTypeSportFootball | CourtTypeSportFootballLegacy;
-export type ShapeControlPoints = [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
-export type NoteDisplayModes = ['onCourt'] | ['playNote'] | ['onCourt', 'playNote'];
-export interface SportConstants {
-    PLAYER_TOKEN_RADIUS: number;
-    PLAYER_TOKEN_SCALE: number;
-}
-export interface CourtTypeConstants {
-    COURT_RECT_WIDTH: number;
-    COURT_RECT_HEIGHT: number;
-}
-export interface CourtPoint {
-    x: number;
-    y: number;
-}
-export interface CourtSize {
-    height: number;
-    width: number;
-}
-export interface Scale {
-    x: number;
-    y: number;
-}
-export interface LinePart {
-    controlPoints: [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
-}
-export interface Color {
-    red: number;
-    green: number;
-    blue: number;
-    alpha: number;
-}
-export interface CourtRect {
-    origin: CourtPoint;
-    size: CourtSize;
-}
-export interface Court {
-    type: CourtType;
-    courtRect: CourtRect;
-}
-export type PlayerAnimationType = 'POSITION';
-export interface Animation {
-    id: string;
-    keyTimes: number[];
-}
-export interface PlayerAnimation extends Animation {
-    type: PlayerAnimationType;
-    lineParts: LinePart[];
-}
-export interface Player {
-    id: string;
-    possession: boolean;
-    color: Color;
-    position: Position;
-    location: CourtPoint;
-    textOverride?: string;
-    animations: PlayerAnimation[];
-}
-export type LineAnimationType = 'LINESTROKE';
-export interface LineAnimation {
-    id: string;
-    type: LineAnimationType;
-    keyTimes: number[];
-    strokeStartValues: [number, number, number];
-}
-export interface Line {
-    id: string;
-    type: LineType;
-    phase: number;
-    playerPositionOrigin: Position;
-    playerPositionTerminus: Position | null;
-    playerLineSequence: number;
-    lineParts: LinePart[];
-    color: Color;
-    hideLineTip?: boolean;
-    animations: LineAnimation[];
-}
-export interface Shape {
-    id: string;
-    type: ShapeType;
-    location: CourtPoint;
-    color: Color;
-    scale: Scale;
-    angle?: number;
-    showBorder?: boolean;
-    linePart?: LinePart;
-    animations?: Animation[];
-    hideForStatic?: boolean;
-}
-export interface Note {
-    id: string;
-    location: CourtPoint;
-    displayModes: NoteDisplayModes;
-    text: string;
-    animations?: Animation[];
-    font: NoteFont;
-    color: Color;
-    showBorder: boolean;
-    hideForStatic?: boolean;
-}
-export interface NoteFont {
-    bold: boolean;
-    italic: boolean;
-    underline: boolean;
-    strikethrough: boolean;
-    fontSize: number;
-}
-export interface PlayConstructData {
-    id?: string;
-    lastUpdtTS?: string;
-    name: string;
-    playData: PlayData;
-}
-export interface PlayData {
-    animationDuration: number;
-    sport: SportType;
-    court: Court;
-    players: Player[];
-    lines: Line[];
-    shapes?: Shape[];
-    notes?: Note[];
-}
+export { AnimationMode } from './enums';
+export type PlayerPosition = `${number}`;
+export type DefenderPosition = `x${number}`;
+export type ExtraPosition = `+${number}`;
+export type CoachPosition = 'C';
+export type Position = PlayerPosition | DefenderPosition | ExtraPosition | CoachPosition;
+export type LineType = 'PASS' | 'CUT' | 'SCREEN' | 'DRIBBLE' | 'HANDOFF' | 'SHOT';
+export type LineShapeType = 'LINE.CUT' | 'LINE.SCREEN' | 'LINE.DRIBBLE' | 'LINE.PASS' | 'LINE.HANDOFF';
+export type ShapeType = 'CIRCLE' | 'SQUARE' | 'TRIANGLE' | 'FOV' | 'XMARK' | 'STRAIGHT' | 'CONE' | LineShapeType;
+export type SportType = 'FOOTBALL' | 'BASKETBALL' | 'VOLLEYBALL' | 'BEACH_VOLLEYBALL' | 'LACROSSE' | 'LACROSSE_BOX' | 'SOCCER' | 'HOCKEY' | 'BASEBALL' | 'SOFTBALL';
+export type CourtTypeSportBasketball = 'BIG3' | 'NBA' | 'WNBA' | 'FIBA' | 'NCAAM' | 'NCAAW' | 'US_HIGH_SCHOOL' | 'US_JUNIOR_HIGH';
+export type CourtTypeSportVolleyball = 'VOLLEYBALL_INDOOR';
+export type CourtTypeSportBeachVolleyball = 'BEACH_VOLLEYBALL_NCAA' | 'BEACH_VOLLEYBALL_RECREATIONAL';
+export type CourtTypeSportSoccer = 'SOCCER_FIFA' | 'SOCCER_NCAA' | 'SOCCER_NFHS' | 'SOCCER_U10' | 'SOCCER_U12' | 'SOCCER_U19';
+export type CourtTypeSportHockey = 'HOCKEY_NHL' | 'HOCKEY_INTERNATIONAL';
+export type CourtTypeSportBaseball = 'BASEBALL_HIGH_SCHOOL';
+export type CourtTypeSportSoftball = 'SOFTBALL_FP_COLLEGE' | 'SOFTBALL_FP_HS';
+export type CourtTypeSportLacrosse = 'LACROSSE_US_M' | 'LACROSSE_US_W';
+export type CourtTypeSportLacrosseBox = 'LACROSSE_BOX_US' | 'LACROSSE_BOX_CLA';
+export type CourtTypeSportFootball = 'FOOTBALL_HIGH_SCHOOL' | 'FOOTBALL_COLLEGE' | 'FOOTBALL_NFL';
+export type CourtTypeSportFootballLegacy = 'FOOTBALL';
+export type CourtType = CourtTypeSportBasketball | CourtTypeSportVolleyball | CourtTypeSportBeachVolleyball | CourtTypeSportLacrosse | CourtTypeSportLacrosseBox | CourtTypeSportSoccer | CourtTypeSportHockey | CourtTypeSportBaseball | CourtTypeSportSoftball | CourtTypeSportFootball | CourtTypeSportFootballLegacy;
+export type ShapeControlPoints = [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
+export type NoteDisplayModes = ['onCourt'] | ['playNote'] | ['onCourt', 'playNote'];
+export interface SportConstants {
+    PLAYER_TOKEN_RADIUS: number;
+    PLAYER_TOKEN_SCALE: number;
+}
+export interface CourtTypeConstants {
+    COURT_RECT_WIDTH: number;
+    COURT_RECT_HEIGHT: number;
+}
+export interface CourtPoint {
+    x: number;
+    y: number;
+}
+export interface CourtSize {
+    height: number;
+    width: number;
+}
+export interface Scale {
+    x: number;
+    y: number;
+}
+export interface LinePart {
+    controlPoints: [CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint] | [CourtPoint, CourtPoint, CourtPoint, CourtPoint];
+}
+export interface Color {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+export interface CourtRect {
+    origin: CourtPoint;
+    size: CourtSize;
+}
+export interface Court {
+    type: CourtType;
+    courtRect: CourtRect;
+}
+export type PlayerAnimationType = 'POSITION';
+export interface Animation {
+    id: string;
+    keyTimes: number[];
+    keyTimesSeq?: number[];
+}
+export interface PlayerAnimation extends Animation {
+    type: PlayerAnimationType;
+    lineParts: LinePart[];
+}
+export interface Player {
+    id: string;
+    possession: boolean;
+    color: Color;
+    position: Position;
+    location: CourtPoint;
+    textOverride?: string;
+    animations: PlayerAnimation[];
+}
+export type LineAnimationType = 'LINESTROKE';
+export interface LineAnimation extends Animation {
+    type: LineAnimationType;
+    strokeStartValues: [number, number, number];
+}
+export interface Line {
+    id: string;
+    type: LineType;
+    phase: number;
+    playerPositionOrigin: Position;
+    playerPositionTerminus: Position | null;
+    playerLineSequence: number;
+    lineParts: LinePart[];
+    color: Color;
+    hideLineTip?: boolean;
+    animations: LineAnimation[];
+}
+export interface Shape {
+    id: string;
+    type: ShapeType;
+    location: CourtPoint;
+    color: Color;
+    scale: Scale;
+    angle?: number;
+    showBorder?: boolean;
+    linePart?: LinePart;
+    animations?: Animation[];
+    hideForStatic?: boolean;
+}
+export interface Note {
+    id: string;
+    location: CourtPoint;
+    displayModes: NoteDisplayModes;
+    text: string;
+    animations?: Animation[];
+    font: NoteFont;
+    color: Color;
+    showBorder: boolean;
+    hideForStatic?: boolean;
+}
+export interface NoteFont {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    fontSize: number;
+}
+export interface PlayConstructData {
+    id?: string;
+    lastUpdtTS?: string;
+    name: string;
+    playData: PlayData;
+}
+export interface PlayData {
+    animationDuration: number;
+    sport: SportType;
+    court: Court;
+    players: Player[];
+    lines: Line[];
+    shapes?: Shape[];
+    notes?: Note[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.5.7",
+  "version": "2.6.0",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {

package/src/index.ts

@@ -1,3 +1,5 @@
+export * from './types/enums';
+
 import PlayModel from './models/PlayModel';
 import FrameModel from './models/FrameModel';
 import AnimationModel from './models/AnimationModel';

package/src/models/AnimationModel.ts

@@ -67,22 +67,28 @@ export default class AnimationModel {
 
   get linesPhaseIntervals(): Record<number, { min: number; max: number }> {
     const result: Record<number, { min: number; max: number }> = {};
+    const mode = this.play.options.animationMode;
+
     this.play.playData.lines.forEach(line => {
       if (!result[line.phase]) result[line.phase] = { min: 0, max: 0 };
-      line.animations.forEach(({ keyTimes }) => {
+      line.animations.forEach(animation => {
+        const keyTimes = mode === 'SEQUENTIAL' ? animation.keyTimesSeq || [] : animation.keyTimes;
+
         const [from] = keyTimes;
         const to = [...keyTimes].pop()!;
         if (from < result[line.phase].min || (!result[line.phase].min && line.phase > 1)) result[line.phase].min = from;
         if (to > result[line.phase].max) result[line.phase].max = to;
       });
     });
+
     return result;
   }
 
   get lastLineAnimationMax() {
+    const mode = this.play.options.animationMode;
     return this.play.playData.lines.reduce<number>((result, line) => {
       const lineModel = new LineModel(line);
-      return result > lineModel.lastAnimEndTime! ? result : lineModel.lastAnimEndTime!;
+      return result > lineModel.lastAnimEndTime(mode)! ? result : lineModel.lastAnimEndTime(mode)!;
     }, 0);
   }
 

package/src/models/FrameModel.ts

@@ -22,7 +22,7 @@ import {
 } from '../constants';
 
 import PlayModel, { PlayModelOptions, PlayStaticData } from './PlayModel';
-import { Court, CourtPoint, ShapeType, SportType } from '../types';
+import { AnimationMode, Court, CourtPoint, SportType } from '../types';
 import ShapeModel from './ShapeModel';
 
 export type FrameData = {
@@ -110,9 +110,10 @@ export default class FrameModel {
   }
 
   get playAnimationDuration() {
+    const mode = this.play.options.animationMode;
     return this.play.playData.lines.reduce<number>((result, l) => {
       const line = new LineModel(l);
-      const lineLastAnimEndTime = line.lastAnimEndTime!;
+      const lineLastAnimEndTime = line.lastAnimEndTime(mode)!;
       return result > lineLastAnimEndTime ? result : lineLastAnimEndTime;
     }, 0);
   }
@@ -149,7 +150,7 @@ export default class FrameModel {
 
   get currentPhasePlayers() {
     const { currentPhaseLines } = this;
-    const { huddleMode, magnetMode } = this.play.options;
+    const { huddleMode, magnetMode, animationMode } = this.play.options;
 
     const lines = huddleMode || magnetMode ? this.playDataLines : this.prevPhaseLines;
 
@@ -173,7 +174,7 @@ export default class FrameModel {
 
       const playerLines = playerCurrentPhaseLines.length ? playerCurrentPhaseLines : playerPrevLines;
       if (playerLines.length) {
-        const maxLine = _.maxBy(playerLines, l => l.lastAnimEndTime);
+        const maxLine = _.maxBy(playerLines, l => l.lastAnimEndTime(animationMode));
         if (maxLine) {
           const lastPoint = maxLine.lastLinePartControlPoint;
           if (lastPoint) {
@@ -197,6 +198,10 @@ export default class FrameModel {
 
   get animationProgressPlayers() {
     const passLines = this.prevAnimationLines.filter(l => ['PASS', 'HANDOFF', 'SHOT'].includes(l.type));
+    const { animationMode } = this.play.options;
+
+    // TODO MAYBE WE WILL SUSPEND PLAYER ANIMATIONS COMPLETELY AND RELY ONLY ON LINE ANIMATIONS TO HAVE SINGE SOURCE OF TRUTH
+
     return this.play.playData.players.map(p => {
       const player = new PlayerModel(p);
       player.setPossession(passLines);
@@ -204,13 +209,16 @@ export default class FrameModel {
       if (!player.animations.length) return player;
 
       player.animations.forEach(animation => {
+        const keyTimes =
+          animationMode === AnimationMode.SEQUENTIAL ? animation.keyTimesSeq || animation.keyTimes : animation.keyTimes;
+
         const keyTimesChunks: [number, number][] = [];
-        animation.keyTimes.forEach((value, index) => {
-          if (index) keyTimesChunks.push([animation.keyTimes[index - 1], value]);
+        keyTimes.forEach((value, index) => {
+          if (index) keyTimesChunks.push([keyTimes[index - 1], value]);
         });
+
         keyTimesChunks.forEach(([start, end], index) => {
           if (_.inRange(this.animationGlobalProgress, start, end)) {
-            // console.log(`(${player.position}) [${start}-${end}] | a: ${this.animationProgress(start, end)}`);
             const animProgress = this.animationProgress(start, end);
             const bezier = new Bezier(
               ...(animation.lineParts[index].controlPoints as ConstructorParameters<typeof Bezier>)
@@ -223,7 +231,7 @@ export default class FrameModel {
         });
       });
 
-      if (this.animationGlobalProgress >= player.lastAnimEndTime!) {
+      if (this.animationGlobalProgress >= player.lastAnimEndTime(animationMode)!) {
         player.location = player.lastAnimationLastLinePartControlPoint!;
       }
 
@@ -232,13 +240,15 @@ export default class FrameModel {
   }
 
   get animationProgressLines() {
-    const { linesDisplayOnMoveOnly } = this.play.options;
+    const { linesDisplayOnMoveOnly, animationMode } = this.play.options;
+
     return this.play.playData.lines
       .map(l => {
         const line = new LineModel(l);
 
         line.setAnimationKeyTimesChunked(
-          this.play.playData.players.find(p => p.position === line.playerPositionOrigin)!
+          this.play.playData.players.find(p => p.position === line.playerPositionOrigin)!,
+          animationMode
         );
 
         const linePartsAdjusted: LinePartAdjusted[] = [];
@@ -248,6 +258,7 @@ export default class FrameModel {
               new CustomEvent('@luceosports/play-rendering:lineAnimationFinished', { detail: { id: line.id } })
             );
           }
+
           if (_.inRange(this.animationGlobalProgress, start, end)) {
             if (line.type === 'DRIBBLE') {
               return linePartsAdjusted.push({ ...line.getLineParts()[index] });
@@ -276,18 +287,25 @@ export default class FrameModel {
             linePartsAdjusted.push({ ...line.getLineParts()[index] });
           }
         });
+
         line.setLinePartsAdjusted(linePartsAdjusted);
 
-        if (this.animationGlobalProgress > line.lastAnimEndTime!) {
+        if (this.animationGlobalProgress > line.lastAnimEndTime(animationMode)!) {
           line.color = { ...line.color, alpha: 0.1 }; // To adjust line cap opacity
         }
 
         return line;
       })
       .filter(l => {
-        const [{ keyTimes: firstAnimationKeyTimes }] = l.animations;
-        const [start] = firstAnimationKeyTimes;
-        const [end] = firstAnimationKeyTimes.reverse();
+        const [firstAnimation] = l.animations;
+        const keyTimes =
+          animationMode === AnimationMode.SEQUENTIAL
+            ? firstAnimation.keyTimesSeq || firstAnimation.keyTimes
+            : firstAnimation.keyTimes;
+
+        const [start] = keyTimes;
+        const [end] = [...keyTimes].reverse();
+
         const lineOnMove = _.inRange(this.animationGlobalProgress, start, end);
         if (linesDisplayOnMoveOnly) return lineOnMove;
         return lineOnMove || this.animationGlobalProgress > end || l.phase === this.phase;
@@ -305,7 +323,8 @@ export default class FrameModel {
   }
 
   get prevAnimationLines() {
-    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime!);
+    const mode = this.play.options.animationMode;
+    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime(mode)!);
   }
 
   draw() {

package/src/models/LineModel.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import Model from './Base/InternalFrameModel';
-import { Line as LineData, LinePart, Player } from '../types';
+import { AnimationMode, Line as LineData, LinePart, Player } from '../types';
 
 export type CourtPointAdjusted = { x: number; y: number; time?: number };
 export type LineAdjusted = LineData & { animationKeyTimeChunks: [number, number][] };
@@ -54,22 +54,29 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
     }
   }
 
-  setAnimationKeyTimesChunked(linePlayer: Player) {
+  setAnimationKeyTimesChunked(linePlayer: Player, mode: AnimationMode) {
     let keyTimesChunks: [number, number][] = [];
-    this.animations[0].keyTimes.forEach((value, index) => {
-      if (index) keyTimesChunks.push([this.animations[0].keyTimes[index - 1], value]);
+    const lineKeyTimes = this.getLineAnimationKeyTimes(mode);
+
+    lineKeyTimes.forEach((value, index) => {
+      if (index) keyTimesChunks.push([lineKeyTimes[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);
+
+      const playerKeyTimes =
+        mode === AnimationMode.SEQUENTIAL ? animation.keyTimesSeq || animation.keyTimes : animation.keyTimes;
+
+      const playerAnimStartIndex = playerKeyTimes.indexOf(start);
+      const playerAnimEndIndex = playerKeyTimes.indexOf(end);
+
       if (playerAnimStartIndex >= 0 && playerAnimEndIndex >= 0) {
-        const lineKeyTimes = animation.keyTimes.slice(playerAnimStartIndex, playerAnimEndIndex + 1);
+        const derivedLineKeyTimes = playerKeyTimes.slice(playerAnimStartIndex, playerAnimEndIndex + 1);
         keyTimesChunks = [];
-        lineKeyTimes.forEach((value, index) => {
-          if (index) keyTimesChunks.push([lineKeyTimes[index - 1], value]);
+        derivedLineKeyTimes.forEach((value, index) => {
+          if (index) keyTimesChunks.push([derivedLineKeyTimes[index - 1], value]);
         });
       }
     }
@@ -132,8 +139,15 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
     return this._getAttr('animations');
   }
 
-  get animationsByEndTime() {
-    return this._getAttr('animations').map(a => _.last(a.keyTimes));
+  private getLineAnimationKeyTimes(mode: AnimationMode) {
+    const a = this.animations[0];
+    return mode === AnimationMode.SEQUENTIAL ? a.keyTimesSeq || a.keyTimes : a.keyTimes;
+  }
+
+  animationsByEndTime(mode: AnimationMode) {
+    return this._getAttr('animations').map(a =>
+      _.last(mode === AnimationMode.SEQUENTIAL ? a.keyTimesSeq || a.keyTimes : a.keyTimes)
+    );
   }
 
   get animationKeyTimeChunks() {
@@ -144,8 +158,8 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
     this._setAttr('animationKeyTimeChunks', value);
   }
 
-  get lastAnimEndTime() {
-    return _.max(this.animationsByEndTime);
+  lastAnimEndTime(mode: AnimationMode) {
+    return _.max(this.animationsByEndTime(mode));
   }
 
   get firstLinePartControlPoint() {