fix: prettier format all elements files

Author: luwes

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,8 +1,8 @@
 ---
-name: "🐛 Bug Report"
+name: '🐛 Bug Report'
 about: Report a reproducible bug or regression.
-title: "Bug: "
-labels: "bug, Status: Unconfirmed"
+title: 'Bug: '
+labels: 'bug, Status: Unconfirmed'
 ---
 
 <!--

.github/ISSUE_TEMPLATE/docs_request.md

@@ -1,8 +1,8 @@
 ---
-name: "📄 Docs Request"
+name: '📄 Docs Request'
 about: Report a discrepancy in or an improvement to the docs.
-title: "Docs: "
-labels: "documentation"
+title: 'Docs: '
+labels: 'documentation'
 ---
 
 <!--
@@ -22,9 +22,9 @@ labels: "documentation"
 
 # Is this a discrepancy or an improvement?
 
-<!-- 
+<!--
   Uncomment all that apply
-  
+
 - discrepancy
 - improvement
 -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,8 +1,8 @@
 ---
-name: "🎥 Feature Request"
+name: '🎥 Feature Request'
 about: Create a feature request for one or more Mux Elements, or for a new Mux Element you'd like to see.
-title: "Feature: "
-labels: "enhancement"
+title: 'Feature: '
+labels: 'enhancement'
 ---
 
 <!--

.prettierignore

@@ -0,0 +1,5 @@
+build
+coverage
+dist
+node_modules
+examples

.prettierrc

@@ -1,5 +1,13 @@
 {
-  "trailingComma": "es5",
+  "printWidth": 120,
+  "singleQuote": true,
   "tabWidth": 2,
-  "singleQuote": true
+  "useTabs": false,
+  "semi": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
 }

codecov.yml

@@ -35,7 +35,7 @@ coverage:
 
 # adding Flags to your `layout` configuration to show up in the PR comment
 comment:
-  layout: "reach, diff, flags, files"
+  layout: 'reach, diff, flags, files'
   behavior: default
   require_changes: false
   require_base: yes

packages/mux-audio-react/README.md

@@ -30,13 +30,13 @@ npm i @mux-elements/mux-audio-react
 Then, import the library into your application with either `import` or `require`:
 
 ```js
-import "@mux-elements/mux-audio-react";
+import '@mux-elements/mux-audio-react';
 ```
 
 or
 
 ```js
-require("@mux-elements/mux-audio-react");
+require('@mux-elements/mux-audio-react');
 ```
 
 ## Features and benefits
