Add material player

package.json

@@ -13,6 +13,7 @@
         "@types/node": "^14.14.21",
         "@types/react": "^16.9.53",
         "@types/react-dom": "^16.9.8",
+        "material-ui-audio-player": "^1.5.3",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-scripts": "4.0.1",

src/components/TuneList.tsx

@@ -10,7 +10,7 @@ import {
 import React, { useEffect, useState } from "react";
 import Tune from "../models/tune";
 import TuneTitle from "./TuneTitle";
-import YouTubePlayer from "./YouTubePlayer";
+import TunePlayer from "./TunePlayer";
 
 const MixList = () => {
     const [tunes, setTunes] = useState<Tune[]>([]);
@@ -51,7 +51,7 @@ const MixList = () => {
                                 <TuneTitle url={tune.title} />
                             </TableCell>
                             <TableCell>
-                                <YouTubePlayer
+                                <TunePlayer
                                     key={tune.id}
                                     index={tune.id}
                                     videoId={tune.videoId}

src/components/TunePlayer.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { createMuiTheme, makeStyles, ThemeProvider } from "@material-ui/core";
+import AudioPlayer from "material-ui-audio-player";
+
+const muiTheme = createMuiTheme({});
+
+const useStyles = makeStyles((theme: any) => {
+    return {
+        root: {
+            [theme.breakpoints.down("sm")]: {
+                width: "100%",
+            },
+        },
+        loopIcon: {
+            color: "#3f51b5",
+            "&.selected": {
+                color: "#0921a9",
+            },
+            "&:hover": {
+                color: "#7986cb",
+            },
+            [theme.breakpoints.down("sm")]: {
+                display: "none",
+            },
+        },
+        playIcon: {
+            color: "#f50057",
+            "&:hover": {
+                color: "#ff4081",
+            },
+        },
+        volumeIcon: {
+            color: "rgba(0, 0, 0, 0.54)",
+        },
+        volumeSlider: {
+            color: "black",
+        },
+        progressTime: {
+            color: "rgba(0, 0, 0, 0.54)",
+        },
+        mainSlider: {
+            color: "#3f51b5",
+            "& .MuiSlider-rail": {
+                color: "#7986cb",
+            },
+            "& .MuiSlider-track": {
+                color: "#3f51b5",
+            },
+            "& .MuiSlider-thumb": {
+                color: "#303f9f",
+            },
+        },
+    };
+});
+
+const TunePlayer = (props: { videoId: string; index: number }) => {
+    return (
+        <ThemeProvider theme={muiTheme}>
+            <AudioPlayer
+                useStyles={useStyles}
+                rounded={true}
+                elevation={100}
+                width="100%"
+                volume={false}
+                variation="secondary"
+                spacing={3}
+                download={false}
+                autoplay={false}
+                order="standart"
+                loop={false}
+                src={`https://cdn.podnoms.com/fmstuff/100songs/audio/working/${props.videoId}.mp3`}
+            />
+        </ThemeProvider>
+    );
+};
+
+export default TunePlayer;

src/components/YouTubePlayer.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-const YouTubePlayer = (props: { videoId: string; index: number }) => {
-    return (
-        <audio
-            controls
-            src={`https://cdn.podnoms.com/fmstuff/100songs/audio/working/${props.videoId}.mp3`}
-        />
-    );
-};
-export default YouTubePlayer;

yarn.lock

@@ -3296,6 +3296,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -7272,6 +7277,13 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-ui-audio-player@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/material-ui-audio-player/-/material-ui-audio-player-1.5.3.tgz#fc2c3008406e7b7f7d5d3aaccfbb9cad766516eb"
+  integrity sha512-7lBN0agmApNh3ZjnDs3Esb5ljSh8PPOzkpyLR8l+iW8tyR27rVw6JZlI8mbLPfSQ32dP2AtBEkAuJ3whBb6erQ==
+  dependencies:
+    classnames "^2.2.6"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"