Improvement of Room Sharing capabilities (followup to #5068 static SIP pins)

app/assets/locales/de.json

@@ -17,6 +17,7 @@
   "close": "Schließen",
   "delete": "Löschen",
   "copy": "Einladungslink kopieren",
+  "copy_voice_bridge": "Telefoneinwahl kopieren",
   "copy_viewer_code": "Zugangscode für Zuhörerende kopieren",
   "copy_moderator_code": "Zugangscode für Moderation kopieren",
   "or": "oder",
@@ -125,7 +126,14 @@
       "meeting_invitation": "Du wurdest zur Teilnahme eingeladen",
       "meeting_not_started": "Die Konferenz hat noch nicht begonnen",
       "join_meeting_automatically": "Beitritt erfolgt automatisch, sobald die Konferenz beginnt",
-      "recording_consent": "Ich nehme zur Kenntnis, dass die Sitzung aufgezeichnet werden kann. Dies wird meine Stimme und mein Bild einschließen, wenn dies aktiviert ist."
+      "recording_consent": "Ich nehme zur Kenntnis, dass die Sitzung aufgezeichnet werden kann. Dies wird meine Stimme und mein Bild einschließen, wenn dies aktiviert ist.",
+      "invite_to_meeting": "{{ name }} lädt Sie ein, an einem Meeting teilzunehmen.",
+      "join_by_url": "An Besprechung per URL teilnehmen",
+      "alternative_options": "Alternative Optionen zur Teilnahme",
+      "download_ics": ".ics-Kalenderdatei herunterladen",
+      "share_meeting": "Raum teilen",
+      "join_by_phone": "Mit Telefoneinwahl beitreten",
+      "location": "Videokonferenz, siehe Details im Termin"
     },
     "presentation": {
       "presentation": "Präsentation",
@@ -403,6 +411,8 @@
         "access_code_generated": "Zugangscode generiert.",
         "access_code_deleted": "Zugriffcode wurde gelöscht.",
         "copied_meeting_url": "Die URL der Konferenz wurde kopiert. Der Link kann verwendet werden, um an der Konferenz teilzunehmen.",
+        "download_ics": "Die .ics-Datei wurde erstellt. Öffnen Sie sie, um sie zu bearbeiten und zu versenden, um Personen zu Ihrem Meeting einzuladen.",
+        "copied_voice_bridge": "Die Telefonnummer und der Pin wurden kopiert. Diese können genutzt werden um an der Konferenz teilzunehmen.",
         "copied_viewer_code": "Zugangscode für Zuhörende wurde in die Zwischenablage kopiert.",
         "copied_moderator_code": "Zugangscode für Moderation wurde in die Zwischenablage kopiert."
       },

app/assets/locales/en.json

@@ -18,6 +18,7 @@
   "close": "Close",
   "delete": "Delete",
   "copy": "Copy Join Link",
+  "copy_voice_bridge": "Copy Phone Dialup",
   "copy_viewer_code": "Copy Viewer Code",
   "copy_moderator_code": "Copy Moderator Code",
   "or": "Or",
@@ -126,7 +127,14 @@
       "meeting_invitation": "You have been invited to join",
       "meeting_not_started": "The meeting has not started yet",
       "join_meeting_automatically": "You will automatically join when the meeting starts",
-      "recording_consent": "I acknowledge that this session may be recorded. This may include my voice and video if enabled."
+      "recording_consent": "I acknowledge that this session may be recorded. This may include my voice and video if enabled.",
+      "invite_to_meeting": "{{ name }} invites you to join a meeting.",
+      "join_by_url": "Join room by URL",
+      "alternative_options": "Alternative options to join",
+      "download_ics": "Download .ics calender file",
+      "share_meeting": "Share Room",
+      "join_by_phone": "Connect via telephone dial-up",
+      "location": "Video conference - Further details are provided below"
     },
     "presentation": {
       "presentation": "Presentation",
@@ -412,6 +420,8 @@
         "access_code_generated": "A new access code has been generated.",
         "access_code_deleted": "The access code has been deleted.",
         "copied_meeting_url": "The meeting URL has been copied. The link can be used to join the meeting.",
+        "download_ics": "The .ics file has been created. Open it to edit and send it, to invite people to your Meeting.",
+        "copied_voice_bridge": "The phone number and pin have been copied. They can be used to join the conference.",
         "copied_viewer_code": "The viewer access code has been copied.",
         "copied_moderator_code": "The moderator access code has been copied."
       },

