Improve copy recording functionality (#6154)

farhatahmad · web-flow · commit 83e7a39e44ac · 2025-12-03T16:00:59.000-05:00
diff --git a/app/assets/locales/en.json b/app/assets/locales/en.json
@@ -436,7 +436,7 @@
         "recording_visibility_updated": "The recording visibility has been updated.",
         "recording_name_updated": "The recording name has been updated.",
         "recording_deleted": "The recording has been deleted.",
-        "copied_urls": "The recording URLs have been copied."
+        "copied_urls": "The recording URL has been copied."
       },
       "role": {
         "role_created": "A new role has been created.",
diff --git a/app/assets/stylesheets/recordings.scss b/app/assets/stylesheets/recordings.scss
@@ -76,13 +76,17 @@
   }
 }
 
-.recordings-list {
+.recordings-list, .popover-body {
   .recording-icon-circle {
     min-width: 40px;
     min-height: 40px;
     background-color: var(--brand-color-light);
   }
 
+  [class*="btn-format-"]:hover {
+    background-image: linear-gradient(rgb(0 0 0/5%) 0 0);
+  }
+
   .btn-format-presentation {
     background-color: #f8f5fe;
     color: #6941c6;
diff --git a/app/javascript/components/recordings/CopyRecordingPopover.jsx b/app/javascript/components/recordings/CopyRecordingPopover.jsx
@@ -0,0 +1,77 @@
+// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+//
+// Copyright (c) 2022 BigBlueButton Inc. and by respective authors (see below).
+//
+// This program is free software; you can redistribute it and/or modify it under the
+// terms of the GNU Lesser General Public License as published by the Free Software
+// Foundation; either version 3.0 of the License, or (at your option) any later
+// version.
+//
+// Greenlight is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License along
+// with Greenlight; if not, see <http://www.gnu.org/licenses/>.
+
+/* eslint-disable react/jsx-props-no-spreading */
+
+import React, { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import Popover from 'react-bootstrap/Popover';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import useCopyRecordingUrl from '../../hooks/mutations/recordings/useCopyRecordingUrl';
+
+const CopyRecordingPopover = forwardRef(({
+  recording, formats, onCopied, ...popoverProps
+}, ref) => {
+  const { t } = useTranslation();
+  const copyRecordingUrl = useCopyRecordingUrl();
+
+  return (
+    <Popover id="popover-basic" ref={ref} {...popoverProps}>
+      <Popover.Header as="h3">{t('recording.copy_recording_urls')}</Popover.Header>
+      <Popover.Body>
+        {recording?.visibility !== 'Unpublished' && formats?.map((format) => (
+          <Button
+            onClick={() => copyRecordingUrl.mutate(
+              { record_id: recording.record_id, format: format.recording_type },
+              { onSuccess: () => onCopied() },
+            )}
+            className={`btn-sm rounded-pill me-1 mt-1 border-0 btn-format-${format.recording_type.toLowerCase()}`}
+            key={`${format.recording_type}-${format.url}`}
+          >
+            {format.recording_type}
+          </Button>
+        ))}
+      </Popover.Body>
+    </Popover>
+  );
+});
+
+export default CopyRecordingPopover;
+
+CopyRecordingPopover.propTypes = {
+  recording: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    record_id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    length: PropTypes.number.isRequired,
+    participants: PropTypes.number.isRequired,
+    formats: PropTypes.arrayOf(PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      recording_type: PropTypes.string.isRequired,
+    })),
+    visibility: PropTypes.string.isRequired,
+    protectable: PropTypes.bool,
+    recorded_at: PropTypes.string.isRequired,
+    map: PropTypes.func,
+    user_name: PropTypes.string,
+  }).isRequired,
+  formats: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    recording_type: PropTypes.string.isRequired,
+  })).isRequired,
+  onCopied: PropTypes.func.isRequired,
+};
diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx
@@ -15,23 +15,24 @@
 // with Greenlight; if not, see <http://www.gnu.org/licenses/>.
 
 import {
-  VideoCameraIcon, TrashIcon, PencilSquareIcon, ClipboardDocumentIcon, EllipsisVerticalIcon,
+  VideoCameraIcon, TrashIcon, PencilSquareIcon, ClipboardDocumentIcon,
 } from '@heroicons/react/24/outline';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button, Stack, Dropdown,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { useAuth } from '../../contexts/auth/AuthProvider';
 import Spinner from '../shared_components/utilities/Spinner';
 import UpdateRecordingForm from './forms/UpdateRecordingForm';
 import DeleteRecordingForm from './forms/DeleteRecordingForm';
 import Modal from '../shared_components/modals/Modal';
 import { localizeDateTimeString } from '../../helpers/DateTimeHelper';
 import useRedirectRecordingUrl from '../../hooks/mutations/recordings/useRedirectRecordingUrl';
