Merge pull request #28 from ahmedazizabbassi/develop

Improve the development instructions in docs
braiekhazem · May 21, 2024 · 2027517 · 2027517
2 parents 7230c3c + 4b207c1
commit 2027517
Show file tree

Hide file tree

Showing 175 changed files with 52 additions and 49 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
diff --git a/.gitignore b/.gitignore
diff --git a/Dockerfile b/Dockerfile
diff --git a/LICENSE b/LICENSE
diff --git a/Makefile b/Makefile
diff --git a/README.md b/README.md
@@ -66,63 +66,63 @@ export default MyVideoPlayer;
 | shift + N   | Previous video    |
 | shift + D   | Download          |
 | shift + S   | Screenshot        |
-| ←           | Rewind            |
-| →           | Forward           |
-| ↑           | Volume up         |
-| ↓           | Volume down       |
+| ←          | Rewind            |
+| →          | Forward           |
+| ↑          | Volume up         |
+| ↓          | Volume down       |
 | M           | Toggle mute       |
 | F           | Toggle fullscreen |
 
 ## 🛠️ Props
 
 ### 🏷️ HTML Video Tag Native Attributes
 
-| Props       | Type                           | Default     | Note |
-| ----------- | ------------------------------ | ----------- | ---- |
-| src         | string \| string[]             | ''          |      |
-| preload     | 'auto' \| 'metadata' \| 'none' | 'auto'      |      |
-| autoPlay    | boolean                        | false       |
-| loop        | boolean                        | false       |      |
-| muted       | boolean                        | false       |      |
-| volume      | number                         | 1.0         |
-| crossOrigin | string                         | 'anonymous' |      |
+| Props       | Type                          | Default     | Note |
+| ----------- | ----------------------------- | ----------- | ---- |
+| src         | string\| string[]             | ''          |      |
+| preload     | 'auto'\| 'metadata' \| 'none' | 'auto'      |      |
+| autoPlay    | boolean                       | false       |      |
+| loop        | boolean                       | false       |      |
+| muted       | boolean                       | false       |      |
+| volume      | number                        | 1.0         |      |
+| crossOrigin | string                        | 'anonymous' |      |
 
 ##### More attributes details : [Vidify props attributes](https://github.com/braiekhazem/Vidify/blob/main/src/components/VideoPlayer/%40types.ts#L19)
 
 ### 🛠️ Vidify Props
 