@@ -59,12 +59,12 @@ const MuxAudioExample = () => {
     <div>
       <h1>Simple MuxAudio Example</h1>
       <MuxAudio
-        style={{ height: "100%", maxWidth: "100%" }}
+        style={{ height: '100%', maxWidth: '100%' }}
         playbackId="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
         metadata={{
-          video_id: "audio-id-123456",
-          video_title: "Super Interesting Audio",
-          viewer_user_id: "user-id-bc-789",
+          video_id: 'audio-id-123456',
+          video_title: 'Super Interesting Audio',
+          viewer_user_id: 'user-id-bc-789',
         }}
         envKey="YOUR_MUX_DATA_ENV_KEY"
         streamType="on-demand"
@@ -101,9 +101,9 @@ If you prefer to use the in-code MSE-based engine (currently hls.js) whenever po
 <MuxAudio
   playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"
   metadata={{
-    video_id: "audio-id-123456",
-    video_title: "Super Interesting Audio",
-    viewer_user_id: "user-id-bc-789",
+    video_id: 'audio-id-123456',
+    video_title: 'Super Interesting Audio',
+    viewer_user_id: 'user-id-bc-789',
   }}
   envKey="YOUR_MUX_DATA_ENV_KEY"
   preferMse
@@ -119,9 +119,9 @@ By default `<MuxAudio/>` will try to figure out the type of media you're trying
 <MuxAudio
   src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
   metadata={{
-    video_id: "audio-id-123456",
-    video_title: "Super Interesting Audio",
-    viewer_user_id: "user-id-bc-789",
+    video_id: 'audio-id-123456',
+    video_title: 'Super Interesting Audio',
+    viewer_user_id: 'user-id-bc-789',
   }}
   envKey="YOUR_MUX_DATA_ENV_KEY"
   controls
@@ -135,9 +135,9 @@ Sometimes, however, your `src` URL may not have an identifiable extension. In th
   src="https://stream.notmux.com/path/to/an/hls/source/playlist"
   type="application/vnd.apple.mpegurl"
   metadata={{
-    video_id: "video-id-123456",
-    video_title: "Super Interesting Video",
-    viewer_user_id: "user-id-bc-789",
+    video_id: 'video-id-123456',
+    video_title: 'Super Interesting Video',
+    viewer_user_id: 'user-id-bc-789',
   }}
   envKey="YOUR_MUX_DATA_ENV_KEY"
   controls
@@ -151,9 +151,9 @@ Or, for convenience, we also support the shorthand `type="hls`:
   src="https://stream.notmux.com/path/to/an/hls/source/playlist"
   type="hls"
   metadata={{
-    video_id: "audio-id-123456",
-    video_title: "Super Interesting Audio",
-    viewer_user_id: "user-id-bc-789",
+    video_id: 'audio-id-123456',
+    video_title: 'Super Interesting Audio',
+    viewer_user_id: 'user-id-bc-789',
   }}
   envKey="YOUR_MUX_DATA_ENV_KEY"
   controls

packages/mux-audio-react/src/env.ts

@@ -1,13 +1,13 @@
-export const isMaybeBrowser = () => typeof window != "undefined";
+export const isMaybeBrowser = () => typeof window != 'undefined';
 // @ts-ignore
-export const isMaybeServer = () => typeof global != "undefined";
+export const isMaybeServer = () => typeof global != 'undefined';
 
 const getEnvPlayerVersion = () => {
   try {
     // @ts-ignore
     return PLAYER_VERSION as string;
   } catch {}
-  return "UNKNOWN";
+  return 'UNKNOWN';
 };
 
 const player_version: string = getEnvPlayerVersion();

packages/mux-audio-react/src/index.tsx

@@ -1,6 +1,6 @@
-import useCombinedRefs from "./use-combined-refs";
-import React, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
+import useCombinedRefs from './use-combined-refs';
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   allMediaTypes,
   initialize,
@@ -12,87 +12,74 @@ import {
   toMuxVideoURL,
   PlaybackEngine,
   generatePlayerInitTime,
-} from "@mux-elements/playback-core";
-import { getPlayerVersion } from "./env";
+} from '@mux-elements/playback-core';
+import { getPlayerVersion } from './env';
 
 export type Props = Omit<
-  React.DetailedHTMLProps<
-    React.AudioHTMLAttributes<HTMLAudioElement>,
-    HTMLAudioElement
-  >,
-  "autoPlay"
+  React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>,
+  'autoPlay'
 > &
   MuxMediaProps;
 
 const playerSoftwareVersion = getPlayerVersion();
-const playerSoftwareName = "mux-audio-react";
+const playerSoftwareName = 'mux-audio-react';
 
