update configs

README.md

@@ -125,9 +125,11 @@ The Filerobot Image Editor is the easiest way to integrate an easy-to-use image
   <summary>Prerequisites Installation (Click to show)</summary>
 
 - react, react-dom, react-konva & styled-components:
+
 ```bash
 npm install --save react react-dom react-konva styled-components
 ```
+
 </details>
 
 <hr />
@@ -507,27 +509,31 @@ By default once the user makes any change/edit on the image and hasn't saved the
 
 If `true` Close button on the top right will be hidden and back button will be shown on the top left (with replacing positions of save & history buttons).
 
-#### `defaultSavedImageName`
+#### `defaultSavedMediaName`
+
+**PREVIOUSLY**: `defaultSavedImageName`
 
 <u>Type:</u> `string`
 
 <u>Supported version:</u> +v4.0.0
 
 <u>Default:</u> undefined
 
-The image file name used as default name for the image's file that will be saved if not provided the name will be extracted from provided image's src.
+The image file name used as default name for the media's file that will be saved if not provided the name will be extracted from provided media's src.
+
+#### `defaultSavedMediaType`
 
-#### `defaultSavedImageType`
+**PREVIOUSLY**: `defaultSavedImageType`
 
 <u>Type:</u> `string`
 
 <u>Supported version:</u> +v4.0.0
 
 <u>Default:</u> `png`
 
-Possible values: `'png' | 'jpeg' | 'jpg' | 'webp'`
+Possible values: `'png' | 'jpeg' | 'jpg' | 'webp' | 'mp4'`
 
