Merge pull request #628 from classtranscribe/Linting

Linting
classtranscribe · Jun 20, 2023 · 35cf595 · 35cf595
2 parents ae78c3a + ff68c35
commit 35cf595
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 170 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -76,6 +76,31 @@
     "react/no-did-update-set-state": ["warn"],
     "react/sort-comp": "off",
     "react/require-default-props": "off",
-    "react/no-array-index-key": "warn"
+    "react/no-array-index-key": "warn",
+    "arrow-body-style": "warn", // maybecome an error in the future
+    "default-param-last": "warn", // maybecome an error in the future
+    "import/named": "warn", // maybecome an error in the future
+    "import/newline-after-import": "warn", // maybecome an error in the future
+    "import/no-useless-path-segments": "warn", // maybecome an error in the future
+    "import/order": "warn", // maybecome an error in the future
+    "no-empty": "warn", // maybecome an error in the future
+    "no-plusplus": "warn", // maybecome an error in the future
+    "no-promise-executor-return": "warn", // maybecome an error in the future
+    "no-unneeded-ternary": "warn", // maybecome an error in the future
+    "no-useless-return": "warn", // maybecome an error in the future
+    "no-var": "warn", // maybecome an error in the future
+    "prefer-arrow-callback": "warn", // maybecome an error in the future
+    "prefer-template": "warn", // maybecome an error in the future
+    "react/function-component-definition": "warn", // maybecome an error in the future
+    "react/jsx-no-bind": "warn", // maybecome an error in the future
+    "react/jsx-no-useless-fragment": "warn", // maybecome an error in the future
+    "react/no-children-prop": "warn", // maybecome an error in the future
+    "react/no-unknown-property": "warn", // maybecome an error in the future
+    "react/no-unstable-nested-components": "warn", // maybecome an error in the future
+    "react/no-unused-class-component-methods": "warn", // maybecome an error in the future
+    "spaced-comment": "warn", // maybecome an error in the future
+    "vars-on-top": "warn", // maybecome an error in the future
+    "react/jsx-indent": "warn", // why is vscode incorrectly autoindenting?
+    "react/jsx-closing-tag-location": "warn" // why is vscode incorrectly autoindenting?
   }
 }
diff --git a/src/components/CTPlayer/Player/index.js b/src/components/CTPlayer/Player/index.js
@@ -1,6 +1,5 @@
 import * as KeyCode from 'keycode-js';
 import React, { useEffect } from 'react';
