PublishVideo.tsx Updates

Removed warning on publishing videos in wrong format

Videos can't publish an MKV file or HEVC encoding

Added function to get file extension from a file

filename attribute of video is the name of the file

package-lock.json

@@ -22,7 +22,7 @@
         "localforage": "^1.10.0",
         "mediainfo.js": "^0.3.5",
         "moment": "^2.30.1",
-        "qapp-core": "^1.0.47",
+        "qapp-core": "^1.0.48",
         "quill": "^2.0.2",
         "quill-image-resize-module-react": "^3.0.0",
         "react": "^19.0.0",
@@ -5104,9 +5104,9 @@
       }
     },
     "node_modules/qapp-core": {
-      "version": "1.0.47",
-      "resolved": "https://registry.npmjs.org/qapp-core/-/qapp-core-1.0.47.tgz",
-      "integrity": "sha512-VWSBgOqCb3J8hx7YRe/3PHo6AXddU7UqskZE8/38M7b4CuKGL62+qUJGZ0iWFNDuRfTO/Ml5e5WIPTv40RDnBQ==",
+      "version": "1.0.48",
+      "resolved": "https://registry.npmjs.org/qapp-core/-/qapp-core-1.0.48.tgz",
+      "integrity": "sha512-tJaycgcAKhKv4QHHlKR8ZLwb5uIZdJXIusQ/hauP6SAxDqzgcSzhuIQ2v7qkNGyXl3wRPFzSJ6ZJXp9N3Imwkg==",
       "license": "MIT",
       "dependencies": {
         "@tanstack/react-virtual": "^3.13.2",

src/components/Publish/EditVideo/EditVideo.tsx

@@ -24,6 +24,10 @@ import {
 
 import BoundedNumericTextField from '../../../utils/BoundedNumericTextField.tsx';
 import { objectToBase64 } from '../../../utils/PublishFormatter.ts';
+import {
+  getFileExtension,
+  getFileExtensionIndex,
+} from '../../../utils/stringFunctions.ts';
 import { FrameExtractor } from '../../common/FrameExtractor/FrameExtractor.tsx';
 import ImageUploader from '../../common/ImageUploader.tsx';
 import { TextEditor } from '../../common/TextEditor/TextEditor.tsx';
@@ -42,14 +46,14 @@ import {
   NewCrowdfundTitle,
   TimesIcon,
 } from './EditVideo-styles.tsx';
-import { useAuth, useGlobal, usePublish } from 'qapp-core';
+import { showError, useAuth, useGlobal, usePublish } from 'qapp-core';
 import { useAtom, useSetAtom } from 'jotai';
 import {
   AltertObject,
   setNotificationAtom,
 } from '../../../state/global/notifications.ts';
 import { editVideoAtom } from '../../../state/publish/video.ts';
-
+import { useMediaInfo } from '../../../hooks/useMediaInfo.tsx';
 export const EditVideo = () => {
   const theme = useTheme();
   const setNotification = useSetAtom(setNotificationAtom);
@@ -72,6 +76,7 @@ export const EditVideo = () => {
   const [videoDurations, setVideoDurations] = useState<number[]>([
     editVideoProperties?.duration || 0,
   ]);
+  const { isHEVC } = useMediaInfo();
 
   useEffect(() => {
     if (editVideoProperties?.duration) {
@@ -85,10 +90,22 @@ export const EditVideo = () => {
     },
     maxFiles: 1,
     maxSize,
-    onDrop: (acceptedFiles, rejectedFiles) => {
+    onDrop: async (acceptedFiles, rejectedFiles) => {
       const firstFile = acceptedFiles[0];
 
-      setFile(firstFile);
+      const notSupportedCodec = await isHEVC(firstFile);
+
+      const isMKV = getFileExtension(firstFile) === 'mkv';
+      const isUnsupportedFile = notSupportedCodec || isMKV;
+
+      if (isUnsupportedFile) {
+        if (notSupportedCodec)
+          showError(`${firstFile.name} uses the unsupported encoding: HEVC`);
+        if (isMKV)
+          showError(
+            `${firstFile.name} uses the unsupported file container: MKV`
+          );
+      } else setFile(firstFile);
 
       let errorString: null | string = null;
 
@@ -249,7 +266,7 @@ export const EditVideo = () => {
           description: metadescription,
           identifier: editVideoProperties.videoReference?.identifier,
           tag1: QTUBE_VIDEO_BASE,
-          filename: `${alphanumericString.trim()}.${fileExtension}`,
+          filename: file.name,
         };
         listOfPublishes.push(requestBodyVideo);
       }

src/components/Publish/PublishVideo/PublishVideo.tsx

@@ -37,7 +37,11 @@ import {
   FiltersSubContainer,
 } from '../../../pages/Home/Components/VideoList-styles.tsx';
 
-import { getFileName } from '../../../utils/stringFunctions.ts';
+import {
+  getFileExtension,
+  getFileExtensionIndex,
+  getFileName,
+} from '../../../utils/stringFunctions.ts';
 import { CardContentContainerComment } from '../../common/Comments/Comments-styles.tsx';
 import { FrameExtractor } from '../../common/FrameExtractor/FrameExtractor.tsx';
 
@@ -64,7 +68,13 @@ import {
   TimesIcon,
 } from './PublishVideo-styles.tsx';
 import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
-import { objectToBase64, useAuth, useGlobal, usePublish } from 'qapp-core';
+import {
+  objectToBase64,
+  showError,
+  useAuth,
+  useGlobal,
+  usePublish,
+} from 'qapp-core';
 import { useSetAtom } from 'jotai';
 import {
   AltertObject,
@@ -165,8 +175,7 @@ export const PublishVideo = ({
     },
     maxSize,
     onDrop: async (acceptedFiles, rejectedFiles) => {
-      const unsupportedFiles = [];
-      const formattedFiles = [];
+      const formattedFiles: VideoFile[] = [];
 
       for (const file of acceptedFiles) {
         let filteredTitle = '';
@@ -177,8 +186,15 @@ export const PublishVideo = ({
         }
 
         const notSupportedCodec = await isHEVC(file);
-        if (notSupportedCodec) {
-          unsupportedFiles.push(file);
+
+        const isMKV = getFileExtension(file) === 'mkv';
+        const isUnsupportedFile = notSupportedCodec || isMKV;
+
+        if (isUnsupportedFile) {
+          if (notSupportedCodec)
+            showError(`${file.name} uses the unsupported encoding: HEVC`);
+          if (isMKV)
+            showError(`${file.name} uses the unsupported file container: MKV`);
           continue;
         }
         formattedFiles.push({
@@ -360,7 +376,7 @@ export const PublishVideo = ({
           title: title.slice(0, 50),
           description: metadescription,
           identifier,
-          filename: `${alphanumericString.trim()}.${fileExtension}`,
+          filename: file.name,
           tag1: QTUBE_VIDEO_BASE,
         };
         listOfPublishes.push(requestBodyJson);
@@ -802,11 +818,6 @@ export const PublishVideo = ({
                   : <span style={{ fontWeight: 'bold' }}>AV1</span>, VP8, VP9,
                   H.264
                 </CodecTypography>
-                <CodecTypography sx={{ fontWeight: '800', color: 'red' }}>
-                  {t('core:publish.unsupported_codecs_description', {
-                    postProcess: 'capitalizeEachFirstChar',
-                  })}
-                </CodecTypography>
               </Box>
 
               <Box
@@ -1378,7 +1389,8 @@ export const PublishVideo = ({
                 <CrowdfundActionButton
                   variant="contained"
                   disabled={
-                    files?.length !== Object.keys(imageExtracts)?.length
+                    files?.length !== Object.keys(imageExtracts)?.length ||
+                    files?.length === 0
                   }
                   onClick={() => {
                     next();

src/i18n/locales/en/core.json

@@ -34,7 +34,6 @@
     "supported_containers": "Supported File Containers",
     "audio_codecs": "audio codecs",
     "video_codecs": "video codecs",
-    "unsupported_codecs_description": "Using unsupported Codecs may result in video or audio not working properly",
     "select_category": "Select a Category",
     "select_subcategory": "Select a Sub-Category",
     "add_cover_image": "add cover image",

src/utils/stringFunctions.ts

@@ -1,8 +1,13 @@
 export const getFileExtensionIndex = (s: string) => {
-  const lastIndex = s.lastIndexOf(".");
+  const lastIndex = s.lastIndexOf('.');
   return lastIndex > 0 ? lastIndex : s.length - 1;
 };
 
+export const getFileExtension = (file: File) => {
+  const index = getFileExtensionIndex(file.name) + 1;
+  return file.name.toLowerCase().trim().substring(index);
+};
+
 export const getFileName = (s: string) => {
   return s.substring(0, getFileExtensionIndex(s));
 };