-import useCopyRecordingUrl from '../../hooks/mutations/recordings/useCopyRecordingUrl';
 import SimpleSelect from '../shared_components/utilities/SimpleSelect';
+import CopyRecordingPopover from './CopyRecordingPopover';
 
 // TODO: Amir - Refactor this.
 export default function RecordingRow({
@@ -43,10 +44,10 @@ export default function RecordingRow({
   const [isEditing, setIsEditing] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const [display, setDisplay] = useState('invisible');
+  const [showCopyPopover, setShowCopyPopover] = useState(false);
 
   const currentUser = useAuth();
   const redirectRecordingUrl = useRedirectRecordingUrl();
-  const copyRecordingUrl = useCopyRecordingUrl();
   const allowedVisibilities = JSON.parse(currentUser.permissions?.AccessToVisibilities);
 
   const localizedTime = localizeDateTimeString(recording?.recorded_at, currentUser?.language);
@@ -170,50 +171,36 @@ export default function RecordingRow({
         ))}
       </td>
       <td className="border-start-0">
-        {adminTable
-          ? (
-            <Dropdown className="float-end cursor-pointer">
-              <Dropdown.Toggle className="hi-s" as={EllipsisVerticalIcon} />
-              <Dropdown.Menu>
-                <Dropdown.Item onClick={() => copyRecordingUrl.mutate({ record_id: recording.record_id })}>
-                  <ClipboardDocumentIcon className="hi-s me-2" />
-                  {t('recording.copy_recording_urls')}
-                </Dropdown.Item>
-                <Modal
-                  modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{t('delete')}</Dropdown.Item>}
-                  body={(
-                    <DeleteRecordingForm
-                      mutation={useDeleteAPI}
-                      recordId={recording.record_id}
-                    />
-                  )}
+        <Stack direction="horizontal" className="float-end recordings-icons">
+          { recording?.visibility !== 'Unpublished' && (
+            <OverlayTrigger
+              trigger="click"
+              show={showCopyPopover}
+              onToggle={(show) => setShowCopyPopover(show)}
+              rootClose
+              overlay={(
+                <CopyRecordingPopover
+                  recording={recording}
+                  formats={formats}
+                  onCopied={() => setShowCopyPopover(false)}
                 />
-              </Dropdown.Menu>
-            </Dropdown>
-          )
-          : (
-            <Stack direction="horizontal" className="float-end recordings-icons">
-              { recording?.visibility !== 'Unpublished' && (
-                <Button
-                  variant="icon"
-                  className="mt-1 me-3"
-                  title={t('recording.copy_recording_urls')}
-                  onClick={() => copyRecordingUrl.mutate({ record_id: recording.record_id })}
-                >
-                  <ClipboardDocumentIcon className="hi-s text-muted" />
-                </Button>
               )}
-              <Modal
-                modalButton={<Dropdown.Item className="btn btn-icon"><TrashIcon className="hi-s me-2" title={t('delete')} /></Dropdown.Item>}
-                body={(
-                  <DeleteRecordingForm
-                    mutation={useDeleteAPI}
-                    recordId={recording.record_id}
-                  />
-                )}
-              />
-            </Stack>
+            >
+              <Button variant="icon" className="mt-1 me-3" title={t('recording.copy_recording_urls')}>
+                <ClipboardDocumentIcon className="hi-s text-muted" />
+              </Button>
+            </OverlayTrigger>
           )}
+          <Modal
+            modalButton={<Dropdown.Item className="btn btn-icon"><TrashIcon className="hi-s me-2" title={t('delete')} /></Dropdown.Item>}
+            body={(
+              <DeleteRecordingForm
+                mutation={useDeleteAPI}
+                recordId={recording.record_id}
+              />
+            )}
+          />
+        </Stack>
       </td>
     </tr>
   );
diff --git a/app/javascript/components/rooms/room/public_recordings/PublicRecordingRow.jsx b/app/javascript/components/rooms/room/public_recordings/PublicRecordingRow.jsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Lesser General Public License along
 // with Greenlight; if not, see <http://www.gnu.org/licenses/>.
 
-import React from 'react';
+import React, { useState } from 'react';
 import {
   VideoCameraIcon, ClipboardDocumentIcon,
 } from '@heroicons/react/24/outline';
@@ -23,10 +23,11 @@ import {
   Button, Stack,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { useAuth } from '../../../../contexts/auth/AuthProvider';
 import { localizeDateTimeString } from '../../../../helpers/DateTimeHelper';
 import useRedirectRecordingUrl from '../../../../hooks/mutations/recordings/useRedirectRecordingUrl';
-import useCopyRecordingUrl from '../../../../hooks/mutations/recordings/useCopyRecordingUrl';
+import CopyRecordingPopover from '../../../recordings/CopyRecordingPopover';
 
 // TODO: Amir - Refactor this.
 export default function PublicRecordingRow({
@@ -36,7 +37,7 @@ export default function PublicRecordingRow({
 
   const currentUser = useAuth();
   const redirectRecordingUrl = useRedirectRecordingUrl();
-  const copyRecordingUrl = useCopyRecordingUrl();
+  const [showCopyPopover, setShowCopyPopover] = useState(false);
 
   const localizedTime = localizeDateTimeString(recording?.recorded_at, currentUser?.language);
   const formats = recording.formats.sort(
@@ -70,14 +71,23 @@ export default function PublicRecordingRow({
       </td>
       <td className="border-start-0">
         <Stack direction="horizontal" className="float-end recordings-icons">
-          <Button
-            variant="icon"
-            className="mt-1 me-3"
-            title={t('recording.copy_recording_urls')}
-            onClick={() => copyRecordingUrl.mutate({ record_id: recording.record_id })}
+          <OverlayTrigger
+            trigger="click"
+            show={showCopyPopover}
+            onToggle={(show) => setShowCopyPopover(show)}
+            rootClose
+            overlay={(
+              <CopyRecordingPopover
+                recording={recording}
+                formats={formats}
+                onCopied={() => setShowCopyPopover(false)}
+              />
+            )}
           >
-            <ClipboardDocumentIcon className="hi-s text-muted" />
-          </Button>
+            <Button variant="icon" className="mt-1 me-3" title={t('recording.copy_recording_urls')}>
+              <ClipboardDocumentIcon className="hi-s text-muted" />
+            </Button>
+          </OverlayTrigger>
         </Stack>
       </td>
     </tr>
diff --git a/app/javascript/hooks/mutations/recordings/useCopyRecordingUrl.jsx b/app/javascript/hooks/mutations/recordings/useCopyRecordingUrl.jsx
@@ -23,11 +23,11 @@ export default function useCopyRecordingUrl() {
   const { t } = useTranslation();
 
   return useMutation(
-    (data) => axios.post('/recordings/recording_url.json', { id: data.record_id })
+    (data) => axios.post('/recordings/recording_url.json', { id: data.record_id, recording_format: data.format })
       .then((resp) => resp.data),
     {
       onSuccess: (url) => {
-        navigator.clipboard.writeText(url?.join('\n')).then(() => toast.success(t('toast.success.recording.copied_urls')));
+        navigator.clipboard.writeText(url?.data).then(() => toast.success(t('toast.success.recording.copied_urls')));
       },
       onError: () => {
         toast.error(t('toast.error.problem_completing_action'));

Original file line number	Diff line number	Diff line change
`@@ -76,13 +76,17 @@`
`76`	`76`	`}`
`77`	`77`	`}`
`78`	`78`
`79`		`-.recordings-list {`
	`79`	`+.recordings-list, .popover-body {`
`80`	`80`	`.recording-icon-circle {`
`81`	`81`	`min-width: 40px;`
`82`	`82`	`min-height: 40px;`
`83`	`83`	`background-color: var(--brand-color-light);`
`84`	`84`	`}`
`85`	`85`
	`86`	`+ [class*="btn-format-"]:hover {`
	`87`	`+ background-image: linear-gradient(rgb(0 0 0/5%) 0 0);`
	`88`	`+ }`
	`89`	`+`
`86`	`90`	`.btn-format-presentation {`
`87`	`91`	`background-color: #f8f5fe;`
`88`	`92`	`color: #6941c6;`