Marks and navigation buttons for chapters of video files in the player navigation

changelog.d/20251125_154952_max.christoph_chapters.md

@@ -0,0 +1,4 @@
+### Added
+
+- Show video chapters in the player progress as marks. Seek to chapters with a menu and with player navigation buttons.
+  (<https://github.com/cvat-ai/cvat/pull/9924>)

cvat-core/src/frames.ts

@@ -9,7 +9,7 @@ import {
 } from 'cvat-data';
 import PluginRegistry from './plugins';
 import serverProxy from './server-proxy';
-import { SerializedFramesMetaData } from './server-response-types';
+import { SerializedChapterMetaData, SerializedFramesMetaData } from './server-response-types';
 import { ArgumentError } from './exceptions';
 import { FieldUpdateTrigger } from './common';
 import config from './config';
@@ -83,8 +83,28 @@ interface FramesMetaDataUpdatedData {
     deletedFrames: Record<number, DeletedFrameState>;
 }
 
+export class ChapterMetaData {
+    readonly #title: string;
+
+    constructor(initialData: SerializedChapterMetaData) {
+        this.#title = initialData.title;
+    }
+
+    get title(): string {
+        return this.#title;
+    }
+}
+
+export class Chapter {
+    public id: number;
+    public start: number;
+    public stop: number;
+    public metadata: ChapterMetaData;
+}
+
 export class FramesMetaData {
     public chunkSize: number;
+    public chapters: Chapter[] | null;
     public deletedFrames: Record<number, boolean>;
     public includedFrames: number[] | null;
     public frameFilter: string;
@@ -109,6 +129,7 @@ export class FramesMetaData {
     constructor(initialData: Omit<SerializedFramesMetaData, 'deleted_frames'> & { deleted_frames: Record<number, boolean> }) {
         const data: typeof initialData = {
             chunk_size: undefined,
+            chapters: [],
             deleted_frames: {},
             included_frames: null,
             frame_filter: undefined,
@@ -174,6 +195,9 @@ export class FramesMetaData {
                 chunkSize: {
                     get: () => data.chunk_size,
                 },
+                chapters: {
+                    get: () => data.chapters,
+                },
                 deletedFrames: {
                     get: () => data.deleted_frames,
                 },
@@ -971,9 +995,13 @@ export async function patchMeta(id: number, meta?: FramesMetaData, session: 'job
 }
 
 export async function findFrame(
-    jobID: number, frameFrom: number, frameTo: number, filters: { offset?: number, notDeleted: boolean },
+    jobID: number,
+    frameFrom: number,
+    frameTo: number,
+    filters: { offset?: number, notDeleted: boolean, chapterMark?: boolean },
 ): Promise<number | null> {
     const offset = filters.offset || 1;
+    const chapterMark = filters.chapterMark || false;
     const meta = await getFramesMeta('job', jobID);
 
     const sign = Math.sign(frameTo - frameFrom);
@@ -993,6 +1021,11 @@ export async function findFrame(
         if (filters.notDeleted) {
             return !(frame in meta.deletedFrames);
         }
+
+        if (chapterMark) {
+            return meta.chapters.some((chapter) => chapter.start === frame);
+        }
+
         return true;
     };
     for (let frame = frameFrom; predicate(frame); frame = update(frame)) {

cvat-core/src/server-response-types.ts

@@ -493,8 +493,20 @@ export interface SerializedCloudStorage {
     manifests?: string[];
 }
 
+export interface SerializedChapterMetaData {
+    title: string;
+}
+
+export interface SerializedChapter {
+    id: number;
+    start: number;
+    end: number;
+    metadata: SerializedChapterMetaData;
+}
+
 export interface SerializedFramesMetaData {
     chunk_size: number;
+    chapters: SerializedChapter[] | null
     deleted_frames: number[];
     included_frames: number[] | null;
     frame_filter: string;

cvat-core/src/session.ts

@@ -426,6 +426,7 @@ export class Session {
             filters: {
                 offset?: number,
                 notDeleted: boolean,
+                chapterMark?: boolean,
             },
             frameFrom: number,
             frameTo: number,

cvat-ui/src/actions/annotation-actions.ts

@@ -154,6 +154,7 @@ export enum AnnotationActionTypes {
     SWITCH_Z_LAYER = 'SWITCH_Z_LAYER',
     ADD_Z_LAYER = 'ADD_Z_LAYER',
     SEARCH_ANNOTATIONS_FAILED = 'SEARCH_ANNOTATIONS_FAILED',
+    SEARCH_CHAPTERS_FAILED = 'SEARCH_CHAPTERS_FAILED',
     CHANGE_WORKSPACE = 'CHANGE_WORKSPACE',
     SAVE_LOGS_SUCCESS = 'SAVE_LOGS_SUCCESS',
     SAVE_LOGS_FAILED = 'SAVE_LOGS_FAILED',
@@ -171,6 +172,16 @@ export enum AnnotationActionTypes {
     RESTORE_FRAME_FAILED = 'RESTORE_FRAME_FAILED',
     UPDATE_BRUSH_TOOLS_CONFIG = 'UPDATE_BRUSH_TOOLS_CONFIG',
     HIGHLIGHT_CONFLICT = 'HIGHLIGHT_CONFCLICT',
+    HOVERED_CHAPTER = 'HOVERED_CHAPTER',
+}
+
+export function setHoveredChapter(id: number | null): AnyAction {
+    return {
+        type: AnnotationActionTypes.HOVERED_CHAPTER,
+        payload: {
+            id,
+        },
+    };
 }
 
 export function saveLogsAsync(): ThunkAction {
@@ -1324,6 +1335,40 @@ export function searchAnnotationsAsync(
     };
 }
 
+export function searchChaptersAsync(
+    sessionInstance: NonNullable<CombinedState['annotation']['job']['instance']>,
+    frameFrom: number,
+    frameTo: number,
+) {
+    return async (dispatch: ThunkDispatch, getState: () => CombinedState): Promise<void> => {
+        try {
+            const {
+                settings: {
+                    player: { showDeletedFrames },
+                },
+            } = getState();
+
+            const frame = await sessionInstance.frames
+                .search(
+                    {
+                        notDeleted: showDeletedFrames,
+                        chapterMark: true,
+                    },
+                    frameFrom,
+                    frameTo,
+                );
+            if (frame !== null) {
+                dispatch(changeFrameAsync(frame));
+            }
+        } catch (error) {
+            dispatch({
+                type: AnnotationActionTypes.SEARCH_CHAPTERS_FAILED,
+                payload: { error },
+            });
+        }
+    };
+}
+
 export const ShapeTypeToControl: Record<ShapeType, ActiveControl> = {
     [ShapeType.RECTANGLE]: ActiveControl.DRAW_RECTANGLE,
     [ShapeType.POLYLINE]: ActiveControl.DRAW_POLYLINE,

cvat-ui/src/components/annotation-page/styles.scss

@@ -156,6 +156,33 @@
         height: $grid-unit-size;
         background-color: $player-slider-color;
     }
+
+    > .ant-slider-mark {
+        z-index: 2;
+        top: -16px;
+
+        > .ant-slider-mark-text {
+            > .ant-slider-mark-chapter {
+                display: inline-block;
+                width: 2px;
+                height: 10px;
+                background-color: #ccc;
+                border-radius: 2px;
+                transition: all 0.1s ease;
+                transform-origin: center center;
+                transform: scaleX(1);
+            }
+
+            > .ant-slider-mark-chapter.active {
+                transform: scaleX(1.5);
+                background-color: #ff4136;
+            }
+        }
+    }
+
+    > .ant-slider-step > .ant-slider-dot {
+        z-index: 2;
+    }
 }
 
 .cvat-player-slider-progress {
@@ -457,6 +484,28 @@
     }
 }
 
+.cvat-player-chapter-menu-wrapper {
+    max-height: 37 * $grid-unit-size;
+    max-width: 22 * $grid-unit-size;
+    overflow: auto;
+}
+
+.cvat-player-chapter-menu-list {
+    .cvat-player-chapter-menu-list-item {
+        margin-right: 2px;
+
+        &:hover {
+            transform: translateX(2px);
+            box-shadow: 0 2px 5px rgba(0,0,0,10%);
+            background-color: #f5f5f5;
+        }
+    }
+}
+
+.cvat-player-chapters-menu-button svg {
+    transform: scale(0.8);
+}
+
 .cvat-annotations-filters-input.ant-select {
     > .ant-select-selector {
         height: 32px;
@@ -473,7 +522,9 @@
 .cvat-player-previous-filtered-inlined-button,
 .cvat-player-next-filtered-inlined-button,
 .cvat-player-previous-empty-inlined-button,
-.cvat-player-next-empty-inlined-button {
+.cvat-player-next-empty-inlined-button,
+.cvat-player-previous-chapter-inlined-button,
+.cvat-player-next-chapter-inlined-button {
     color: $player-buttons-color;
 
     &:not(:first-child) {

cvat-ui/src/components/annotation-page/top-bar/chapter-menu.tsx

@@ -0,0 +1,87 @@
+// Copyright (C) CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import Icon from '@ant-design/icons';
+import Popover from 'antd/lib/popover';
+import List from 'antd/lib/list';
+import CvatTooltip from 'components/common/cvat-tooltip';
+import { Chapter } from 'cvat-core/src/frames';
+import { ChapterMenuIcon } from 'icons';
+
+interface Props {
+    chapters: Chapter[];
+    onSelectChapter: (id: number) => void;
+    onHoveredChapter?: (id: number | null) => void;
+}
+
+function ChapterMenu(props: Readonly<Props>): JSX.Element {
+    const {
+        chapters,
+        onSelectChapter,
+        onHoveredChapter,
+    } = props;
+
+    const content = (
+        <div className='cvat-player-chapter-menu-wrapper'>
+            <List
+                className='cvat-player-chapter-menu-list'
+                size='small'
+                dataSource={chapters}
+                renderItem={(chapter: Chapter) => {
+                    const itemClass = 'cvat-player-chapter-menu-list-item';
+
+                    return (
+                        <List.Item
+                            className={itemClass}
+                            key={chapter.id}
+                            onClick={() => onSelectChapter(chapter.id)}
+                            onMouseEnter={() => onHoveredChapter?.(chapter.id)}
+                            onMouseLeave={() => onHoveredChapter?.(null)}
+                        >
+                            <div>
+                                <strong>
+                                    <span style={{ color: '#aaa' }}>
+                                        {chapter.id}
+                                        {': '}
+                                    </span>
+                                    {chapter.metadata.title}
+                                </strong>
+                                <div>
+                                    Frames
+                                    {' '}
+                                    {chapter.start}
+                                    -
+                                    {chapter.stop}
+                                </div>
+                            </div>
+                        </List.Item>
+
+                    );
+                }}
+            />
+        </div>
+    );
+
+    return (
+        <Popover
+            trigger='click'
+            content={content}
+            title='Chapters'
+            placement='bottom'
+            className='cvat-player-chapter-menu'
+        >
+
+            <CvatTooltip title='Select chapter'>
+                <Icon
+                    className='cvat-player-chapters-menu-button'
+                    component={ChapterMenuIcon}
+                />
+            </CvatTooltip>
+
+        </Popover>
+    );
+}
+
+export default React.memo(ChapterMenu);