Media: Fix broken video muting (#12042)

packages/media/src/fetchRemoteFile.js

@@ -20,14 +20,11 @@
 import getFileNameFromUrl from './getFileNameFromUrl';
 import fetchRemoteBlob from './fetchRemoteBlob';
 import blobToFile from './blobToFile';
+import getFileBasename from './getFileBasename';
 
 function generateFileName(url) {
   const currentFileName = getFileNameFromUrl(url);
-  const currentFileExt = currentFileName
-    .split(/[#?]/)[0]
-    .split('.')
-    .pop()
-    .trim();
+  const currentFileExt = getFileBasename({ name: currentFileName });
 
   return currentFileName.replace(
     `.${currentFileExt}`,

packages/media/src/getFileName.js → packages/media/src/getFileBasename.js

@@ -21,7 +21,8 @@
  * @param {string} file.name File name.
  * @return {string} File name without extension.
  */
-const getFileName = ({ name = '' }) =>
-  name.includes('.') ? name.split('.').slice(0, -1).join('.') : name;
+function getFileBasename({ name = '' }) {
+  return name.includes('.') ? name.split('.').slice(0, -1).join('.') : name;
+}
 
-export default getFileName;
+export default getFileBasename;

packages/media/src/getFileNameFromUrl.js

@@ -13,7 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const getFileNameFromUrl = (url) =>
-  url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
+
+/**
+ * Returns the file name including extension from a URL.
+ *
+ * @param {string} url File URL.
+ * @return {string} File name.
+ */
+function getFileNameFromUrl(url) {
+  return url.split('/').at(-1).split(/[#?]/).at(0);
+}
 
 export default getFileNameFromUrl;

packages/media/src/index.js

@@ -16,23 +16,20 @@
 
 export * from './blob';
 export * from './types';
+export * from './mimeTypes';
 
 export { default as calculateSrcSet } from './calculateSrcSet';
 export { default as createResource } from './createResource';
-export { default as getFileName } from './getFileName';
-export { default as formatDuration } from './formatDuration';
+export { default as getFileBasename } from './getFileBasename';
 export { default as createFileReader } from './createFileReader';
 export { default as fetchRemoteFile } from './fetchRemoteFile';
 export { default as fetchRemoteBlob } from './fetchRemoteBlob';
 export { default as formatMsToHMS } from './formatMsToHMS';
 export { default as generateVideoStrip } from './generateVideoStrip';
 export { default as getFileNameFromUrl } from './getFileNameFromUrl';
-export { default as getFileNameWithExt } from './getFileNameWithExt';
-export * from './mimeTypes';
 export { default as getFirstFrameOfVideo } from './getFirstFrameOfVideo';
 export { default as getImageDimensions } from './getImageDimensions';
 export { default as getMsFromHMS } from './getMsFromHMS';
-export { default as getVideoDimensions } from './getVideoDimensions';
 export { default as getVideoLength } from './getVideoLength';
 export { default as getVideoLengthDisplay } from './getVideoLengthDisplay';
 export { default as getResourceSize } from './getResourceSize';
@@ -47,6 +44,5 @@ export { default as seekVideo } from './seekVideo';
 export { default as resourceList } from './resourceList';
 export { default as isAnimatedGif } from './isAnimatedGif';
 export { default as hasVideoGotAudio } from './hasVideoGotAudio';
-export { default as getCanvasBlob } from './getCanvasBlob';
 export { default as getImageFromVideo } from './getImageFromVideo';
 export { default as blobToFile } from './blobToFile';

packages/media/src/test/getFileName.js → packages/media/src/test/getFileBasename.js

@@ -17,26 +17,26 @@
 /**
  * Internal dependencies
  */
-import getFileName from '../getFileName';
+import getFileBasename from '../getFileBasename';
 
 describe('getFileName', () => {
   it('should remove the file extension', () => {
-    expect(getFileName({ name: 'my-video.mp4' })).toBe('my-video');
+    expect(getFileBasename({ name: 'my-video.mp4' })).toBe('my-video');
   });
 
   it('should remove the file extension with period in name', () => {
-    expect(getFileName({ name: 'my.video.mp4' })).toBe('my.video');
+    expect(getFileBasename({ name: 'my.video.mp4' })).toBe('my.video');
   });
 
   it('should support files without extension', () => {
-    expect(getFileName({ name: 'my-video' })).toBe('my-video');
+    expect(getFileBasename({ name: 'my-video' })).toBe('my-video');
   });
 
   it('should return an empty string if missing name', () => {
-    expect(getFileName({ name: '' })).toBe('');
+    expect(getFileBasename({ name: '' })).toBe('');
   });
 
   it('should default to an empty name', () => {
-    expect(getFileName({})).toBe('');
+    expect(getFileBasename({})).toBe('');
   });
 });

packages/story-editor/src/app/media/utils/getResourceFromLocalFile.js

@@ -22,7 +22,7 @@ import {
   getTypeFromMime,
   getResourceSize,
   createResource,
-  getFileName,
+  getFileBasename,
   getImageDimensions,
   createFileReader,
   getVideoLength,
@@ -47,7 +47,7 @@ import getPosterName from './getPosterName';
  * @return {Promise<import('@googleforcreators/media').Resource>} Local image resource object.
  */
 const getImageResource = async (file) => {
-  const alt = getFileName(file);
+  const alt = getFileBasename(file);
   const mimeType = file.type;
 
   const reader = await createFileReader(file);
@@ -71,7 +71,7 @@ const getImageResource = async (file) => {
  * @return {Promise<import('@googleforcreators/media').Resource>} Local video resource object.
  */
 const getVideoResource = async (file) => {
-  const alt = getFileName(file);
+  const alt = getFileBasename(file);
   const mimeType = file.type;
 
   const reader = await createFileReader(file);
@@ -90,7 +90,7 @@ const getVideoResource = async (file) => {
   const hasAudio = hasVideoGotAudio(videoEl);
   const posterFile = blobToFile(
     await getImageFromVideo(videoEl),
-    getPosterName(getFileName(file)),
+    getPosterName(getFileBasename(file)),
     MEDIA_POSTER_IMAGE_MIME_TYPE
   );
   const poster = createBlob(posterFile);
@@ -116,7 +116,7 @@ const createPlaceholderResource = (properties) => {
 };
 
 const getPlaceholderResource = (file) => {
-  const alt = getFileName(file);
+  const alt = getFileBasename(file);
   const type = getTypeFromMime(file.type);
   const mimeType = type === 'image' ? 'image/png' : 'video/mp4';
 

packages/story-editor/src/app/media/utils/useFFmpeg.js

@@ -22,7 +22,7 @@ import { useCallback, useMemo } from '@googleforcreators/react';
 import { getTimeTracker, trackError } from '@googleforcreators/tracking';
 import {
   getExtensionFromMimeType,
-  getFileName,
+  getFileBasename,
   blobToFile,
 } from '@googleforcreators/media';
 
@@ -183,7 +183,7 @@ function useFFmpeg() {
         ffmpeg = await getFFmpegInstance(file);
 
         const tempFileName = uuidv4() + '.' + MEDIA_POSTER_IMAGE_FILE_TYPE;
-        const originalFileName = getFileName(file);
+        const originalFileName = getFileBasename(file);
         const outputFileName = getPosterName(originalFileName);
 
         await ffmpeg.run(
@@ -244,7 +244,7 @@ function useFFmpeg() {
 
         const tempFileName = uuidv4() + '.' + MEDIA_TRANSCODED_FILE_TYPE;
         const outputFileName =
-          getFileName(file) + '.' + MEDIA_TRANSCODED_FILE_TYPE;
+          getFileBasename(file) + '.' + MEDIA_TRANSCODED_FILE_TYPE;
 
         await ffmpeg.run(
           // Input filename.
@@ -303,7 +303,7 @@ function useFFmpeg() {
         const type = file?.type || MEDIA_TRANSCODED_MIME_TYPE;
         const ext = getExtensionFromMimeType(type);
         const tempFileName = uuidv4() + '.' + ext;
-        const outputFileName = getFileName(file) + '-trimmed.' + ext;
+        const outputFileName = getFileBasename(file) + '-trimmed.' + ext;
 
         await ffmpeg.run(
           // Input filename.
@@ -361,7 +361,7 @@ function useFFmpeg() {
         const type = file?.type || MEDIA_TRANSCODED_MIME_TYPE;
         const ext = getExtensionFromMimeType(type);
         const tempFileName = uuidv4() + '.' + ext;
-        const outputFileName = getFileName(file) + '-muted.' + ext;
+        const outputFileName = getFileBasename(file) + '-muted.' + ext;
 
         await ffmpeg.run(
           // Input filename.
@@ -420,7 +420,7 @@ function useFFmpeg() {
 
         const tempFileName = uuidv4() + '.' + MEDIA_TRANSCODED_FILE_TYPE;
         const outputFileName =
-          getFileName(file) + '.' + MEDIA_TRANSCODED_FILE_TYPE;
+          getFileBasename(file) + '.' + MEDIA_TRANSCODED_FILE_TYPE;
 
         await ffmpeg.run(
           // Input filename.
@@ -474,7 +474,7 @@ function useFFmpeg() {
         ffmpeg = await getFFmpegInstance(file);
 
         const tempFileName = uuidv4() + '.mp3';
-        const outputFileName = getFileName(file) + '.mp3';
+        const outputFileName = getFileBasename(file) + '.mp3';
 
         await ffmpeg.run(
           // Input filename.

packages/story-editor/src/app/media/utils/useMediaUploadQueue/index.js

@@ -31,7 +31,7 @@ import {
 } from '@googleforcreators/tracking';
 import {
   createBlob,
-  getFileName,
+  getFileBasename,
   getImageDimensions,
 } from '@googleforcreators/media';
 
@@ -358,7 +358,7 @@ function useMediaUploadQueue() {
       }
 
       try {
-        const posterFileName = getFileName(posterFile);
+        const posterFileName = getFileBasename(posterFile);
         const { poster, posterId } = await uploadVideoPoster(
           newResource.id,
           posterFileName,

packages/story-editor/src/app/media/utils/useUploadVideoFrame.js

@@ -23,6 +23,7 @@ import {
   preloadImage,
   getFirstFrameOfVideo,
   getFileNameFromUrl,
+  getFileBasename,
 } from '@googleforcreators/media';
 /**
  * Internal dependencies
@@ -116,7 +117,9 @@ function useUploadVideoFrame({ updateMediaElement }) {
       const trackTiming = getTimeTracker('load_video_poster');
       try {
         const originalFileName = getFileNameFromUrl(src);
-        const fileName = getPosterName(originalFileName);
+        const fileName = getPosterName(
+          getFileBasename({ name: originalFileName })
+        );
         const obj = await getFirstFrameOfVideo(src);
         const { posterId, poster, posterWidth, posterHeight } =
           await uploadVideoPoster(id, fileName, obj);

packages/story-editor/src/app/uploader/useUploader.js

@@ -20,7 +20,7 @@
 import { useCallback, useMemo } from '@googleforcreators/react';
 import { __, sprintf, translateToExclusiveList } from '@googleforcreators/i18n';
 import {
-  getFileName,
+  getFileBasename,
   getExtensionsFromMimeType,
 } from '@googleforcreators/media';
 
@@ -164,7 +164,7 @@ function useUploader() {
 
       const _additionalData = {
         storyId,
-        altText: getFileName(file),
+        altText: getFileBasename(file),
         mediaSource: 'editor',
         ...additionalData,
       };