import { v4 as uuidv4 } from 'uuid'; import { IStore } from '../app/types'; import { getCurrentConference } from '../base/conference/functions'; import { JitsiConferenceEvents } from '../base/lib-jitsi-meet'; import { getLocalParticipant, getParticipantDisplayName } from '../base/participants/functions'; import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; import StateListenerRegistry from '../base/redux/StateListenerRegistry'; import { showErrorNotification, showNotification, showSuccessNotification } from '../notifications/actions'; import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../notifications/constants'; import { DOWNLOAD_FILE, REMOVE_FILE, UPLOAD_FILES, _FILE_LIST_RECEIVED, _FILE_REMOVED } from './actionTypes'; import { addFile, removeFile, updateFileProgress } from './actions'; import { getFileExtension } from './functions.any'; import logger from './logger'; import { IFileMetadata } from './types'; import { downloadFile } from './utils'; /** * Registers a change handler for state['features/base/conference'].conference to * set the event listeners needed for the file sharing feature to operate. */ StateListenerRegistry.register( state => state['features/base/conference'].conference, (conference, { dispatch }, previousConference) => { if (conference && !previousConference) { conference.on(JitsiConferenceEvents.FILE_SHARING_FILE_ADDED, (file: IFileMetadata) => { dispatch(addFile(file)); }); conference.on(JitsiConferenceEvents.FILE_SHARING_FILE_REMOVED, (fileId: string) => { dispatch({ type: _FILE_REMOVED, fileId }); }); conference.on(JitsiConferenceEvents.FILE_SHARING_FILES_RECEIVED, (files: object) => { dispatch({ type: _FILE_LIST_RECEIVED, files }); }); } }); /** * Middleware that handles file sharing actions. * * @param {Store} store - The redux store. * @returns {Function} */ MiddlewareRegistry.register(store => next => action => { switch (action.type) { case UPLOAD_FILES: { const state = store.getState(); const conference = getCurrentConference(state); conference?.getShortTermCredentials(conference?.getFileSharing()?.getIdentityType()).then((token: string) => { for (const file of action.files) { uploadFile(file, store, token); } }); return next(action); } case REMOVE_FILE: { const state = store.getState(); const conference = getCurrentConference(state); const { files } = state['features/file-sharing']; const fileId = action.fileId; const existingMetadata = files.get(fileId); // ignore remove a file till the file is actually uploaded if (!conference || (existingMetadata?.progress ?? 100) !== 100) { return next(action); } // First, remove the file metadata so others won't attempt to download it anymore. conference.getFileSharing().removeFile(fileId); // remove it from local state store.dispatch({ type: _FILE_REMOVED, fileId }); const { fileSharing } = state['features/base/config']; const sessionId = conference.getMeetingUniqueId(); // Now delete it from the server. conference.getShortTermCredentials(conference.getFileSharing().getIdentityType()) .then((token: string) => fetch(`${fileSharing!.apiUrl!}/sessions/${sessionId}/files/${fileId}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${token}` } })) .then((response: { ok: any; statusText: any; }) => { if (!response.ok) { throw new Error(`Failed to delete file: ${response.statusText}`); } store.dispatch(showSuccessNotification({ titleKey: 'fileSharing.removeFileSuccess' }, NOTIFICATION_TIMEOUT_TYPE.SHORT)); }) .catch((error: any) => { logger.warn('Could not delete file:', error); }); return next(action); } case DOWNLOAD_FILE: { const state = store.getState(); const { fileSharing } = state['features/base/config']; const conference = getCurrentConference(state); const sessionId = conference?.getMeetingUniqueId(); conference?.getShortTermCredentials(conference?.getFileSharing()?.getIdentityType()) .then((token: string) => fetch(`${fileSharing!.apiUrl!}/sessions/${sessionId}/files/${action.fileId}`, { method: 'GET', headers: { 'Authorization': `Bearer ${token}` } })) .then((response: any) => response.json()) .then((data: { fileName: string; presignedUrl: string; }) => { const { presignedUrl, fileName } = data; if (!presignedUrl) { throw new Error('No presigned URL found in the response.'); } store.dispatch(showNotification({ titleKey: 'fileSharing.downloadStarted' }, NOTIFICATION_TIMEOUT_TYPE.SHORT)); return downloadFile(presignedUrl, fileName); }) .catch((error: any) => { logger.warn('Could not download file:', error); store.dispatch(showErrorNotification({ titleKey: 'fileSharing.downloadFailedTitle', descriptionKey: 'fileSharing.downloadFailedDescription', appearance: NOTIFICATION_TYPE.ERROR }, NOTIFICATION_TIMEOUT_TYPE.STICKY)); }); return next(action); } } return next(action); }); /** * Uploads a file to the server. * * @param {File} file - The file to upload. * @param {IStore} store - The redux store. * @param {string} token - The token to use for requests. * @returns {void} */ function uploadFile(file: File, store: IStore, token: string): void { const state = store.getState(); const conference = getCurrentConference(state); const sessionId = conference?.getMeetingUniqueId(); const localParticipant = getLocalParticipant(state); const { fileSharing } = state['features/base/config']; const { connection } = state['features/base/connection']; const roomJid = conference?.room?.roomjid; const jid = connection!.getJid(); const fileId = uuidv4(); const fileMetadata: IFileMetadata = { authorParticipantId: localParticipant!.id, authorParticipantJid: jid, authorParticipantName: getParticipantDisplayName(state, localParticipant!.id), conferenceFullName: roomJid ?? '', fileId, fileName: file.name, fileSize: file.size, fileType: getFileExtension(file.name), timestamp: Date.now() }; store.dispatch(addFile(fileMetadata)); store.dispatch(updateFileProgress(fileId, 1)); // Upload file. const formData = new FormData(); formData.append('metadata', JSON.stringify(fileMetadata)); // @ts-ignore formData.append('file', file as Blob, file.name); // Use XMLHttpRequest to track upload const xhr = new XMLHttpRequest(); const handleError = () => { logger.warn('Could not upload file:', xhr.statusText); store.dispatch(removeFile(fileId)); store.dispatch(showErrorNotification({ titleKey: 'fileSharing.uploadFailedTitle', descriptionKey: 'fileSharing.uploadFailedDescription', appearance: NOTIFICATION_TYPE.ERROR }, NOTIFICATION_TIMEOUT_TYPE.STICKY)); }; xhr.open('POST', `${fileSharing!.apiUrl!}/sessions/${sessionId}/files`); xhr.responseType = 'json'; if (token) { xhr.setRequestHeader('Authorization', `Bearer ${token}`); } xhr.upload.onprogress = event => { if (event.lengthComputable) { // We use 99% as the max value to avoid showing 100% before the // upload is actually finished, that is, when the request is completed. const percent = Math.min((event.loaded / event.total) * 100, 99); store.dispatch(updateFileProgress(fileId, percent)); } }; xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { store.dispatch(updateFileProgress(fileId, 100)); const fileSharingHandler = conference?.getFileSharing(); fileSharingHandler.addFile(fileMetadata); store.dispatch(showSuccessNotification({ titleKey: 'fileSharing.fileUploadedSuccessfully' }, NOTIFICATION_TIMEOUT_TYPE.SHORT)); } else { handleError(); } }; xhr.onerror = handleError; xhr.send(formData); }