-const MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>(
-  (props, ref) => {
-    const {
-      envKey,
-      debug,
-      beaconDomain,
-      playbackId,
-      preferMse,
-      type,
-      streamType,
-      startTime,
-      src: outerSrc,
-      children,
-      autoPlay,
-      ...restProps
-    } = props;
+const MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>((props, ref) => {
+  const {
+    envKey,
+    debug,
+    beaconDomain,
+    playbackId,
+    preferMse,
+    type,
+    streamType,
+    startTime,
+    src: outerSrc,
+    children,
+    autoPlay,
+    ...restProps
+  } = props;
 
-    const [playerInitTime] = useState(generatePlayerInitTime());
+  const [playerInitTime] = useState(generatePlayerInitTime());
 
-    const [src, setSrc] = useState<MuxMediaProps["src"]>(
-      toMuxVideoURL(playbackId) ?? outerSrc
-    );
+  const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(playbackId) ?? outerSrc);
 
-    const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined);
-    const innerMediaElRef = useRef<HTMLAudioElement>(null);
+  const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined);
+  const innerMediaElRef = useRef<HTMLAudioElement>(null);
 
-    const mediaElRef = useCombinedRefs(innerMediaElRef, ref);
-    const updateAutoplayRef = useRef<UpdateAutoplay | undefined>(undefined);
-    const [updateAutoplay, setUpdateAutoplay] = useState(() => (x: any) => {});
+  const mediaElRef = useCombinedRefs(innerMediaElRef, ref);
+  const updateAutoplayRef = useRef<UpdateAutoplay | undefined>(undefined);
+  const [updateAutoplay, setUpdateAutoplay] = useState(() => (x: any) => {});
 
-    useEffect(() => {
-      const src = toMuxVideoURL(playbackId) ?? outerSrc;
-      setSrc(src);
-    }, [outerSrc, playbackId]);
+  useEffect(() => {
+    const src = toMuxVideoURL(playbackId) ?? outerSrc;
+    setSrc(src);
+  }, [outerSrc, playbackId]);
 
-    useEffect(() => {
-      const propsWithState = {
-        ...props,
-        src,
-        playerInitTime,
-        playerSoftwareName,
-        playerSoftwareVersion,
-        autoplay: autoPlay,
-      };
-      const nextPlaybackEngineRef = initialize(
-        propsWithState,
-        mediaElRef.current,
-        playbackEngineRef.current
-      );
-      playbackEngineRef.current = nextPlaybackEngineRef;
-      setUpdateAutoplay(() =>
-        setupAutoplay(mediaElRef.current, autoPlay, playbackEngineRef.current)
-      );
-    }, [src]);
+  useEffect(() => {
+    const propsWithState = {
+      ...props,
+      src,
+      playerInitTime,
+      playerSoftwareName,
+      playerSoftwareVersion,
+      autoplay: autoPlay,
+    };
+    const nextPlaybackEngineRef = initialize(propsWithState, mediaElRef.current, playbackEngineRef.current);
+    playbackEngineRef.current = nextPlaybackEngineRef;
+    setUpdateAutoplay(() => setupAutoplay(mediaElRef.current, autoPlay, playbackEngineRef.current));
+  }, [src]);
 
-    useEffect(() => {
-      updateAutoplay(autoPlay);
-    }, [autoPlay]);
+  useEffect(() => {
+    updateAutoplay(autoPlay);
+  }, [autoPlay]);
 
-    return (
-      <audio ref={mediaElRef} {...restProps}>
-        {children}
-      </audio>
-    );
-  }
-);
+  return (
+    <audio ref={mediaElRef} {...restProps}>
+      {children}
+    </audio>
+  );
+});
 
 MuxAudio.propTypes = {
   envKey: PropTypes.string,

packages/mux-audio-react/src/use-combined-refs.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, MutableRefObject } from "react";
+import { useEffect, useRef, MutableRefObject } from 'react';
 
 type Maybe<T> = T | null | undefined;
 type RefCb<T> = (instance: Maybe<T>) => void;
@@ -15,7 +15,7 @@ export const useCombinedRefs: useCombinedRefs = (...refs) => {
     refs.forEach((ref) => {
       if (!ref) return;
 
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(targetRef.current);
       } else {
         ref.current = targetRef.current;

packages/mux-audio/README.md

@@ -30,13 +30,13 @@ npm i @mux-elements/mux-audio
 Then, import the library into your application with either `import` or `require`:
 
 ```js
-import "@mux-elements/mux-audio";
+import '@mux-elements/mux-audio';
 ```
 
 or
 
 ```js
-require("@mux-elements/mux-audio");
+require('@mux-elements/mux-audio');
 ```
 
 ## CDN option
@@ -64,10 +64,7 @@ interface MuxAudioHTMLAttributes<T> extends React.AudioHTMLAttributes<T> {
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      "mux-audio": React.DetailedHTMLProps<
-        MuxAudioHTMLAttributes<HTMLAudioElement>,
-        HTMLAudioElement
-      >;
+      'mux-audio': React.DetailedHTMLProps<MuxAudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>;
     }
   }
 }

packages/mux-audio/src/CustomAudioElement.d.ts

@@ -1,17 +1,11 @@
 /** @TODO Add type defs to custom-video-element directly */
-export default class CustomAudioElement<
-    V extends HTMLAudioElement = HTMLAudioElement
-  >
+export default class CustomAudioElement<V extends HTMLAudioElement = HTMLAudioElement>
   // NOTE: "lying" here since we programmatically merge props/methods from HTMLAudioElement into the CustomAudioElement's prototype in an attempt to make it "look like"
   // it extends an HTMLAudioElement.
   extends HTMLAudioElement
   implements HTMLAudioElement
 {
   static readonly observedAttributes: Array<string>;
   readonly nativeEl: V;
-  attributeChangedCallback(
-    attrName: string,
-    oldValue?: string | null,
-    newValue?: string | null
-  ): void;
+  attributeChangedCallback(attrName: string, oldValue?: string | null, newValue?: string | null): void;
 }