app/controllers/api/v1/env_controller.rb

@@ -29,7 +29,8 @@ def index
           HCAPTCHA_KEY: ENV.fetch('HCAPTCHA_SITE_KEY', nil),
           VERSION_TAG: ENV.fetch('VERSION_TAG', ''),
           CURRENT_PROVIDER: current_provider,
-          SMTP_ENABLED: ENV.fetch('SMTP_SERVER', nil)
+          SMTP_ENABLED: ENV.fetch('SMTP_SERVER', nil),
+          ICS_USE_HTML: ENV.fetch('ICS_USE_HTML', false)
         }, status: :ok
       end
     end

app/javascript/components/rooms/RoomCard.jsx

@@ -18,15 +18,17 @@ import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button, Card, Stack } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-import { DocumentDuplicateIcon, LinkIcon } from '@heroicons/react/24/outline';
-import { toast } from 'react-toastify';
+import { ShareIcon, LinkIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../contexts/auth/AuthProvider';
 import { localizeDateTimeString } from '../../helpers/DateTimeHelper';
 import Spinner from '../shared_components/utilities/Spinner';
 import useStartMeeting from '../../hooks/mutations/rooms/useStartMeeting';
 import MeetingBadges from './MeetingBadges';
 import UserBoardIcon from './UserBoardIcon';
+import Modal from '../shared_components/modals/Modal';
+import ShareRoomForm from './room/forms/ShareRoomForm';
+import useRoomSettings from '../../hooks/queries/rooms/useRoomSettings';
 
 export default function RoomCard({ room }) {
   const { t } = useTranslation();
@@ -35,47 +37,50 @@ export default function RoomCard({ room }) {
   const startMeeting = useStartMeeting(room.friendly_id);
   const currentUser = useAuth();
   const localizedTime = localizeDateTimeString(room?.last_session, currentUser?.language);
-
-  function copyInvite(friendlyId) {
-    navigator.clipboard.writeText(`${window.location}/${friendlyId}/join`);
-    toast.success(t('toast.success.room.copied_meeting_url'));
-  }
+  const roomSettings = useRoomSettings(room.friendly_id);
 
   return (
     <Card id="room-card" className="h-100 card-shadow border-0">
       <Card.Body className="pb-0" onClick={handleClick}>
         <Stack direction="horizontal">
           <div className="room-icon rounded">
-            { room?.shared_owner
+            {room?.shared_owner
               ? <LinkIcon className="hi-m text-brand pt-4 d-block mx-auto" />
               : <UserBoardIcon className="hi-m text-brand pt-4 d-block mx-auto" />}
           </div>
-          { room?.online
+          {room?.online
             && <MeetingBadges count={room?.participants} />}
         </Stack>
 
         <Stack className="my-4">
-          <Card.Title className="mb-0"> { room.name } </Card.Title>
-          { room.shared_owner && (
-            <span className="text-muted">{ t('room.shared_by') } {' '} <strong>{ room.shared_owner }</strong></span>
+          <Card.Title className="mb-0"> {room.name} </Card.Title>
+          {room.shared_owner && (
+            <span className="text-muted">{t('room.shared_by')} {' '} <strong>{room.shared_owner}</strong></span>
           )}
-          { room.last_session ? (
-            <span className="text-muted"> { t('room.last_session', { localizedTime }) } </span>
+          {room.last_session ? (
+            <span className="text-muted"> {t('room.last_session', { localizedTime })} </span>
           ) : (
-            <span className="text-muted mt-2"> { t('room.no_last_session') } </span>
+            <span className="text-muted mt-2"> {t('room.no_last_session')} </span>
           )}
         </Stack>
       </Card.Body>
       <Card.Footer className="bg-white">
-        <Button
-          variant="icon"
-          onClick={() => copyInvite(room.friendly_id)}
-        >
-          <DocumentDuplicateIcon className="hi-m mt-1 text-muted" />
-        </Button>
+        <Modal
+          size="lg"
+          modalButton={(
+            <Button
+              variant="icon"
+            >
+              <ShareIcon className="hi-m mt-1 text-muted" />
+            </Button>
+          )}
+          title={t('room.meeting.share_meeting')}
+          body={<ShareRoomForm room={room} friendly_id={room.friendly_id} roomSettings={roomSettings} />}
+        />
+
         <Button variant="brand-outline" className="btn btn-md float-end" onClick={startMeeting.mutate} disabled={startMeeting.isLoading}>
           {startMeeting.isLoading && <Spinner className="me-2" />}
-          { room.online ? (
+          {room.online ? (
             t('join')
           ) : (
             t('start')
@@ -86,12 +91,6 @@ export default function RoomCard({ room }) {
   );
 }
 
-RoomCard.defaulProps = {
-  room: PropTypes.shape({
-    last_session: '',
-  }),
-};
-
 RoomCard.propTypes = {
   room: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -101,5 +100,7 @@ RoomCard.propTypes = {
     shared_owner: PropTypes.string,
     online: PropTypes.bool,
     participants: PropTypes.number,
+    voice_bridge: PropTypes.string,
+    voice_bridge_phone_number: PropTypes.string,
   }).isRequired,
 };

app/javascript/components/rooms/room/Room.jsx

@@ -16,11 +16,10 @@
 
 import React from 'react';
 import {
-  Stack, Button, Col, Row, Dropdown,
+  Stack, Button, Col, Row,
 } from 'react-bootstrap';
 import { Link, useParams } from 'react-router-dom';
-import { HomeIcon, Square2StackIcon } from '@heroicons/react/24/outline';
-import { toast } from 'react-toastify';
+import { HomeIcon, ShareIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../../contexts/auth/AuthProvider';
 import { localizeDayDateTimeString } from '../../../helpers/DateTimeHelper';
@@ -31,6 +30,8 @@ import useStartMeeting from '../../../hooks/mutations/rooms/useStartMeeting';
 import MeetingBadges from '../MeetingBadges';
 import SharedBadge from './SharedBadge';
 import RoomNamePlaceHolder from './RoomNamePlaceHolder';
+import Modal from '../../shared_components/modals/Modal';
+import ShareRoomForm from './forms/ShareRoomForm';
 import Title from '../../shared_components/utilities/Title';
 import useRoomSettings from '../../../hooks/queries/rooms/useRoomSettings';
 
@@ -45,19 +46,6 @@ export default function Room() {
   const localizedTime = localizeDayDateTimeString(room?.last_session, currentUser?.language);
   const roomSettings = useRoomSettings(friendlyId);
 
-  function copyInvite(role) {
-    if (role === 'viewer') {
-      navigator.clipboard.writeText(roomSettings?.data?.glViewerAccessCode);
-      toast.success(t('toast.success.room.copied_viewer_code'));
-    } else if (role === 'moderator') {
-      navigator.clipboard.writeText(roomSettings?.data?.glModeratorAccessCode);
-      toast.success(t('toast.success.room.copied_moderator_code'));
-    } else {
-      navigator.clipboard.writeText(`${window.location}/join`);
-      toast.success(t('toast.success.room.copied_meeting_url'));
-    }
-  }
-
   return (
     <>
       <Title>{room?.name}</Title>
@@ -72,27 +60,27 @@ export default function Room() {
         <Row className="py-5">
           <Col className="col-4">
             {
-                isRoomLoading
-                  ? (
-                    <RoomNamePlaceHolder />
-                  ) : (
-                    <Stack className="room-header-wrapper">
-                      <Stack direction="horizontal" gap={2}>
-                        <h1>{room?.name}</h1>
-                        <Stack direction="horizontal" className="mb-1">
-                          { room?.online
-                            && <MeetingBadges count={room?.participants} />}
-                          { room?.shared && <SharedBadge ownerName={room?.owner_name} /> }
-                        </Stack>
+              isRoomLoading
+                ? (
+                  <RoomNamePlaceHolder />
+                ) : (
+                  <Stack className="room-header-wrapper">
+                    <Stack direction="horizontal" gap={2}>
+                      <h1>{room?.name}</h1>
+                      <Stack direction="horizontal" className="mb-1">
+                        {room?.online
+                          && <MeetingBadges count={room?.participants} />}
+                        {room?.shared && <SharedBadge ownerName={room?.owner_name} />}
                       </Stack>
-                      { room?.last_session ? (
-                        <span className="text-muted"> { t('room.last_session', { localizedTime }) }  </span>
-                      ) : (
-                        <span className="text-muted"> { t('room.no_last_session') } </span>
-                      )}
                     </Stack>
-                  )
-              }
+                    {room?.last_session ? (
+                      <span className="text-muted"> {t('room.last_session', { localizedTime })}  </span>
+                    ) : (
+                      <span className="text-muted"> {t('room.no_last_session')} </span>
+                    )}
+                  </Stack>
+                )
+            }
           </Col>
           <Col>
             <Row>
@@ -104,39 +92,27 @@ export default function Room() {
                   disabled={startMeeting.isLoading}
                 >
                   {startMeeting.isLoading && <Spinner className="me-2" />}
-                  { room?.online ? (
+                  {room?.online ? (
                     t('room.meeting.join_meeting')
                   ) : (
                     t('room.meeting.start_meeting')
                   )}
                 </Button>
-
-                <Dropdown className="btn-group mt-1 mx-2 float-end pb-5">
-                  <Button variant="brand-outline" type="button" className="btn dropdown-main" onClick={() => copyInvite()}>
-                    <Square2StackIcon className="hi-s me-1" />
-                    { t('copy') }
-                  </Button>
-                  { (roomSettings?.data?.glModeratorAccessCode || roomSettings?.data?.glViewerAccessCode) && (
-                    <Dropdown.Toggle
+                <Modal
+                  size="lg"
+                  modalButton={(
+                    <Button
                       variant="brand-outline"
-                      className="btn dropdown-toggle dropdown-toggle-split"
-                      id="dropdown-toggle"
-                    />
+                      className="mt-1 mx-2 float-end"
+                      type="button"
+                    >
+                      <ShareIcon className="hi-s me-1" />
+                      {t('room.meeting.share_meeting')}
+                    </Button>
                   )}
-
-                  <Dropdown.Menu className="dropdown-menu">
-                    { roomSettings?.data?.glModeratorAccessCode && (
-                      <Dropdown.Item onClick={() => copyInvite('moderator')}>
-                        { t('copy_moderator_code') }
-                      </Dropdown.Item>
-                    )}
-                    { roomSettings?.data?.glViewerAccessCode && (
-                      <Dropdown.Item onClick={() => copyInvite('viewer')}>
-                        { t('copy_viewer_code') }
-                      </Dropdown.Item>
-                    )}
-                  </Dropdown.Menu>
-                </Dropdown>
+                  title={t('room.meeting.share_meeting')}
+                  body={<ShareRoomForm room={room} roomSettings={roomSettings} />}
+                />
               </Col>
             </Row>
           </Col>