reafctor: normalize component formatting (#2082)

* refactor: move/rename BanUserButton file

* refactor: move/rename Chart file

* refactor: update generic component filenames to PascalCase

* refactor: update config component filenames to PascalCase

* refactor: update AdminLayout component filename to PascalCase

* refactor: update/move VideoJS component

* chore(eslint): disable bad react/require-default-props rule

* refactor: normalize ActionButton component

* refactor: normalize ActionButtonRow component

* refactor: normalize FollowButton component

* refactor: normalize NotifyButton component

* refactor: normalize ChatActionMessage component

* refactor: normalize ChatContainer component

* refactor: normalize ChatJoinMessage component

* refactor: normalize ChatModerationActionMenu component

* refactor: normalize ChatModerationDetailsModal component

* refactor: normalize ChatModeratorNotification component

* refactor: normalize ChatSocialMessage component

* refactor: normalize ChatSystemMessage component

* refactor: normalize ChatTextField component

* refactor: normalize ChatUserBadge component

* refactor: normalize ChatUserMessage component

* refactor: normalize ContentHeader component

* refactor: normalize OwncastLogo component

* refactor: normalize UserDropdown component

* chore(eslint): modify react/function-component-definition rule

* refactor: normalize CodecSelector component

* refactor: update a bunch of functional components using eslint

* refactor: update a bunch of functional components using eslint, pt2

* refactor: update a bunch of functional components using eslint, pt3

* refactor: replace all component->component default imports with named imports

* refactor: replace all component-stories->component default imports with named imports

* refactor: remove default exports from most components

* chore(eslint): add eslint config files for the components and pages dirs

* fix: use-before-define error in ChatContainer

* Fix ChatContainer import

* Only process .tsx files in Next builds

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
-import OwncastPlayer from './OwncastPlayer';
+import { OwncastPlayer } from './OwncastPlayer';
 
 const streams = {
   DemoServer: `https://watch.owncast.online/hls/stream.m3u8`,

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { FC, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHotkeys } from 'react-hotkeys-hook';
-import VideoJS from '../player';
+import { VideoJS } from '../VideoJS/VideoJS';
 import ViewerPing from '../viewer-ping';
-import VideoPoster from '../VideoPoster/VideoPoster';
+import { VideoPoster } from '../VideoPoster/VideoPoster';
 import { getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
 import { isVideoPlayingAtom, clockSkewAtom } from '../../stores/ClientConfigStore';
 import PlaybackMetrics from '../metrics/playback';
@@ -19,10 +19,10 @@ let playbackMetrics = null;
 let latencyCompensator = null;
 let latencyCompensatorEnabled = false;
 
-interface Props {
+export type OwncastPlayerProps = {
   source: string;
   online: boolean;
-}
+};
 
 async function getVideoSettings() {
   let qualities = [];
@@ -36,9 +36,8 @@ async function getVideoSettings() {
   return qualities;
 }
 
-export default function OwncastPlayer(props: Props) {
+export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
   const playerRef = React.useRef(null);
-  const { source, online } = props;
   const [videoPlaying, setVideoPlaying] = useRecoilState<boolean>(isVideoPlayingAtom);
   const clockSkew = useRecoilValue<Number>(clockSkewAtom);
 
@@ -302,4 +301,5 @@ export default function OwncastPlayer(props: Props) {
       </div>
     </div>
   );
-}
+};
+export default OwncastPlayer;

web/components/video/VideoJS/VideoJS.scss

@@ -38,7 +38,7 @@
 }
 
 .vjs-airplay .vjs-icon-placeholder::before {
-  content: url('./airplay.png');
+  content: url('../airplay.png');
 }
 
 .vjs-quality-selector .vjs-icon-placeholder {

web/components/video/VideoJS/VideoJS.tsx

@@ -1,21 +1,20 @@
-import React from 'react';
+import React, { FC } from 'react';
 import videojs from 'video.js';
-import s from './Player.module.scss';
+import styles from './VideoJS.module.scss';
 
 require('video.js/dist/video-js.css');
 
 // TODO: Restore volume that was saved in local storage.
 // import { getLocalStorage, setLocalStorage } from '../../utils/helpers.js';
 // import { PLAYER_VOLUME, URL_STREAM } from '../../utils/constants.js';
-interface Props {
+export type VideoJSProps = {
   options: any;
   onReady: (player: videojs.Player, vjsInstance: videojs) => void;
-}
+};
 
-export function VideoJS(props: Props) {
+export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
   const videoRef = React.useRef(null);
   const playerRef = React.useRef(null);
-  const { options, onReady } = props;
 
   React.useEffect(() => {
     // Make sure Video.js player is only initialized once
@@ -52,10 +51,13 @@ export function VideoJS(props: Props) {
   return (
     <div data-vjs-player>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-      <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player} vjs-owncast`} />
+      <video
+        ref={videoRef}
+        className={`video-js vjs-big-play-centered ${styles.player} vjs-owncast`}
+      />
     </div>
   );
-}
+};
 
 export default VideoJS;
 

web/components/video/VideoPoster/VideoPoster.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import VideoPoster from './VideoPoster';
+import { VideoPoster } from './VideoPoster';
 
 export default {
   title: 'owncast/Player/Video poster',

web/components/video/VideoPoster/VideoPoster.tsx

@@ -1,18 +1,16 @@
-import { useEffect, useState } from 'react';
-import CrossfadeImage from '../../ui/CrossfadeImage/CrossfadeImage';
-import s from './VideoPoster.module.scss';
+import { FC, useEffect, useState } from 'react';
+import { CrossfadeImage } from '../../ui/CrossfadeImage/CrossfadeImage';
+import styles from './VideoPoster.module.scss';
 
 const REFRESH_INTERVAL = 20_000;
 
-interface Props {
+export type VideoPosterProps = {
   initialSrc: string;
   src: string;
   online: boolean;
-}
-
-export default function VideoPoster(props: Props) {
-  const { online, initialSrc, src: base } = props;
+};
 
+export const VideoPoster: FC<VideoPosterProps> = ({ online, initialSrc, src: base }) => {
   let timer: ReturnType<typeof setInterval>;
   const [src, setSrc] = useState(initialSrc);
   const [duration, setDuration] = useState('0s');
@@ -28,7 +26,7 @@ export default function VideoPoster(props: Props) {
   }, []);
 
   return (
-    <div className={s.poster}>
+    <div className={styles.poster}>
       {!online && <img src={initialSrc} alt="logo" />}
 
       {online && (
@@ -42,4 +40,4 @@ export default function VideoPoster(props: Props) {
       )}
     </div>
   );
-}
+};

web/components/video/settings-menu.ts

@@ -1,9 +1,4 @@
-export default function createVideoSettingsMenuButton(
-  player,
-  videojs,
-  qualities,
-  latencyItemPressed,
-): any {
+export function createVideoSettingsMenuButton(player, videojs, qualities, latencyItemPressed): any {
   const VjsMenuItem = videojs.getComponent('MenuItem');
   const MenuItem = videojs.getComponent('MenuItem');
   const MenuButtonClass = videojs.getComponent('MenuButton');
@@ -111,3 +106,4 @@ export default function createVideoSettingsMenuButton(
   // eslint-disable-next-line consistent-return
   return menuButton;
 }
+export default createVideoSettingsMenuButton;