mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-03 17:43:59 +03:00
* Initial copy timestamp url implementation
* revise url format
* Implement share timestamp dialog
* Use translations
* Add comments
* Add validations to shared link
* Switch to searchEffect implementation
* Add missing accessibility related dialog description
* Change URL format to unix timestamps
* Remove unnecessary useEffect
* Remove duplicated dialog title
* Fixes/improvements based off PR review comments
* Add missing cancel button & separators to dialog
* Make share description clearer
* Bugfix: guard against showing toasts twice
Because this effect ends up running multiple times
* Clamp future timestamps to now
* Revert "Bugfix: guard against showing toasts twice"
This reverts commit 99fa5e1dee.
* Use normal separator
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
* Fixes based off PR review comments
* Bugfix: Share dialog was not receiving the player timestamp after removing key that triggered remounts
* Defer `setRecording` and return true from hook for cleanup
* Remove timeout defer hack in favor of refactored hook
* Attempt to replay video muted on NotAllowedError
* Use separate persistent mute and temporary forced mute states
* Align cancel button with other dialogs
* Prevent wrapping on dialog title
* Remove extra "back" button on mobile drawer
* Fix back navigation when coming from direct shared timestamp links
* Use new timeformat hook
* Simplify dialog radio buttons
* Apply suggestions from code review
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
---------
Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
172 lines
4.6 KiB
TypeScript
172 lines
4.6 KiB
TypeScript
import { Recording } from "@/types/record";
|
|
import { DynamicPlayback } from "@/types/playback";
|
|
import { PreviewController } from "../PreviewPlayer";
|
|
import { TimeRange, TrackingDetailsSequence } from "@/types/timeline";
|
|
import {
|
|
calculateInpointOffset,
|
|
calculateSeekPosition,
|
|
} from "@/utils/videoUtil";
|
|
import { playWithTemporaryMuteFallback } from "@/utils/videoUtil.ts";
|
|
|
|
type PlayerMode = "playback" | "scrubbing";
|
|
|
|
export class DynamicVideoController {
|
|
// main state
|
|
public camera = "";
|
|
private playerController: HTMLVideoElement;
|
|
private previewController: PreviewController;
|
|
private setNoRecording: (noRecs: boolean) => void;
|
|
private setFocusedItem: (timeline: TrackingDetailsSequence) => void;
|
|
private playerMode: PlayerMode = "playback";
|
|
|
|
// playback
|
|
private recordings: Recording[] = [];
|
|
private timeRange: TimeRange = { after: 0, before: 0 };
|
|
private inpointOffset: number = 0;
|
|
private annotationOffset: number;
|
|
private timeToStart: number | undefined = undefined;
|
|
|
|
constructor(
|
|
camera: string,
|
|
playerController: HTMLVideoElement,
|
|
previewController: PreviewController,
|
|
annotationOffset: number,
|
|
defaultMode: PlayerMode,
|
|
setNoRecording: (noRecs: boolean) => void,
|
|
setFocusedItem: (timeline: TrackingDetailsSequence) => void,
|
|
) {
|
|
this.camera = camera;
|
|
this.playerController = playerController;
|
|
this.previewController = previewController;
|
|
this.annotationOffset = annotationOffset;
|
|
this.playerMode = defaultMode;
|
|
this.setNoRecording = setNoRecording;
|
|
this.setFocusedItem = setFocusedItem;
|
|
}
|
|
|
|
newPlayback(newPlayback: DynamicPlayback) {
|
|
this.recordings = newPlayback.recordings;
|
|
this.timeRange = newPlayback.timeRange;
|
|
this.inpointOffset = calculateInpointOffset(
|
|
this.timeRange.after,
|
|
this.recordings[0],
|
|
);
|
|
|
|
if (this.timeToStart) {
|
|
this.seekToTimestamp(this.timeToStart);
|
|
this.timeToStart = undefined;
|
|
}
|
|
}
|
|
|
|
play() {
|
|
this.playerController.play();
|
|
}
|
|
|
|
pause() {
|
|
this.playerController.pause();
|
|
}
|
|
|
|
isPlaying(): boolean {
|
|
return !this.playerController.paused && !this.playerController.ended;
|
|
}
|
|
|
|
seekToTimestamp(time: number, play: boolean = false) {
|
|
if (time < this.timeRange.after || time > this.timeRange.before) {
|
|
this.timeToStart = time;
|
|
return;
|
|
}
|
|
|
|
if (this.playerMode != "playback") {
|
|
this.playerMode = "playback";
|
|
}
|
|
|
|
const seekSeconds = calculateSeekPosition(
|
|
time,
|
|
this.recordings,
|
|
this.inpointOffset,
|
|
);
|
|
|
|
if (seekSeconds === undefined) {
|
|
this.setNoRecording(true);
|
|
return;
|
|
}
|
|
|
|
if (seekSeconds != 0) {
|
|
this.playerController.currentTime = seekSeconds;
|
|
|
|
if (play) {
|
|
this.waitAndPlay();
|
|
} else {
|
|
this.playerController.pause();
|
|
}
|
|
} else {
|
|
// no op
|
|
}
|
|
}
|
|
|
|
waitAndPlay() {
|
|
return new Promise((resolve) => {
|
|
const onSeekedHandler = () => {
|
|
this.playerController.removeEventListener("seeked", onSeekedHandler);
|
|
playWithTemporaryMuteFallback(this.playerController);
|
|
resolve(undefined);
|
|
};
|
|
|
|
this.playerController.addEventListener("seeked", onSeekedHandler, {
|
|
once: true,
|
|
});
|
|
});
|
|
}
|
|
|
|
seekToTimelineItem(timeline: TrackingDetailsSequence) {
|
|
this.playerController.pause();
|
|
this.seekToTimestamp(timeline.timestamp + this.annotationOffset);
|
|
this.setFocusedItem(timeline);
|
|
}
|
|
|
|
getProgress(playerTime: number): number {
|
|
// take a player time in seconds and convert to timestamp in timeline
|
|
let timestamp = 0;
|
|
let totalTime = 0;
|
|
(this.recordings || []).every((segment) => {
|
|
if (totalTime + segment.duration > playerTime) {
|
|
// segment is here
|
|
timestamp = segment.start_time + (playerTime - totalTime);
|
|
return false;
|
|
} else {
|
|
totalTime += segment.duration;
|
|
return true;
|
|
}
|
|
});
|
|
|
|
return timestamp;
|
|
}
|
|
|
|
scrubToTimestamp(time: number, saveIfNotReady: boolean = false) {
|
|
const scrubResult = this.previewController.scrubToTimestamp(time);
|
|
|
|
if (!scrubResult && saveIfNotReady) {
|
|
this.previewController.setNewPreviewStartTime(time);
|
|
}
|
|
|
|
if (scrubResult && this.playerMode != "scrubbing") {
|
|
this.playerMode = "scrubbing";
|
|
this.playerController.pause();
|
|
}
|
|
}
|
|
|
|
hasRecordingAtTime(time: number): boolean {
|
|
if (!this.recordings || this.recordings.length == 0) {
|
|
return false;
|
|
}
|
|
|
|
return (
|
|
this.recordings.find(
|
|
(segment) => segment.start_time <= time && segment.end_time >= time,
|
|
) != undefined
|
|
);
|
|
}
|
|
}
|
|
|
|
export default typeof DynamicVideoController;
|