Make 'playback rate' persistent

## Issue
5308: Ability to choose default play speed and theatre mode or regular playback size

## Comments
Initially, I used the local storage, as per 'muted' and 'volume' -- I thought that would be appropriate.
Later, I saw that Theater Mode is already using Client Settings, so I re-did everything to match that.

Also, there is an accompanying commit in lbyr-redux.

static/app-strings.json

@@ -1553,5 +1553,6 @@
   "Consolidate Now": "Consolidate Now",
   "Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could take some time. %now%%help%": "Your wallet has a lot of change lying around. Consolidating will speed up your transactions. This could take some time. %now%%help%",
   "Consolidating": "Consolidating",
+  "Theater mode": "Theater mode",
   "--end--": "--end--"
 }

ui/component/viewers/videoViewer/index.js

@@ -8,7 +8,7 @@ import VideoViewer from './view';
 import { withRouter } from 'react-router';
 import { doClaimEligiblePurchaseRewards } from 'redux/actions/rewards';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { toggleVideoTheaterMode } from 'redux/actions/settings';
+import { toggleVideoTheaterMode, doSetClientSetting } from 'redux/actions/settings';
 
 const select = (state, props) => {
   const { search } = props.location;
@@ -21,6 +21,7 @@ const select = (state, props) => {
     autoplaySetting: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY)(state)),
     volume: selectVolume(state),
     muted: selectMute(state),
+    videoPlaybackRate: makeSelectClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE)(state),
     position: position,
     hasFileInfo: Boolean(makeSelectFileInfoForUri(props.uri)(state)),
     thumbnail: makeSelectThumbnailForUri(props.uri)(state),
@@ -37,6 +38,7 @@ const perform = dispatch => ({
   doAnalyticsBuffer: (uri, bufferData) => dispatch(doAnalyticsBuffer(uri, bufferData)),
   claimRewards: () => dispatch(doClaimEligiblePurchaseRewards()),
   toggleVideoTheaterMode: () => dispatch(toggleVideoTheaterMode()),
+  setVideoPlaybackRate: rate => dispatch(doSetClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE, rate)),
 });
 
 export default withRouter(connect(select, perform)(VideoViewer));

ui/component/viewers/videoViewer/view.jsx

@@ -25,6 +25,7 @@ type Props = {
   thumbnail: string,
   claim: StreamClaim,
   muted: boolean,
+  videoPlaybackRate: number,
   volume: number,
   uri: string,
   autoplaySetting: boolean,
@@ -36,6 +37,7 @@ type Props = {
   savePosition: (string, number) => void,
   clearPosition: string => void,
   toggleVideoTheaterMode: () => void,
+  setVideoPlaybackRate: number => void,
 };
 
 /*
@@ -49,6 +51,7 @@ function VideoViewer(props: Props) {
     source,
     changeVolume,
     changeMute,
+    videoPlaybackRate,
     thumbnail,
     position,
     claim,
@@ -64,6 +67,7 @@ function VideoViewer(props: Props) {
     clearPosition,
     desktopPlayStartTime,
     toggleVideoTheaterMode,
+    setVideoPlaybackRate,
   } = props;
   const claimId = claim && claim.claim_id;
   const isAudio = contentType.includes('audio');
@@ -137,7 +141,7 @@ function VideoViewer(props: Props) {
       if (!embedded) {
         player.muted(muted);
         player.volume(volume);
-
+        player.playbackRate(videoPlaybackRate);
         addTheaterModeButton(player, toggleVideoTheaterMode);
       }
 
@@ -185,6 +189,11 @@ function VideoViewer(props: Props) {
           changeMute(player.muted());
         }
       });
+      player.on('ratechange', () => {
+        if (player) {
+          setVideoPlaybackRate(player.playbackRate());
+        }
+      });
 
       if (position) {
         player.currentTime(position);

ui/redux/reducers/settings.js

@@ -48,6 +48,7 @@ const defaultState = {
     [SETTINGS.AUTOMATIC_DARK_MODE_ENABLED]: false,
     [SETTINGS.TILE_LAYOUT]: true,
     [SETTINGS.VIDEO_THEATER_MODE]: false,
+    [SETTINGS.VIDEO_PLAYBACK_RATE]: 1,
 
     [SETTINGS.DARK_MODE_TIMES]: {
       from: { hour: '21', min: '00', formattedTime: '21:00' },