Add initial change Toast notify

ui/component/viewers/videoViewer/index.js

@@ -25,6 +25,7 @@ import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
 import { selectDaemonSettings, selectClientSetting, selectHomepageData } from 'redux/selectors/settings';
 import { toggleVideoTheaterMode, toggleAutoplayNext, doSetClientSetting } from 'redux/actions/settings';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
+import { doToast } from 'redux/actions/notifications';
 
 const select = (state, props) => {
   const { search } = props.location;
@@ -102,6 +103,7 @@ const perform = (dispatch) => ({
     ),
   doAnalyticsView: (uri, timeToStart) => dispatch(doAnalyticsView(uri, timeToStart)),
   claimRewards: () => dispatch(doClaimEligiblePurchaseRewards()),
+  doToast: (props) => dispatch(doToast(props)),
 });
 
 export default withRouter(connect(select, perform)(VideoViewer));

ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js

@@ -265,6 +265,16 @@ class HlsQualitySelectorPlugin {
    */
   setQuality(height) {
     const qualityList = this.player.qualityLevels();
+    const { initialQualityChange, setInitialQualityChange, doToast } = this.config;
+
+    if (!initialQualityChange) {
+      doToast({
+        message: __('You can also change your default quality on settings.'),
+        linkText: __('Settings'),
+        linkTarget: '/settings',
+      });
+      setInitialQualityChange(true);
+    }
 
     // Set quality on plugin
     this._currentQuality = height;

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -24,6 +24,7 @@ import recsys from './plugins/videojs-recsys/plugin';
 import videojs from 'video.js';
 import { useIsMobile } from 'effects/use-screensize';
 import { platform } from 'util/platform';
+import usePersistedState from 'effects/use-persisted-state';
 
 const canAutoplay = require('./plugins/canAutoplay');
 
@@ -97,6 +98,7 @@ type Props = {
   isLivestreamClaim: boolean,
   userClaimId: ?string,
   activeLivestreamForChannel: any,
+  doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
 };
 
 const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
@@ -158,8 +160,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     userClaimId,
     isLivestreamClaim,
     activeLivestreamForChannel,
+    doToast,
   } = props;
 
+  // used to notify about default quality setting
+  const [initialQualityChange, setInitialQualityChange] = usePersistedState('initial-quality-change', false);
+
   const isMobile = useIsMobile();
 
   const playerRef = useRef();
@@ -284,6 +290,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
           displayCurrentQuality: true,
           originalHeight: claimValues?.video?.height,
           defaultQuality,
+          initialQualityChange,
+          setInitialQualityChange,
+          doToast,
         });
       }
 

ui/component/viewers/videoViewer/view.jsx

@@ -70,6 +70,7 @@ type Props = {
   isLivestreamClaim: boolean,
   activeLivestreamForChannel: any,
   defaultQuality: ?string,
+  doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
 };
 
 /*
@@ -115,6 +116,7 @@ function VideoViewer(props: Props) {
     isLivestreamClaim,
     activeLivestreamForChannel,
     defaultQuality,
+    doToast,
   } = props;
 
   const permanentUrl = claim && claim.permanent_url;
@@ -511,6 +513,7 @@ function VideoViewer(props: Props) {
         isLivestreamClaim={isLivestreamClaim}
         activeLivestreamForChannel={activeLivestreamForChannel}
         defaultQuality={defaultQuality}
+        doToast={doToast}
       />
     </div>
   );