-| Prop            | Type                                                | Description                                                                       |
-| --------------- | --------------------------------------------------- | --------------------------------------------------------------------------------- |
-| src             | string \| string[]                                  | The source(s) of the video file(s).                                               |
-| defaultSrcIndex | number                                              | The index of the default source to play.                                          |
-| startTime       | number                                              | The time (in seconds) to start playing the video from.                            |
-| children        | React.ReactNode                                     | Child elements to be rendered within the video player component.                  |
-| className       | string                                              | Additional CSS class(es) to apply to the video player component.                  |
-| id              | string                                              | The unique identifier of the video player component.                              |
-| primaryColor    | string                                              | The primary color used for styling the video player interface.                    |
-| annotation      | ReactNode                                           | Additional content (such as text or icons) to be displayed on the video player.   |
-| annotationStyle | CSSProperties                                       | CSS styles to apply to the annotation content.                                    |
-| width           | string                                              | The width of the video player.                                                    |
-| height          | string                                              | The height of the video player.                                                   |
-| durationType    | "remainingTime" \| "default"                        | The type of duration display for the video player.                                |
-| placeholder     | string                                              | The URL of an image to display as a placeholder before the video loads.           |
-| title           | string                                              | The title of the video player.                                                    |
-| style           | CSSProperties                                       | Custom CSS styles to apply to the video player.                                   |
-| controller      | contextmenu \| boolean \| contextmenuRender         | Configurations for the control bar of the video player.                           |
-| volume          | number                                              | The volume level of the video player (0 to 1).                                    |
-| paused          | boolean                                             | Whether the video is paused or not.                                               |
-| poster          | string                                              | The URL of an image to display as the video poster.                               |
-| thumbnail       | string                                              | The URL of an image to display as the video thumbnail.                            |
-| autoPlay        | boolean                                             | Whether the video should automatically start playing when loaded.                 |
-| playbackRate    | number                                              | The playback rate of the video (e.g., 1 for normal speed, 2 for double speed).    |
-| playsInline     | boolean                                             | Whether the video should play inline (e.g., in the same layout as other content). |
-| preload         | string                                              | Specifies how the video should be loaded when the page loads.                     |
-| crossOrigin     | "anonymous" \| "use-credentials" \| "" \| undefined | The CORS setting for the video resource.                                          |
-| loop            | boolean                                             | Whether the video should loop playback.                                           |
-| muted           | boolean                                             | Whether the video should be muted.                                                |
-| containerRef    | React.Ref<any>                                      | Reference to the container element of the video player.                           |
-| block           | boolean                                             | Whether the video player should be displayed full width or not.                   |
-| rounded         | boolean                                             |
+| Prop            | Type                                               | Description                                                                       |
+| --------------- | -------------------------------------------------- | --------------------------------------------------------------------------------- |
+| src             | string\| string[]                                  | The source(s) of the video file(s).                                               |
+| defaultSrcIndex | number                                             | The index of the default source to play.                                          |
+| startTime       | number                                             | The time (in seconds) to start playing the video from.                            |
+| children        | React.ReactNode                                    | Child elements to be rendered within the video player component.                  |
+| className       | string                                             | Additional CSS class(es) to apply to the video player component.                  |
+| id              | string                                             | The unique identifier of the video player component.                              |
+| primaryColor    | string                                             | The primary color used for styling the video player interface.                    |
+| annotation      | ReactNode                                          | Additional content (such as text or icons) to be displayed on the video player.   |
+| annotationStyle | CSSProperties                                      | CSS styles to apply to the annotation content.                                    |
+| width           | string                                             | The width of the video player.                                                    |
+| height          | string                                             | The height of the video player.                                                   |
+| durationType    | "remainingTime"\| "default"                        | The type of duration display for the video player.                                |
+| placeholder     | string                                             | The URL of an image to display as a placeholder before the video loads.           |
+| title           | string                                             | The title of the video player.                                                    |
+| style           | CSSProperties                                      | Custom CSS styles to apply to the video player.                                   |
+| controller      | contextmenu\| boolean \| contextmenuRender         | Configurations for the control bar of the video player.                           |
+| volume          | number                                             | The volume level of the video player (0 to 1).                                    |
+| paused          | boolean                                            | Whether the video is paused or not.                                               |
+| poster          | string                                             | The URL of an image to display as the video poster.                               |
+| thumbnail       | string                                             | The URL of an image to display as the video thumbnail.                            |
+| autoPlay        | boolean                                            | Whether the video should automatically start playing when loaded.                 |
+| playbackRate    | number                                             | The playback rate of the video (e.g., 1 for normal speed, 2 for double speed).    |
+| playsInline     | boolean                                            | Whether the video should play inline (e.g., in the same layout as other content). |
+| preload         | string                                             | Specifies how the video should be loaded when the page loads.                     |
+| crossOrigin     | "anonymous"\| "use-credentials" \| "" \| undefined | The CORS setting for the video resource.                                          |
+| loop            | boolean                                            | Whether the video should loop playback.                                           |
+| muted           | boolean                                            | Whether the video should be muted.                                                |
+| containerRef    | React.Ref`<any>`                                 | Reference to the container element of the video player.                           |
+| block           | boolean                                            | Whether the video player should be displayed full width or not.                   |
+| rounded         | boolean                                            |                                                                                   |
 
 ### 🎉 Event Props
 
@@ -278,13 +278,16 @@ Your support is greatly appreciated! ☕️❤️
 ```bash
 $ git clone https://github.com/braiekhazem/Vidify.git
 $ cd vidify
-$ npm install
+$ npm install # dependencies for package
+$ cd demo 
+$ npm install # dependencies for demo site
+$ cd ..
 $ npm run dev  # for running the development server
 # OR
 $ npm run demo # for running the demo
 ```
 
