diff --git a/app/assets/locales/en.json b/app/assets/locales/en.json index 8fc8bcd0e1..547eaa4619 100644 --- a/app/assets/locales/en.json +++ b/app/assets/locales/en.json @@ -185,14 +185,13 @@ "protected": "Protected", "public": "Public", "public_protected": "Public/Protected", - "formats_help": "Shows the available playback types (for example, Presentation or Video). Clicking a format opens the BigBlueButton recording in a new tab.", + "formats_help": "Displays the available playback formats. Selecting a format opens the BigBlueButton Recording in a new tab", "visibility_help": { - "title": "Recording visibility options", - "public_protected": "Public/Protected - The recording is available on the Public Recordings page that can be reached from the Room Join page. The link can only be viewed from within Greenlight", - "public": "Public - The recording is available on the Public Recordings page that can be reached from the Room Join page. The link can be shared with anyone", - "protected": "Protected - The recording must be viewed from within Greenlight", - "published": "Published - The recording is accessible to anyone with the link", - "unpublished": "Unpublished - The recording is not accessible to anyone" + "public_protected": "The recording is available on the Public Recordings page, accessible from the Room Join page. It can also be shared with others using a one-time access link", + "public": "The recording is available on the Public Recordings page, accessible from the Room Join page, and its link can be shared with anyone", + "protected": "The recording is accessible only to the room owner and can be shared with others using a one-time access link", + "published": "The recording is accessible to anyone who has the link", + "unpublished": "The recording is not accessible to anyone" }, "length_in_minutes": "{{recording.length}} min.", "processing_recording": "Processing recording, this may take several minutes...", diff --git a/app/assets/stylesheets/recordings.scss b/app/assets/stylesheets/recordings.scss index fa239153bb..ab3b27ef65 100644 --- a/app/assets/stylesheets/recordings.scss +++ b/app/assets/stylesheets/recordings.scss @@ -132,4 +132,23 @@ svg:hover { color: var(--brand-color) !important; } -} \ No newline at end of file +} + +.simple-select { + .recording-info { + display: inline-flex; + align-items: center; + } + + .dropdown-toggle .recording-info { + visibility: hidden; + pointer-events: none; + min-width: 1.25rem; + justify-content: center; + } + + .dropdown-menu .recording-info { + visibility: visible; + pointer-events: auto; + } +} diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx index 77d7271d23..ebbc1201d7 100644 --- a/app/javascript/components/recordings/RecordingRow.jsx +++ b/app/javascript/components/recordings/RecordingRow.jsx @@ -15,7 +15,7 @@ // with Greenlight; if not, see . import { - VideoCameraIcon, TrashIcon, PencilSquareIcon, ClipboardDocumentIcon, + VideoCameraIcon, TrashIcon, PencilSquareIcon, ClipboardDocumentIcon, QuestionMarkCircleIcon, } from '@heroicons/react/24/outline'; import React, { useState } from 'react'; import PropTypes from 'prop-types'; @@ -24,6 +24,7 @@ import { } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; +import Popover from 'react-bootstrap/Popover'; import { useAuth } from '../../contexts/auth/AuthProvider'; import Spinner from '../shared_components/utilities/Spinner'; import UpdateRecordingForm from './forms/UpdateRecordingForm'; @@ -55,6 +56,22 @@ export default function RecordingRow({ (a, b) => (a.recording_type.toLowerCase() > b.recording_type.toLowerCase() ? 1 : -1), ); + const visibilityHelpText = { + 'Public/Protected': t('recording.visibility_help.public_protected'), + Public: t('recording.visibility_help.public'), + Protected: t('recording.visibility_help.protected'), + Published: t('recording.visibility_help.published'), + Unpublished: t('recording.visibility_help.unpublished'), + }; + + const visibilityPopover = (visibilityKey) => ( + + +

{visibilityHelpText[visibilityKey]}

+ + + ); + return ( visibilityAPI.mutate({ visibility: 'Public/Protected', id: recording.record_id })} > - {t('recording.public_protected')} + + {t('recording.public_protected')} + + + + + + )} @@ -124,7 +148,14 @@ export default function RecordingRow({ value="Public" onClick={() => visibilityAPI.mutate({ visibility: 'Public', id: recording.record_id })} > - {t('recording.public')} + + {t('recording.public')} + + + + + + )} @@ -134,7 +165,14 @@ export default function RecordingRow({ value="Protected" onClick={() => visibilityAPI.mutate({ visibility: 'Protected', id: recording.record_id })} > - {t('recording.protected')} + + {t('recording.protected')} + + + + + + )} @@ -144,7 +182,14 @@ export default function RecordingRow({ value="Published" onClick={() => visibilityAPI.mutate({ visibility: 'Published', id: recording.record_id })} > - {t('recording.published')} + + {t('recording.published')} + + + + + + )} @@ -154,7 +199,14 @@ export default function RecordingRow({ value="Unpublished" onClick={() => visibilityAPI.mutate({ visibility: 'Unpublished', id: recording.record_id })} > - {t('recording.unpublished')} + + {t('recording.unpublished')} + + + + + + )} diff --git a/app/javascript/components/recordings/RecordingsList.jsx b/app/javascript/components/recordings/RecordingsList.jsx index e247080d37..cd040969ad 100644 --- a/app/javascript/components/recordings/RecordingsList.jsx +++ b/app/javascript/components/recordings/RecordingsList.jsx @@ -20,9 +20,9 @@ import { Badge, Card, Stack, Table, } from 'react-bootstrap'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; -import Tooltip from 'react-bootstrap/Tooltip'; import { useTranslation } from 'react-i18next'; import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'; +import Popover from 'react-bootstrap/Popover'; import SortBy from '../shared_components/search/SortBy'; import RecordingsListRowPlaceHolder from './RecordingsListRowPlaceHolder'; import NoSearchResults from '../shared_components/search/NoSearchResults'; @@ -36,23 +36,12 @@ export default function RecordingsList({ }) { const { t } = useTranslation(); - const visibilityTooltip = ( - -
{t('recording.visibility_help.title')}
- - - ); - const formatsTooltip = ( - - {t('recording.formats_help')} - + + +

{t('recording.formats_help')}

+ + ); if (!isLoading && recordings?.data?.length === 0 && !searchInput && recordingsProcessing === 0) { @@ -90,21 +79,7 @@ export default function RecordingsList({ {t('recording.name')} {t('recording.length')} {t('recording.users')} - - - {t('recording.visibility')} - - - - - - + {t('recording.visibility')} {t('recording.formats')} diff --git a/app/javascript/components/shared_components/utilities/SimpleSelect.jsx b/app/javascript/components/shared_components/utilities/SimpleSelect.jsx index 92f436584c..7197e8874c 100644 --- a/app/javascript/components/shared_components/utilities/SimpleSelect.jsx +++ b/app/javascript/components/shared_components/utilities/SimpleSelect.jsx @@ -25,9 +25,11 @@ export default function SimpleSelect({ defaultValue, dropUp, children }) { return ( - - { defaultString?.props?.children } - + + + { defaultString?.props?.children } + + {children}