Added a button to frame player to copy filename

changelog.d/20250124_143705_klakhov_copy_frame_name_button.md

@@ -0,0 +1,4 @@
+### Added
+
+- A button to copy a filename of the image into the clipboard
+  (<https://github.com/cvat-ai/cvat/pull/8989>)

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

@@ -186,7 +186,8 @@
 
 .cvat-player-frame-url-icon,
 .cvat-player-delete-frame,
-.cvat-player-restore-frame {
+.cvat-player-restore-frame,
+.cvat-player-copy-frame-name-icon {
     opacity: 0.7;
     color: $objects-bar-icons-color;
 
@@ -199,9 +200,10 @@
     }
 }
 
-.cvat-player-delete-frame,
-.cvat-player-restore-frame {
-    margin-left: $grid-unit-size * 2;
+.cvat-player-frame-actions {
+    span:not(:first-child) {
+        margin-left: $grid-unit-size;
+    }
 }
 
 .cvat-player-frame-selector {

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 
 import { Row, Col } from 'antd/lib/grid';
-import Icon, { LinkOutlined, DeleteOutlined } from '@ant-design/icons';
+import Icon, { LinkOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons';
 import Slider from 'antd/lib/slider';
 import InputNumber from 'antd/lib/input-number';
 import Text from 'antd/lib/typography/Text';
@@ -39,6 +39,7 @@ interface Props {
     onSliderChange(value: number): void;
     onInputChange(value: number): void;
     onURLIconClick(): void;
+    onCopyFilenameIconClick(): void;
     onDeleteFrame(): void;
     onRestoreFrame(): void;
     switchNavigationBlocked(blocked: boolean): void;
@@ -79,6 +80,7 @@ function PlayerNavigation(props: Props): JSX.Element {
         onSliderChange,
         onInputChange,
         onURLIconClick,
+        onCopyFilenameIconClick,
         onDeleteFrame,
         onRestoreFrame,
         switchNavigationBlocked,
@@ -186,7 +188,10 @@ function PlayerNavigation(props: Props): JSX.Element {
                             <Text type='secondary'>{frameFilename}</Text>
                         </CVATTooltip>
                     </Col>
-                    <Col offset={1}>
+                    <Col className='cvat-player-frame-actions' offset={1}>
+                        <CVATTooltip title='Copy frame filename'>
+                            <CopyOutlined className='cvat-player-copy-frame-name-icon' onClick={onCopyFilenameIconClick} />
+                        </CVATTooltip>
                         <CVATTooltip title='Create frame URL'>
                             <LinkOutlined className='cvat-player-frame-url-icon' onClick={onURLIconClick} />
                         </CVATTooltip>

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

@@ -61,6 +61,7 @@ interface Props {
     onSliderChange(value: number): void;
     onInputChange(value: number): void;
     onURLIconClick(): void;
+    onCopyFilenameIconClick(): void;
     onUndoClick(): void;
     onRedoClick(): void;
     onFinishDraw(): void;
@@ -117,6 +118,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
         onSliderChange,
         onInputChange,
         onURLIconClick,
+        onCopyFilenameIconClick,
         onUndoClick,
         onRedoClick,
         onFinishDraw,
@@ -171,6 +173,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
             onSliderChange={onSliderChange}
             onInputChange={onInputChange}
             onURLIconClick={onURLIconClick}
+            onCopyFilenameIconClick={onCopyFilenameIconClick}
             onDeleteFrame={onDeleteFrame}
             onRestoreFrame={onRestoreFrame}
             switchNavigationBlocked={switchNavigationBlocked}

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -31,6 +31,7 @@ import {
 import { Canvas, CanvasMode } from 'cvat-canvas-wrapper';
 import { Canvas3d } from 'cvat-canvas3d-wrapper';
 import { filterApplicableLabels } from 'utils/filter-applicable-labels';
+import { toClipboard } from 'utils/to-clipboard';
 
 interface OwnProps {
     readonly: boolean;
@@ -233,16 +234,7 @@ class ObjectItemContainer extends React.PureComponent<Props, State> {
         const search = `frame=${frameNumber}&type=${objectState.objectType}&serverID=${objectState.serverID}`;
         const url = `${origin}${pathname}?${search}`;
 
-        const fallback = (): void => {
-            // eslint-disable-next-line
-            window.prompt('Browser Clipboard API not allowed, please copy manually', url);
-        };
-
-        if (window.isSecureContext) {
-            window.navigator.clipboard.writeText(url).catch(fallback);
-        } else {
-            fallback();
-        }
+        toClipboard(url);
     };
 
     private switchOrientation = (): void => {

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -41,6 +41,7 @@ import isAbleToChangeFrame from 'utils/is-able-to-change-frame';
 import { KeyMap } from 'utils/mousetrap-react';
 import { switchToolsBlockerState } from 'actions/settings-actions';
 import { writeLatestFrame } from 'utils/remember-latest-frame';
+import { toClipboard } from 'utils/to-clipboard';
 
 interface StateToProps {
     jobInstance: Job;
@@ -567,16 +568,13 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
         const { origin, pathname } = window.location;
         const url = `${origin}${pathname}?frame=${frameNumber}`;
 
-        const fallback = (): void => {
-            // eslint-disable-next-line
-            window.prompt('Browser Clipboard API not allowed, please copy manually', url);
-        };
+        toClipboard(url);
+    };
 
-        if (window.isSecureContext) {
-            window.navigator.clipboard.writeText(url).catch(fallback);
-        } else {
-            fallback();
-        }
+    private onCopyFilenameIconClick = (): void => {
+        const { frameFilename } = this.props;
+
+        toClipboard(frameFilename);
     };
 
     private onDeleteFrame = (): void => {
@@ -670,6 +668,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
                 onSliderChange={this.onChangePlayerSliderValue}
                 onInputChange={this.onChangePlayerInputValue}
                 onURLIconClick={this.onURLIconClick}
+                onCopyFilenameIconClick={this.onCopyFilenameIconClick}
                 onDeleteFrame={this.onDeleteFrame}
                 onRestoreFrame={this.onRestoreFrame}
                 changeWorkspace={this.changeWorkspace}

cvat-ui/src/utils/to-clipboard.ts

@@ -0,0 +1,16 @@
+// Copyright (C) CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+export function toClipboard(text: string): void {
+    const fallback = (): void => {
+        // eslint-disable-next-line
+        window.prompt('Browser Clipboard API not allowed, please copy manually', text);
+    };
+
+    if (window.isSecureContext) {
+        window.navigator.clipboard.writeText(text).catch(fallback);
+    } else {
+        fallback();
+    }
+}

site/content/en/docs/manual/basics/CVAT-annotation-Interface/navbar.md

@@ -60,16 +60,18 @@ Use the following buttons, to save your work, undo changes, and move tasks to do
 Overview of how to navigate through frames within the interface,
 with detailed descriptions provided in the table below.
 
-![Navigation Controls](/images/image008.jpg)
+![Navigation Controls](/images/navigation_controls.png)
 
-| Function                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| Function | Description |
 | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Go to the first**/**last frame**<br><br> ![First last frame controls](/images/image036.jpg)                 | Navigate to the first or the last frame of the sequence.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| **Go back with a step**/**Go next with a step**<br><br>![Go to a step controls](/images/image037.jpg)         | Move to the previous or next frame by a predefined step. <br><br>Shortcuts:<br><li>**C** — previous frame. <li>**V** — next frame. <br><br>Default step size is `10` frames. To modify this, navigate to **Nickname** > **Settings** > **Player Step**.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| **Go back**/**Go next**<br><br>![Go back and go forth controls](/images/go_back_next.png)                     | Navigate to the neighboring frames. <br><br>Shortcuts:<br><li> **D** — previous frame. <li>**F** — next frame.<br><br>**Go back**/**Go next** buttons are customizable: <br><br>![](/images/go_back_custom.png)<br><br>To customize, right-click on the button and select one of three options (left to right): <ol><li>The default setting moves to the next or previous frame (step size is 1 frame).</li><li>Move to the next or previous frame that contains objects (e.g., filtered). For more information, refer to [Filters](/docs/manual/advanced/filter).</li><li>Move to the next or previous frame without annotations. Use this option to quickly locate missed frames.</li></ol>.     |
-| **Play**/**Pause**<br><br>![Play and pause](/images/image041.jpg)                                             | Switch between playing and pausing the sequence of frames or set of images. <br>Shortcut: **Space**. <br>To adjust the playback speed, go to **Nickname** > **Settings** > **Player Speed**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| **Go to the specific frame**<br><br>![Go to the specific frame](/images/image060.jpg)                         | Enter the number of the frame you want to go to and press **Enter**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| **Delete frame**<br><br>![Delete frame](/images/delete_frame.png)                                             | Click to delete current frame.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Go to the first**/**last frame**<br><br> ![First last frame controls](/images/image036.jpg) | Navigate to the first or the last frame of the sequence. |
+| **Go back with a step**/**Go next with a step**<br><br>![Go to a step controls](/images/image037.jpg) | Move to the previous or next frame by a predefined step. <br><br>Shortcuts:<br><li>**C** — previous frame. <li>**V** — next frame. <br><br>Default step size is `10` frames. To modify this, navigate to **Nickname** > **Settings** > **Player Step**. |
+| **Go back**/**Go next**<br><br>![Go back and go forth controls](/images/go_back_next.png) | Navigate to the neighboring frames. <br><br>Shortcuts:<br><li> **D** — previous frame. <li>**F** — next frame.<br><br>**Go back**/**Go next** buttons are customizable: <br><br>![](/images/go_back_custom.png)<br><br>To customize, right-click on the button and select one of three options (left to right): <ol><li>The default setting moves to the next or previous frame (step size is 1 frame).</li><li>Move to the next or previous frame that contains objects (e.g., filtered). For more information, refer to [Filters](/docs/manual/advanced/filter).</li><li>Move to the next or previous frame without annotations. Use this option to quickly locate missed frames.</li></ol>. |
+| **Play**/**Pause**<br><br>![Play and pause](/images/image041.jpg) | Switch between playing and pausing the sequence of frames or set of images. <br>Shortcut: **Space**. <br>To adjust the playback speed, go to **Nickname** > **Settings** > **Player Speed**. |
+| **Go to the specific frame**<br><br>![Go to the specific frame](/images/image060.jpg) | Enter the number of the frame you want to go to and press **Enter**. |
+| **Copy frame name**<br><br>![Copy frame name](/images/navigation_icons_copy_filename.png) | Click to copy frame name to the clipboard. |
+| **Copy frame link**<br><br>![Delete frame](/images/navigation_icons_copy_link.png) | Click to copy link to the frame. |
+| **Delete frame**<br><br>![Delete frame](/images/navigation_icons_delete_frame.png) | Click to delete or restore current frame. |
 
 ## Job information and Annotation Mode switcher