update & fix

src/App.scss

@@ -109,8 +109,6 @@ input {
   display: flex;
   justify-content: space-between;
   background: #000000;
-  -webkit-box-shadow: 0.2em 0.2em 5px rgba(122, 122, 122, 0.37);
-  box-shadow: 0.2em 0.2em 5px rgba(122, 122, 122, 0.376);
   h3 {
     margin-top: 30px;
   }
@@ -138,6 +136,7 @@ main {
   flex-direction: row;
   min-height: 90vh;
   @media (max-width: $breakpoint-tablet) {
+    min-height: 80vh;
   }
   @media(max-width: $breakpoint-mobile) {
     flex-direction: column;
@@ -349,9 +348,12 @@ footer {
 
 .Users {
   margin-top: 40px;
-  margin-right: 100px;
+  margin-right: 10px;
   display: flex;
   flex-wrap: wrap;
+  @media (max-width: $breakpoint-mobile) {
+    margin: 5px;
+  }
 }
 
 .hello-column {

src/pages/my-tracks/my-tracks.js

@@ -1,6 +1,6 @@
 import {SortableContainer,SortableElement} from "react-sortable-hoc";
 import {arrayMoveImmutable} from 'array-move';
-import {useState, useEffect, useRef, useCallback} from "react";
+import {useEffect, useRef, useCallback} from "react";
 import {connect} from "react-redux";
 import {CTrack} from "../track";
 import {CPlaylistDropZone} from "../tools";
@@ -60,8 +60,6 @@ export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
 
 
 
-
-//
 // const MyTracks = ({playlist={}}) => {
 //     const{name, tracks=[]} = playlist
 //     return (

src/pages/visualiser/visualiser.js

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import AudioSpectrum from 'react-audio-spectrum'
-import {audio} from "../../reducers/playerReducer";
-
-import './visualiser.css';
-
-const onInputChange = (e) => {
-    var sound = document.getElementById('sound');
-    sound.src = URL.createObjectURL(e.target.files[0]);
-}
-
-const getLocalSettings = () => ({
-    capColor: localStorage.getItem('capColor') || ' ',
-    capHeight: Number(localStorage.getItem('capHeight') || 4),
-    meterWidth: Number(localStorage.getItem('meterWidth') || 3),
-    meterCount: Number(localStorage.getItem('meterCount') || 512),
-    gap: Number(localStorage.getItem('gap') || 5),
-    meterColor1: localStorage.getItem('meterColor1') || '#f00',
-    meterColor2: localStorage.getItem('meterColor2') || '#0C70FD',
-    meterColor3: localStorage.getItem('meterColor3') || '#0CFD70',
-})
-
-
-export const Visualiser = () => {
-    const [defaultSettings] = useState(getLocalSettings)
-
-    const [capColor, setCapColor] = useState(defaultSettings.capColor)
-    const [capHeight, setCapHeight] = useState(defaultSettings.capHeight)
-    const [meterWidth, setMeterWidth] = useState(defaultSettings.meterWidth)
-    const [meterCount, setMeterCount] = useState(defaultSettings.meterCount)
-    const [gap, setGap] = useState(defaultSettings.gap)
-    const [meterColor1, setMeterColor1] = useState(defaultSettings.meterColor1)
-    const [meterColor2, setMeterColor2] = useState(defaultSettings.meterColor2)
-    const [meterColor3, setMeterColor3] = useState(defaultSettings.meterColor3)
-    return (
-        <div className="Visualiser">
-
-            <div style={{
-                display: 'flex',
-            }}>
-                <div className="setting-section file">
-                    <input type="file" id="input" accept="audio/*" onChange={onInputChange} />
-                    <audio id="sound" controls></audio>
-                </div>
-
-            </div>
-            <AudioSpectrum
-                id="audio-canvas"
-                style={{
-                    padding: 10
-                }}
-                height={500}
-                width={900}
-                audioId={'sound'}
-                capColor={capColor}
-                capHeight={capHeight}
-                meterWidth={meterWidth}
-                meterCount={meterCount}
-                meterColor={[
-                    {stop: 0, color: meterColor1},
-                    {stop: 0.5, color: meterColor2},
-                    {stop: 1, color: meterColor3}
-                ]}
-                gap={gap}
-            />
-        </div>
-    );
-}
-

src/reducers/playerReducer.js

@@ -2,9 +2,9 @@ import {backURL} from "../actions";
 import { select, put, takeEvery } from "redux-saga/effects";
 import {store} from "./store";
 
-import React, {useEffect, useRef, useState} from 'react';
-import AudioSpectrum from 'react-audio-spectrum'
-import {connect} from "react-redux";
+//import React, {useEffect, useRef, useState} from 'react';
+// import AudioSpectrum from 'react-audio-spectrum'
+
 
 
 
@@ -248,13 +248,11 @@ export function* setPlaylistWatcher() {
 
 
 
-//
+// Visualiser (not working)
 // const onInputChange = (e) => {
 //     var sound = document.getElementById('sound');
 //     sound.src = URL.createObjectURL(e.target.files[0]);
 // }
-
-//
 // export const Visualiser = () => {
 //
 //     const track = useRef(audio || {})