-import { isMobile } from 'react-device-detect';
 import { connect } from 'dva'
 import {
     ErrorWrapper,
@@ -9,90 +8,69 @@ import {
 import Wrapper from '../Wrapper';
 import './index.scss';
 
-function Player(props) {
-    const { media, beginAt, allowScreenshot,
-        mediaId,
-        error,
-        screenshotActionElement,
-        dispatch,
-        isFullscreen} = props
-    const onKeyDown = (event) => {
-        const { keyCode,
-            //* metaKey
-        } = event;
-        switch (keyCode) {
-            // k or space - pause/play
-            case KeyCode.KEY_K:
-            case KeyCode.KEY_SPACE:
-                event.preventDefault();
-                dispatch({ type: 'watch/onPlayPauseClick' })
-                return;
-            // m - mute/unmute
-            case KeyCode.KEY_M:
-                event.preventDefault();
-                dispatch({ type: 'watch/media_mute' })
-                return;
-            // left arrow - rewind
-            case KeyCode.KEY_LEFT:
-                event.preventDefault();
-                dispatch({ type: 'watch/media_backward' })
-                return;
-            // right arrow - forward
-            case KeyCode.KEY_RIGHT:
-                event.preventDefault();
-                dispatch({ type: 'watch/media_forward' })
-                return;
+const Player = function(props) {
+  const { media, beginAt, allowScreenshot, mediaId, error, screenshotActionElement, dispatch, isFullscreen } = props;
+  const onKeyDown = (event) => {
+    const { keyCode,
+      //* metaKey
+    } = event;
+    switch (keyCode) {
+      // k or space - pause/play
+      case KeyCode.KEY_K:
+      case KeyCode.KEY_SPACE:
+        event.preventDefault();
+        dispatch({ type: 'watch/onPlayPauseClick' });
+        return;
+      // m - mute/unmute
+      case KeyCode.KEY_M:
+        event.preventDefault();
+        dispatch({ type: 'watch/media_mute' });
+        return;
+      // left arrow - rewind
+      case KeyCode.KEY_LEFT:
+        event.preventDefault();
+        dispatch({ type: 'watch/media_backward' });
+        return;
+      // right arrow - forward
+      case KeyCode.KEY_RIGHT:
+        event.preventDefault();
+        dispatch({ type: 'watch/media_forward' });
+        return;
 
-            // top arrow - forward
-            case KeyCode.KEY_UP:
-                event.preventDefault();
-                // player.volumeUp();
-                return;
+      // top arrow - forward
+      case KeyCode.KEY_UP:
+        event.preventDefault();
+        // player.volumeUp();
+        return;
 
-            // bottom arrow - forward
-            case KeyCode.KEY_DOWN:
-                event.preventDefault();
-                // player.volumeDown();
-                break;
+      // bottom arrow - forward
+      case KeyCode.KEY_DOWN:
+        event.preventDefault();
+        // player.volumeDown();
+        break;
 
-            default:
-        }
+      default:
     }
-    // watch, setMedia
-    useEffect(() => {
-        dispatch({
-            type: 'watch/setupEmbeddedMedia', payload: {
-                media, beginAt, mediaId,
-                allowScreenshot
-            }
-        })
-    }, [media])
+  };
+  // watch, setMedia
+  useEffect(() => {
+    dispatch({
+      type: 'watch/setupEmbeddedMedia', payload: {
+        media, beginAt, mediaId,
+        allowScreenshot
+      }
+    });
+  }, [media]);
 
-    if(error) {
-        return <ErrorWrapper error={error} />;
-    }
-    if(isFullscreen) {
-        return (
-          <div
-            className="ctp ct-player-con-fullscreen"
-            onKeyDown={onKeyDown}
-            tabIndex="0"
-          >
-            <div
-              className="ctp ct-player lg fill"
-            >
-              <ClassTranscribePlayer />
-              <Wrapper screenshotActionElement={screenshotActionElement} />
-            </div>
-          </div>
-        )
-    }
+  if (error) {
+    return <ErrorWrapper error={error} />;
+  }
+  if (isFullscreen) {
     return (
       <div
-        className="ctp ct-player-con"
+        className="ctp ct-player-con-fullscreen"
         onKeyDown={onKeyDown}
         tabIndex="0"
-        style={{height: '100%', width:'100%'}}
       >
         <div
           className="ctp ct-player lg fill"
@@ -101,7 +79,23 @@ function Player(props) {
           <Wrapper screenshotActionElement={screenshotActionElement} />
         </div>
       </div>
-  )
+    );
+  }
+  return (
+    <div
+      className="ctp ct-player-con"
+      onKeyDown={onKeyDown}
+      tabIndex="0"
+      style={{ height: '100%', width: '100%' }}
+    >
+      <div
+        className="ctp ct-player lg fill"
+      >
+        <ClassTranscribePlayer />
+        <Wrapper screenshotActionElement={screenshotActionElement} />
+      </div>
+    </div>
+  );
 }
 export default connect(({
     watch: { error, isFullscreen }

diff --git a/src/screens/Watch/Components/CTPlayer/player.jsx b/src/screens/Watch/Components/CTPlayer/player.jsx
@@ -1,31 +1,18 @@
-import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
-import { connect } from 'dva'
+import React, { useCallback } from 'react';
 
-import PlayerWrapper from './PlayerWrapper';
 import { isMobile } from 'react-device-detect';
-import { uEvent } from '../../Utils/UserEventController';
+import PlayerWrapper from './PlayerWrapper';
 import {
-    NORMAL_MODE,
-    PS_MODE,
-    NESTED_MODE /** THEATRE_MODE, */,
     CTP_PLAYING,
     CTP_LOADING,
     CTP_ENDED,
-    CTP_UP_NEXT,
     CTP_ERROR,
-    HIDE_TRANS,
 } from '../../Utils/constants.util';
-import {
-    getVideoStyle
-} from '../../Utils';
-import {
-    ClassTranscribePlayer
-} from '../CTPlayer'
 
 const Video = React.memo((props) => {
-
     const { id = 1, videoRef, path, dispatch, isSwitched, embedded, videoStyle} = props;
-    const isPrimary = (id == 1);
+    const isPrimary = (id === 1);
+    // eslint-disable-next-line no-console
     console.log('Render - Video', path);
     const onDurationChange = useCallback((e) => {
         if (!isPrimary) return;
@@ -108,36 +95,33 @@ const Video = React.memo((props) => {
 
     // const { videoStyle } = getVideoStyle({ClassTranscribePlayer});
     return (<div className={embedded ? "ctp ct-video-con normal" : "ct-video-container"}>
-        {embedded ?
-            null : <PlayerWrapper isPrimary={isPrimary && !isSwitched || !isPrimary && isSwitched} />
-        }
-        <video
-            playsInline
-            autoPlay={isMobile}
-            className="ct-video"
-            id={"ct-video-" + id}
-            ref={videoRef}
-            muted={!isPrimary ? true : undefined}
-            onDurationChange={onDurationChange}
-            onTimeUpdate={onTimeUpdate}
-            onProgress={onProgress}
-            onPause={onPause}
-            onCanPlay={onCanPlayPri}
-            onLoadStart={onLoadStartPri}
-            onLoadedData={onLoadedDataPri}
-            onWaiting={onWaitingPri}
-            onPlaying={onPlayingPri}
-            onEnded={onEndedPri}
-            onSeeking={onSeekingPri}
-            onSeeked={onSeekedPri}
-            onError={onErrorPri}
-            style={videoStyle}
-        >
-            {path && <source src={path} type="video/mp4" />}
-      Your browser does not support video tag.
-    </video>
+      {embedded ?
+            null : <PlayerWrapper isPrimary={isPrimary && !isSwitched || !isPrimary && isSwitched} />}
+      <video
+        playsInline
+        autoPlay={isMobile}
+        className="ct-video"
+        id={`ct-video-${ id}`}
+        ref={videoRef}
+        muted={!isPrimary ? true : undefined}
+        onDurationChange={onDurationChange}
+        onTimeUpdate={onTimeUpdate}
+        onProgress={onProgress}
+        onPause={onPause}
+        onCanPlay={onCanPlayPri}
+        onLoadStart={onLoadStartPri}
+        onLoadedData={onLoadedDataPri}
+        onWaiting={onWaitingPri}
+        onPlaying={onPlayingPri}
+        onEnded={onEndedPri}
+        onSeeking={onSeekingPri}
+        onSeeked={onSeekedPri}
+        onError={onErrorPri}
+        style={videoStyle}
+      >
+        {path && <source src={path} type="video/mp4" />}
+        Your browser does not support video tag.
+      </video>
     </div>)
-}, (prevProps, nextProps) => {
-    return prevProps.path === nextProps.path && prevProps.isSwitched === nextProps.isSwitched && prevProps.videoStyle === nextProps.videoStyle;
-});
+}, (prevProps, nextProps) => prevProps.path === nextProps.path && prevProps.isSwitched === nextProps.isSwitched && prevProps.videoStyle === nextProps.videoStyle);
 export default Video;