-Open your browser and visit http://localhost:3000 .
+Open your browser and visit [http://localhost:3000]().
 
 ## 🤝 How to Contribute
 

diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/demo/app/App.tsx b/demo/app/App.tsx
diff --git a/demo/app/_App.scss b/demo/app/_App.scss
diff --git a/demo/app/_index.scss b/demo/app/_index.scss
diff --git a/demo/assets/by-me-coffee.svg b/demo/assets/by-me-coffee.svg
diff --git a/demo/assets/code.svg b/demo/assets/code.svg
diff --git a/demo/assets/github.svg b/demo/assets/github.svg
diff --git a/demo/assets/linkedin.svg b/demo/assets/linkedin.svg
diff --git a/demo/assets/loader.svg b/demo/assets/loader.svg
diff --git a/demo/assets/navigate.svg b/demo/assets/navigate.svg
diff --git a/demo/assets/star.svg b/demo/assets/star.svg
diff --git a/demo/components/DemoBox/@types.ts b/demo/components/DemoBox/@types.ts
diff --git a/demo/components/DemoBox/DemoBox.tsx b/demo/components/DemoBox/DemoBox.tsx
diff --git a/demo/components/DemoBox/_DemoBox.scss b/demo/components/DemoBox/_DemoBox.scss
diff --git a/demo/components/DemoBox/_index.scss b/demo/components/DemoBox/_index.scss
diff --git a/demo/components/DemoBox/index.ts b/demo/components/DemoBox/index.ts
diff --git a/demo/components/Header/@types.ts b/demo/components/Header/@types.ts
diff --git a/demo/components/Header/Header.tsx b/demo/components/Header/Header.tsx
diff --git a/demo/components/Header/_Header.scss b/demo/components/Header/_Header.scss
diff --git a/demo/components/Header/_index.scss b/demo/components/Header/_index.scss
diff --git a/demo/components/Header/index.ts b/demo/components/Header/index.ts
diff --git a/demo/components/_index.scss b/demo/components/_index.scss
diff --git a/demo/demo.tsx b/demo/demo.tsx
diff --git a/demo/index.html b/demo/index.html
diff --git a/demo/package.json b/demo/package.json
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
diff --git a/demo/tsconfig.node.json b/demo/tsconfig.node.json
diff --git a/demo/utils/generateCode.ts b/demo/utils/generateCode.ts
diff --git a/demo/vite-env.d.ts b/demo/vite-env.d.ts
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
diff --git a/docker-compose.yml b/docker-compose.yml
diff --git a/index.html b/index.html
diff --git a/nginx.conf b/nginx.conf
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/public/2f91197ad4ce4a078f723019694803ae.jpeg b/public/2f91197ad4ce4a078f723019694803ae.jpeg
diff --git a/public/locales/ar/sidebar.json b/public/locales/ar/sidebar.json
diff --git a/public/locales/ar/translation.json b/public/locales/ar/translation.json
diff --git a/public/locales/en/sidebar.json b/public/locales/en/sidebar.json
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
diff --git a/public/locales/fr/sidebar.json b/public/locales/fr/sidebar.json
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/scripts/create-component.sh b/scripts/create-component.sh
diff --git a/src/components/ArrowNavigation/@types.ts b/src/components/ArrowNavigation/@types.ts
diff --git a/src/components/ArrowNavigation/ArrowNavigation.tsx b/src/components/ArrowNavigation/ArrowNavigation.tsx
diff --git a/src/components/ArrowNavigation/_ArrowNavigation.scss b/src/components/ArrowNavigation/_ArrowNavigation.scss
diff --git a/src/components/ArrowNavigation/_index.scss b/src/components/ArrowNavigation/_index.scss
diff --git a/src/components/ArrowNavigation/index.ts b/src/components/ArrowNavigation/index.ts
diff --git a/src/components/ControlIcon/@types.ts b/src/components/ControlIcon/@types.ts
diff --git a/src/components/ControlIcon/ControlIcon.tsx b/src/components/ControlIcon/ControlIcon.tsx
diff --git a/src/components/ControlIcon/_ControlIcon.scss b/src/components/ControlIcon/_ControlIcon.scss
diff --git a/src/components/ControlIcon/_index.scss b/src/components/ControlIcon/_index.scss
diff --git a/src/components/ControlIcon/index.ts b/src/components/ControlIcon/index.ts
diff --git a/src/components/ControlsBar/@types.ts b/src/components/ControlsBar/@types.ts
diff --git a/src/components/ControlsBar/ControlsBar.tsx b/src/components/ControlsBar/ControlsBar.tsx
diff --git a/src/components/ControlsBar/_ControlsBar.scss b/src/components/ControlsBar/_ControlsBar.scss
diff --git a/src/components/ControlsBar/_index.scss b/src/components/ControlsBar/_index.scss
diff --git a/src/components/ControlsBar/index.ts b/src/components/ControlsBar/index.ts
diff --git a/src/components/Download/@types.ts b/src/components/Download/@types.ts
diff --git a/src/components/Download/Download.tsx b/src/components/Download/Download.tsx
diff --git a/src/components/Download/_Download.scss b/src/components/Download/_Download.scss
diff --git a/src/components/Download/_index.scss b/src/components/Download/_index.scss
diff --git a/src/components/Download/index.ts b/src/components/Download/index.ts
diff --git a/src/components/FullScreen/@types.ts b/src/components/FullScreen/@types.ts
diff --git a/src/components/FullScreen/FullScreen.tsx b/src/components/FullScreen/FullScreen.tsx
diff --git a/src/components/FullScreen/_FullScreen.scss b/src/components/FullScreen/_FullScreen.scss
diff --git a/src/components/FullScreen/_index.scss b/src/components/FullScreen/_index.scss
diff --git a/src/components/FullScreen/index.ts b/src/components/FullScreen/index.ts
diff --git a/src/components/MiniPlayer/@types.ts b/src/components/MiniPlayer/@types.ts
diff --git a/src/components/MiniPlayer/MiniPlayer.tsx b/src/components/MiniPlayer/MiniPlayer.tsx
diff --git a/src/components/MiniPlayer/_MiniPlayer.scss b/src/components/MiniPlayer/_MiniPlayer.scss
diff --git a/src/components/MiniPlayer/_index.scss b/src/components/MiniPlayer/_index.scss
diff --git a/src/components/MiniPlayer/index.ts b/src/components/MiniPlayer/index.ts
diff --git a/src/components/PlayButton/@types.ts b/src/components/PlayButton/@types.ts
diff --git a/src/components/PlayButton/PlayButton.tsx b/src/components/PlayButton/PlayButton.tsx
diff --git a/src/components/PlayButton/_PlayButton.scss b/src/components/PlayButton/_PlayButton.scss
diff --git a/src/components/PlayButton/_index.scss b/src/components/PlayButton/_index.scss
diff --git a/src/components/PlayButton/index.ts b/src/components/PlayButton/index.ts
diff --git a/src/components/ProgressBar/@types.ts b/src/components/ProgressBar/@types.ts
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
diff --git a/src/components/ProgressBar/_ProgressBar.scss b/src/components/ProgressBar/_ProgressBar.scss
diff --git a/src/components/ProgressBar/_index.scss b/src/components/ProgressBar/_index.scss
diff --git a/src/components/ProgressBar/index.ts b/src/components/ProgressBar/index.ts
diff --git a/src/components/Screenshot/@types.ts b/src/components/Screenshot/@types.ts
diff --git a/src/components/Screenshot/Screenshot.tsx b/src/components/Screenshot/Screenshot.tsx
diff --git a/src/components/Screenshot/_Screenshot.scss b/src/components/Screenshot/_Screenshot.scss
diff --git a/src/components/Screenshot/_index.scss b/src/components/Screenshot/_index.scss
diff --git a/src/components/Screenshot/index.ts b/src/components/Screenshot/index.ts
diff --git a/src/components/SecondsForward/@types.ts b/src/components/SecondsForward/@types.ts
diff --git a/src/components/SecondsForward/SecondsForward.tsx b/src/components/SecondsForward/SecondsForward.tsx
diff --git a/src/components/SecondsForward/_SecondsForward.scss b/src/components/SecondsForward/_SecondsForward.scss
diff --git a/src/components/SecondsForward/_index.scss b/src/components/SecondsForward/_index.scss
diff --git a/src/components/SecondsForward/index.ts b/src/components/SecondsForward/index.ts
diff --git a/src/components/Settings/@types.ts b/src/components/Settings/@types.ts
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
diff --git a/src/components/Settings/_Settings.scss b/src/components/Settings/_Settings.scss
diff --git a/src/components/Settings/_index.scss b/src/components/Settings/_index.scss
diff --git a/src/components/Settings/index.ts b/src/components/Settings/index.ts
diff --git a/src/components/SoundIcon/@types.ts b/src/components/SoundIcon/@types.ts
diff --git a/src/components/SoundIcon/SoundIcon.tsx b/src/components/SoundIcon/SoundIcon.tsx
diff --git a/src/components/SoundIcon/_SoundIcon.scss b/src/components/SoundIcon/_SoundIcon.scss
diff --git a/src/components/SoundIcon/_index.scss b/src/components/SoundIcon/_index.scss
diff --git a/src/components/SoundIcon/index.ts b/src/components/SoundIcon/index.ts
diff --git a/src/components/Speed/@types.ts b/src/components/Speed/@types.ts
diff --git a/src/components/Speed/Speed.tsx b/src/components/Speed/Speed.tsx
diff --git a/src/components/Speed/_Speed.scss b/src/components/Speed/_Speed.scss
diff --git a/src/components/Speed/_index.scss b/src/components/Speed/_index.scss
diff --git a/src/components/Speed/index.ts b/src/components/Speed/index.ts
diff --git a/src/components/Subtitle/@types.ts b/src/components/Subtitle/@types.ts
diff --git a/src/components/Subtitle/Subtitle.tsx b/src/components/Subtitle/Subtitle.tsx
diff --git a/src/components/Subtitle/_Subtitle.scss b/src/components/Subtitle/_Subtitle.scss
diff --git a/src/components/Subtitle/_index.scss b/src/components/Subtitle/_index.scss
diff --git a/src/components/Subtitle/index.ts b/src/components/Subtitle/index.ts
diff --git a/src/components/VideoPlayer/@types.ts b/src/components/VideoPlayer/@types.ts
diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx
diff --git a/src/components/VideoPlayer/index.ts b/src/components/VideoPlayer/index.ts
diff --git a/src/components/VideoPlayer/styles/_VideoPlayer.scss b/src/components/VideoPlayer/styles/_VideoPlayer.scss
diff --git a/src/components/VideoPlayer/styles/_index.scss b/src/components/VideoPlayer/styles/_index.scss
diff --git a/src/components/VideoPlayer/styles/index.ts b/src/components/VideoPlayer/styles/index.ts
diff --git a/src/components/Wrapper/@types.ts b/src/components/Wrapper/@types.ts
diff --git a/src/components/Wrapper/Wrapper.tsx b/src/components/Wrapper/Wrapper.tsx
diff --git a/src/components/Wrapper/_Wrapper.scss b/src/components/Wrapper/_Wrapper.scss
diff --git a/src/components/Wrapper/_index.scss b/src/components/Wrapper/_index.scss
diff --git a/src/components/Wrapper/index.ts b/src/components/Wrapper/index.ts
diff --git a/src/global/_index.scss b/src/global/_index.scss
diff --git a/src/global/assets/icons/arrowNavigation/next.svg b/src/global/assets/icons/arrowNavigation/next.svg
diff --git a/src/global/assets/icons/arrowNavigation/previous.svg b/src/global/assets/icons/arrowNavigation/previous.svg
diff --git a/src/global/assets/icons/download/download.svg b/src/global/assets/icons/download/download.svg
diff --git a/src/global/assets/icons/fullscreen/cancel-fullscreen.svg b/src/global/assets/icons/fullscreen/cancel-fullscreen.svg
diff --git a/src/global/assets/icons/fullscreen/fullscreen.svg b/src/global/assets/icons/fullscreen/fullscreen.svg
diff --git a/src/global/assets/icons/loading/spinner.svg b/src/global/assets/icons/loading/spinner.svg
diff --git a/src/global/assets/icons/miniPlayer/miniPlayer.svg b/src/global/assets/icons/miniPlayer/miniPlayer.svg
diff --git a/src/global/assets/icons/screenshot/screenshot.svg b/src/global/assets/icons/screenshot/screenshot.svg
diff --git a/src/global/assets/icons/secondsForward/next5-seconds.svg b/src/global/assets/icons/secondsForward/next5-seconds.svg
diff --git a/src/global/assets/icons/secondsForward/prev5-seconds.svg b/src/global/assets/icons/secondsForward/prev5-seconds.svg
diff --git a/src/global/assets/icons/settings/Settings.svg b/src/global/assets/icons/settings/Settings.svg
diff --git a/src/global/assets/icons/subtitle/inactive-subtitle.svg b/src/global/assets/icons/subtitle/inactive-subtitle.svg
diff --git a/src/global/assets/icons/subtitle/subtitle.svg b/src/global/assets/icons/subtitle/subtitle.svg
diff --git a/src/global/assets/icons/volume/Medium.svg b/src/global/assets/icons/volume/Medium.svg
diff --git a/src/global/assets/icons/volume/Mute.svg b/src/global/assets/icons/volume/Mute.svg
diff --git a/src/global/assets/icons/volume/Sound.svg b/src/global/assets/icons/volume/Sound.svg
diff --git a/src/global/assets/styles/abstracts/_breakpoints.scss b/src/global/assets/styles/abstracts/_breakpoints.scss
diff --git a/src/global/assets/styles/abstracts/_colors.scss b/src/global/assets/styles/abstracts/_colors.scss
diff --git a/src/global/assets/styles/abstracts/_functions.scss b/src/global/assets/styles/abstracts/_functions.scss
diff --git a/src/global/assets/styles/abstracts/_index.scss b/src/global/assets/styles/abstracts/_index.scss
diff --git a/src/global/assets/styles/abstracts/_mixins.scss b/src/global/assets/styles/abstracts/_mixins.scss
diff --git a/src/global/assets/styles/abstracts/_padding.scss b/src/global/assets/styles/abstracts/_padding.scss
diff --git a/src/global/assets/styles/abstracts/_variables.scss b/src/global/assets/styles/abstracts/_variables.scss
diff --git a/src/global/assets/styles/base/_index.scss b/src/global/assets/styles/base/_index.scss
diff --git a/src/global/theme-default.scss b/src/global/theme-default.scss
diff --git a/src/hooks/useRefDimensions.ts b/src/hooks/useRefDimensions.ts
diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/utils/concatPrefixCls.ts b/src/utils/concatPrefixCls.ts
diff --git a/src/utils/downloadFile.ts b/src/utils/downloadFile.ts
diff --git a/src/utils/formatDurationTime.ts b/src/utils/formatDurationTime.ts
diff --git a/src/utils/getAllowedControlBarItems.ts b/src/utils/getAllowedControlBarItems.ts
diff --git a/src/utils/getPercentage.ts b/src/utils/getPercentage.ts
diff --git a/src/utils/getPrefixCls.ts b/src/utils/getPrefixCls.ts
diff --git a/src/utils/getVideoSrc.ts b/src/utils/getVideoSrc.ts
diff --git a/src/utils/managePlayerKeyDown.ts b/src/utils/managePlayerKeyDown.ts
diff --git a/src/utils/mergeRefs.ts b/src/utils/mergeRefs.ts
diff --git a/src/utils/playerManager.ts b/src/utils/playerManager.ts
diff --git a/src/utils/syncStateWithVideo.ts b/src/utils/syncStateWithVideo.ts
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.node.json b/tsconfig.node.json
diff --git a/vite.config.ts b/vite.config.ts