-The default type used and selected in saving the image (the user has the possibility to change it from the saving modal).
+The default type used and selected in saving the media (the user has the possibility to change it from the saving modal).
 
 > NOTE: Quality modification will be applied to `jpeg`, `jpg` and `webp` types in returned [`base64`](#onsave) format only while saving the image by the default behavior.
 
@@ -835,7 +841,7 @@ The available options for arrow annotation tool in additon to the annotationsCom
 The available options for watermark tool, the watermark is using the options of text and image annotation tools mentioned above depending on the watermark chosen,
 
 | Property                        | Type                                                                                      | Default (possible values)              | Description                                                                                                                                                                                                                                                                                                                                    |
-| ------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | **`gallery`**                   | (string                                                                                   | { url: string, previewUrl: string })[] | []                                                                                                                                                                                                                                                                                                                                             | Watermark images urls which are considered to show a list of available watermarks to be used by the user directly from watermark tab |
 | **`textScalingRatio`**          | number                                                                                    | 0.33                                   | Ratio for text scaling                                                                                                                                                                                                                                                                                                                         |
 | **`imageScalingRatio`**         | number                                                                                    | 0.33                                   | Ratio for image scaling                                                                                                                                                                                                                                                                                                                        |
@@ -1154,35 +1160,46 @@ Hides all the UI of the plugin including (save & close buttons, tabs & tools bar
 
 > This prop might be useful if are using the editor in different ways in the same project, (ex. using the editor in doing different transformations for quick photo editing & using the editor after uploading some profile photo to crop the photo only and dismiss other transformations).
 
-#### `getCurrentImgDataFnRef`
+#### `getCurrentMediaDataFnRef`
+
+**PREVIOUSLY**: `getCurrentImgDataFnRef`
 
 <u>Type:</u> `React Ref | Object`
 
 <u>Supported version:</u> +v4.0.0
 
 <u>Default:</u> undefined
 
-If provided the canvas processing/saving/manipulating function will be assigned as `.current` property to this passed `Object | React Ref` to be used/called somewhere else other than the default save button and returns both the final transformed image data object & current design state which are same as params as [`onSave callback`](#onsave),
+If provided the canvas processing/saving/manipulating function will be assigned as `.current` property to this passed `Object | React Ref` to be used/called somewhere else other than the default save button and returns both the final transformed media data object & current design state which are same as params as [`onSave callback`](#onsave),
 
 The passed object/ref becomes with the following syntax after assigning internally
 
 ```js
 {
   current: (
-    imageFileInfo = {},
+    mediaFileInfo = {},
     pixelRatio = false,
     keepLoadingSpinnerShown = false,
-  ) => ({
-    imageData, // An object has the current image data & info
-    designState, // An object contains the current design state of the image's editor
-    hideLoadingSpinner, // A function hides the loading spinner on calling if not already hidden (useful in case you have provided `keepLoadingSpinnerShown` param with `true` and wants to hide the spinner after finishing some operation from ur side)
-  });
+  ) => {
+    // For images - returns object immediately
+    return {
+      data, // An object has the current image data & info
+      designState, // An object contains the current design state of the image editor
+      hideLoadingSpinner, // A function hides the loading spinner on calling if not already hidden
+    }
+
+    // For videos - returns Promise
+    return Promise<{
+      data, // An object has the current video data & info
+      designState, // An object contains the current design state of the video editor
+    }>;
+  }
 }
 ```
 
 The function has the following params:
 
-- _`imageFIleInfo`_: An object, defines the info of the file to be considered while saving, and contains the following properties:
+- _`mediaFileInfo`_: An object, defines the info of the file to be considered while saving, and contains the following properties:
   ```js
   {
     name,
@@ -1357,6 +1374,7 @@ Triggered once the user clicks either close/cancel button or back button, if not
 - _`haveNotSavedChanges`_: A boolean value, true means the user has clicked the close button before saving latest changes otherwise he closed after saving.
 
 #### `onBack`
+
 <!-- Speciailized for back button -->
 
 <hr />
@@ -1396,13 +1414,15 @@ Initializes/rerenders the plugin with the possibility to provide an additional c
 
 Unmounts the plugin's container from the page to be removed.
 
-#### `getCurrentImgData`
+#### `getCurrentMediaData`
+
+**PREVIOUSLY**: `getCurrentImgData`
 
-<u>Type:</u> `function getCurrentImgData (imageFileInfo, pixelRatio, keepLoadingSpinnerShown)`
+<u>Type:</u> `function getCurrentMediaData (mediaFileInfo, pixelRatio, keepLoadingSpinnerShown)`
 
 <u>Supported version:</u> +v4.0.0
 
-Calling the function will trigger the function responsible for handling/manipulating the current image operations and have the possible final results of the current image data besides the current design state, it's the bridge for the function mentioned here [`getCurrentImgDataFnRef`](#getcurrentimgdatafnref).
+Calling the function will trigger the function responsible for handling/manipulating the current media operations and have the possible final results of the current media data besides the current design state, it's the bridge for the function mentioned here [`getCurrentMediaDataFnRef`](#getcurrentmediadatafnref).
 
 <hr />
 

packages/filerobot-image-editor/src/index.js

@@ -10,7 +10,7 @@ class FilerobotImageEditor {
   static TABS = TABS;
   static TOOLS = TOOLS;
   #root;
-  #getCurrentImgDataFnRef;
+  #getCurrentMediaDataFnRef;
   #updateStateFnRef;
 
   constructor(container, config = {}) {
@@ -24,10 +24,10 @@ class FilerobotImageEditor {
     }
 
     this.#root = createRoot(this.container);
-    this.#getCurrentImgDataFnRef = {};
+    this.#getCurrentMediaDataFnRef = {};
     this.#updateStateFnRef = {};
 
-    this.getCurrentImgData = this.getCurrentImgData.bind(this);
+    this.getCurrentMediaData = this.getCurrentMediaData.bind(this);
     this.render = this.render.bind(this);
     this.terminate = this.terminate.bind(this);
     this.updateState = this.updateState.bind(this);
@@ -43,25 +43,26 @@ class FilerobotImageEditor {
 
     this.config = {
       ...this.config,
-      getCurrentImgDataFnRef: this.#getCurrentImgDataFnRef,
+      getCurrentMediaDataFnRef: this.#getCurrentMediaDataFnRef,
       updateStateFnRef: this.#updateStateFnRef,
     };
 
     if (!this.#root._internalRoot) {
       this.#root = createRoot(this.container);
     }
 
+
     this.#root.render(createElement(AssemblyPoint, this.config));
   }
 
   terminate() {
     this.#root.unmount();
   }
 
-  getCurrentImgData(imageFileInfo, pixelRatio, keepLoadingSpinnerShown) {
+  getCurrentMediaData(mediaFileInfo, pixelRatio, keepLoadingSpinnerShown) {
     return (
-      this.#getCurrentImgDataFnRef?.current?.(
-        imageFileInfo,
+      this.#getCurrentMediaDataFnRef?.current?.(
+        mediaFileInfo,
         pixelRatio,
         keepLoadingSpinnerShown,
       ) || {}

packages/react-filerobot-image-editor/src/components/VideoEditor/Controls/PlaybackSpeedMenu.jsx

@@ -5,13 +5,12 @@ import { MenuItem } from '@scaleflex/ui/core';
 /** Internal Dependencies */
 import { StyledMenu } from './Controls.styled';
 
-const PLAYBACK_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-
 const PlaybackSpeedMenu = ({
   value,
   anchor,
   onClose,
   getOnClickCbkFunction,
+  playbackSpeedMenuItems,
 }) => {
   return (
     <StyledMenu
@@ -23,7 +22,7 @@ const PlaybackSpeedMenu = ({
       position="top-end"
       $isOpen={Boolean(anchor)}
     >
-      {PLAYBACK_OPTIONS.map((option) => (
+      {playbackSpeedMenuItems.map((option) => (
         <MenuItem
           className="FIE_video-controls-speed-menuitem"
           key={option}
@@ -41,6 +40,7 @@ PlaybackSpeedMenu.propTypes = {
   anchor: PropTypes.instanceOf(Object),
   onClose: PropTypes.func,
   getOnClickCbkFunction: PropTypes.func,
+  playbackSpeedMenuItems: PropTypes.arrayOf(PropTypes.number),
 };
 
 export default PlaybackSpeedMenu;

packages/react-filerobot-image-editor/src/components/VideoEditor/Controls/index.jsx

@@ -31,19 +31,29 @@ const Controls = () => {
     toolId,
     tabId,
     trim: { segments = [] },
+    config: {
+      videoControls: {
+        autoplay,
+        loop,
+        defaultVolume,
+        playbackSpeedMenuItems,
+        defaultPlaybackSpeed,
+        sliderStep,
+      },
+    },
   } = useStore();
   const [trackProgress, setTrackProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [trackEnded, setTrackEnded] = useState(false);
   const [duration, setDuration] = useState(0);
-  const [playbackSpeed, setPlaybackSpeed] = useState(1);
+  const [playbackSpeed, setPlaybackSpeed] = useState(defaultPlaybackSpeed);
   const [playbackMenuAnchor, setPlaybackMenuAnchor] = useState();
-  const [volumeLevel, setVolumeLevel] = useState(1);
+  const [volumeLevel, setVolumeLevel] = useState(defaultVolume);
   const [beforeMutedVolumeLevel, setBeforeMutedVolumeLevel] = useState(0);
   const [isSeeking, setIsSeeking] = useState(false);
   const [isAudioSliderOpen, setIsAudioSliderOpen] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
-  const [isLoopDisabled, setIsLoopDisabled] = useState(false);
+  const [isLoopDisabled, setIsLoopDisabled] = useState(!loop);
   const [isBuffering, setIsBuffering] = useState(false);
 
   const animationFrameId = useRef();
@@ -350,6 +360,11 @@ const Controls = () => {
     if (mediaRef && designLayer) {
       mediaRef.load();
 
+      mediaRef.autoplay = autoplay;
+      mediaRef.loop = loop;
+      mediaRef.volume = defaultVolume;
+      mediaRef.playbackRate = defaultPlaybackSpeed;
+
       mediaRef.addEventListener('loadedmetadata', handleVideoLoaded);
       mediaRef.addEventListener('canplaythrough', handleCanPlay);
       mediaRef.addEventListener('pause', onPause);
@@ -394,7 +409,7 @@ const Controls = () => {
         <StyledSeekSlider
           className="FIE_video-controls-slider"
           value={trackProgress || 0}
-          step={1}
+          step={sliderStep}
           min={0}
           hideAnnotation
           labelTooltip="off"
@@ -472,6 +487,7 @@ const Controls = () => {
         onClose={handleTogglePlaybackMenu}
         getOnClickCbkFunction={handleChangePlaybackSpeed}
         anchor={playbackMenuAnchor}
+        playbackSpeedMenuItems={playbackSpeedMenuItems}
       />
     </StyledMediaControls>
   );

packages/react-filerobot-image-editor/src/components/VideoEditor/index.jsx

@@ -5,15 +5,9 @@ import React, { memo } from 'react';
 import App from 'components/App';
 import AssemblyPointProviders from 'components/Providers';
 import Controls from 'components/VideoEditor/Controls';
-import { TABS_IDS } from 'utils/constants';
 
 const VideoEditor = (props) => (
-  <AssemblyPointProviders
-    {...props}
-    tabsIds={[TABS_IDS.ADJUST, TABS_IDS.TRIM, TABS_IDS.RESIZE]}
-    disableResizeAfterRotation
-    defaultTabId={TABS_IDS.ADJUST}
-  >
+  <AssemblyPointProviders disableResizeAfterRotation {...props}>
     <App>
       <Controls />
     </App>

packages/react-filerobot-image-editor/src/components/buttons/SaveButton/index.jsx

@@ -55,8 +55,8 @@ const SaveButton = ({
       onBeforeSave,
       onSave: configOnSave,
       forceToPngInEllipticalCrop,
-      defaultSavedImageName,
-      defaultSavedImageType,
+      defaultSavedMediaName,
+      defaultSavedMediaType,
       defaultSavedImageQuality = DEFAULT_SAVE_QUALITY,
       useCloudimage,
       moreSaveOptions,
@@ -202,12 +202,15 @@ const SaveButton = ({
 
   const setFileNameAndExtension = () => {
     const { supportedTypes } = getSupportedExtensions(sourceType);
-    const { name, extension } = getFileFullName(
-      defaultSavedImageName || originalSource.name || defaultName,
-      forceToPngInEllipticalCrop && crop.ratio === ELLIPSE_CROP
+    const appendedExtension =
+      forceToPngInEllipticalCrop && crop.ratio === ELLIPSE_CROP && isImageFile
         ? 'png'
-        : supportedTypes.includes(defaultSavedImageType?.toLowerCase()) &&
-            defaultSavedImageType,
+        : supportedTypes.includes(defaultSavedMediaType?.toLowerCase()) &&
+          defaultSavedMediaType;
+
+    const { name, extension } = getFileFullName(
+      defaultSavedMediaName || originalSource.name || defaultName,
+      appendedExtension,
       sourceType,
     );
 

packages/react-filerobot-image-editor/src/components/tools/Trim/Trim.jsx

@@ -35,12 +35,15 @@ const Trim = () => {
     originalSource: mediaRef,
     trim: { segments = [] },
     t,
+    config,
   } = useStore();
   const [trackProgress, setTrackProgress] = useState(0);
   const [duration, setDuration] = useState(0);
   const [trimContainerWidth, setTrimContainerWidth] = useState(0);
   const [isReady, setIsReady] = useState(false);
 
+  const { sliderStep } = config[TOOLS_IDS.TRIM];
+
   const sliderRef = useRef(null);
   const animationFrameId = useRef();
 
@@ -274,7 +277,7 @@ const Trim = () => {
         className="FIE_trim-slider"
         min={0}
         max={duration || 0}
-        step={0.5}
+        step={sliderStep}
         value={trackProgress || 0}
         hideTrack
         hideAnnotation