chore: muted ref added

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

example/src/App.tsx

@@ -8,24 +8,25 @@ const initialCode = `
   <Player
     sources={[
       {
-        file: 'https://artplayer.org/assets/sample/video.mp4'
+        file: 'https://huggingface.co/datasets/light064/ReactAllPlayer/resolve/main/View_From_A_Blue_Moon_Trailer-1080p.mp4'
       }
     ]}
     subtitles={[
       {
-        lang: 'jp',
-        language: 'Japanese',
-        file: 'https://artplayer.org/assets/sample/subtitle.jp.srt'
+        lang: 'en',
+        language: 'English',
+        file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt'
       },
       {
-        lang: 'cn',
-        language: 'Chinese',
-        file: 'https://artplayer.org/assets/sample/subtitle.cn.srt'
+        lang: 'fr',
+        language: 'French ',
+        file: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
       }
     ]}
     className="object-contain w-full h-full"
     thumbnail="https://preview.zorores.com/8b/8bc17ab9537166f2abb7e0bef2b57e23/thumbnails/sprite.vtt"
     autoPlay
+    muted
   />
 `
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Controls/VolumeButton/VolumeButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useVideo } from '../../../contexts/VideoContext';
 import { useVideoProps } from '../../../contexts/VideoPropsContext';
 import useHotKey, { parseHotKey } from '../../../hooks/useHotKey';
@@ -24,6 +24,12 @@ const VolumeButton = () => {
   const hotkey = useHotKey('volume');
   const previousVolume = useRef(videoState.volume);
 
+  useEffect(() => {
+    if(videoEl?.muted) {
+      videoState.volume = 0;
+    }
+  })
+
   const VolumeComponent = useMemo(() => {
     const entries = Object.entries(VolumeComponents).sort(
       (a, b) => Number(a[0]) - Number(b[0])
@@ -41,6 +47,8 @@ const VolumeButton = () => {
   const handleClick = useCallback(() => {
     if (!videoEl) return;
 
+    if (videoEl.muted) videoEl.muted = false;
+
     if (videoEl.volume === 0) {
       videoEl.volume = previousVolume.current;
     } else {

src/components/DefaultUI/DefaultUI.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import { useInteract } from '../../contexts/VideoInteractingContext';
-import { Components, ReactVidPlayerProps } from '../../contexts/VideoPropsContext';
+import {
+  Components,
+  ReactVidPlayerProps,
+} from '../../contexts/VideoPropsContext';
 import useDoubleTap from '../../hooks/useDoubleTap';
 import useGlobalHotKeys from '../../hooks/useGlobalHotKeys';
 import { clamp, classNames } from '../../utils';
 import { isMobile } from '../../utils/device';
 import { IndicatorRef } from '../Indicator/Indicator';
 import styles from './DefaultUI.module.css';
 
-import Controls, { MobileVolumeSlider } from '../Controls';
+import Controls from '../Controls';
 import MobileBackwardIndicator from '../Indicator/MobileBackwardIndicator';
 import MobileForwardIndicator from '../Indicator/MobileForwardIndicator';
 import MobileControls from '../MobileControls';
@@ -30,7 +33,6 @@ const defaultComponents: Components = {
   Overlay,
   Player,
   Subtitle,
-  MobileVolumeSlider,
 };
 
 const DefaultUI = React.forwardRef<HTMLVideoElement, ReactVidPlayerProps>(
@@ -85,9 +87,6 @@ const DefaultUI = React.forwardRef<HTMLVideoElement, ReactVidPlayerProps>(
         Overlay: components?.Overlay || defaultComponents.Overlay,
         Player: components?.Player || defaultComponents.Player,
         Subtitle: components?.Subtitle || defaultComponents.Subtitle,
-        MobileVolumeSlider:
-          components?.MobileVolumeSlider ||
-          defaultComponents.MobileVolumeSlider,
       }),
       [components]
     );
@@ -239,10 +238,6 @@ const DefaultUI = React.forwardRef<HTMLVideoElement, ReactVidPlayerProps>(
         <uiComponents.MobileBackwardIndicator ref={backIndicatorRef} />
         <uiComponents.MobileForwardIndicator ref={forwardIndicatorRef} />
 
-        {!disableVolumeSlider && (
-          <uiComponents.MobileVolumeSlider ref={volumeSliderRef} />
-        )}
-
         <uiComponents.Subtitle />
 
         <div className={styles.playerContainer}>

src/components/Player/Player.tsx

@@ -28,6 +28,7 @@ export interface PlayerProps extends React.HTMLAttributes<HTMLVideoElement> {
   onDashInit?: (dash: DashJS.MediaPlayerClass, currentSource: Source) => void;
   onInit?: (videoEl: HTMLVideoElement) => void;
   autoPlay?: boolean;
+  muted?: boolean;
   preferQuality?: (qualities: string[]) => string;
   hlsVersion?: string;
   dashVersion?: string;
@@ -54,6 +55,7 @@ const Player = React.forwardRef<HTMLVideoElement, PlayerProps>(
       onDashInit = noop,
       onInit = noop,
       autoPlay = false,
+      muted = false,
       preferQuality,
       hlsVersion,
       dashVersion,
@@ -442,6 +444,7 @@ const Player = React.forwardRef<HTMLVideoElement, PlayerProps>(
       <video
         ref={playerRef}
         autoPlay={autoPlay}
+        muted={muted}
         preload="auto"
         className={styles.video}
         playsInline

src/contexts/GlobalContext.tsx

@@ -7,11 +7,17 @@ import { VideoStateContextProvider } from './VideoStateContext';
 const GlobalContext: React.FC<ReactVidPlayerProps> = ({
   sources,
   subtitles = [],
+  placeholder,
   children,
   ...props
 }) => {
   return (
-    <VideoPropsProvider sources={sources} subtitles={subtitles} {...props}>
+    <VideoPropsProvider
+      sources={sources}
+      subtitles={subtitles}
+      placeholder={placeholder}
+      {...props}
+    >
       <VideoStateContextProvider>
         <VideoInteractingContextProvider>
           <SubtitleSettingsProvider>{children}</SubtitleSettingsProvider>

src/contexts/VideoPropsContext.tsx

@@ -54,9 +54,6 @@ export type Components = {
   MobileForwardIndicator: React.ForwardRefExoticComponent<
     React.RefAttributes<IndicatorRef>
   >;
-  MobileVolumeSlider: React.ForwardRefExoticComponent<
-    React.RefAttributes<IndicatorRef>
-  >;
   Player: React.ForwardRefExoticComponent<
     PlayerProps & React.RefAttributes<HTMLVideoElement>
   >;
@@ -68,6 +65,7 @@ export type Components = {
 
 export interface ReactVidPlayerProps extends PlayerProps {
   thumbnail?: string;
+  placeholder?: string;
   i18n?: I18n;
   shortcuts?: Shortcuts;
   hotkeys?: HotKey[];