removed audiplayer

package.json

@@ -14,14 +14,14 @@
     "url": "https://github.com/muerwre/my-empty-react-project"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-rc.1",
-    "@babel/preset-env": "^7.0.0-rc.1",
+    "@babel/cli": "^7.6.3",
+    "@babel/preset-env": "^7.6.3",
     "@babel/types": "7.5.5",
     "@types/react-router": "^5.0.3",
     "autoresponsive-react": "^1.1.31",
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -39,21 +39,20 @@
     "prettier": "^1.18.2",
     "resolve-url-loader": "^3.0.1",
     "style-loader": "^0.21.0",
-    "ts-node": "^8.0.1",
-    "typescript": "^3.2.4",
+    "ts-node": "^8.4.1",
+    "typescript": "^3.6.4",
     "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2"
   },
   "license": "MIT",
   "dependencies": {
-    "@hot-loader/react-dom": "^16.8.1",
+    "@hot-loader/react-dom": "^16.10.2",
     "@types/classnames": "^2.2.7",
-    "@types/node": "^11.9.0",
-    "@types/ramda": "^0.26.19",
+    "@types/node": "^11.13.22",
+    "@types/ramda": "^0.26.29",
     "@types/react": "16.8.23",
-    "@types/redux-saga": "^0.10.5",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",
     "axios": "^0.18.0",
@@ -61,12 +60,12 @@
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^0.1.9",
     "connected-react-router": "^6.3.2",
-    "date-fns": "^2.0.0-alpha.27",
-    "dotenv": "^8.0.0",
+    "date-fns": "^2.4.1",
+    "dotenv": "^8.1.0",
     "dotenv-webpack": "^1.7.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.1",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint-config-prettier": "^6.4.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
     "eslint-import-resolver-typescript": "^1.1.1",
     "eslint-import-resolver-webpack": "^0.9.0",
@@ -74,22 +73,23 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^1.7.0",
     "flexbin": "^0.2.0",
-    "history": "^4.7.2",
+    "history": "^4.10.1",
     "http-errors": "~1.6.2",
-    "less": "^3.8.1",
+    "less": "^3.10.3",
     "less-middleware": "~2.2.1",
     "lodash": "^4.17.10",
     "node-sass": "^4.11.0",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
     "react": "16.8.6",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.10.2",
     "react-grid-layout": "^0.16.6",
-    "react-hot-loader": "^4.1.1",
+    "react-hot-loader": "^4.12.15",
+    "react-jplayer": "^7.2.0",
     "react-layout-pack": "^0.2.3",
     "react-packery-component": "^1.0.2",
     "react-redux": "^6.0.1",
@@ -100,15 +100,15 @@
     "react-stack-grid": "^0.7.1",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",
-    "redux-saga": "^1.0.5",
+    "redux-saga": "^1.1.1",
     "reduxsauce": "^1.0.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^7.3.1",
     "sass-resources-loader": "^2.0.0",
     "scrypt": "^6.0.3",
     "throttle-debounce": "^2.1.0",
-    "tslint": "^5.18.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "tslint-react": "^4.0.0",
+    "tslint": "^5.20.0",
+    "tslint-config-airbnb": "^5.11.2",
+    "tslint-react": "^4.1.0",
     "tslint-react-hooks": "^2.2.1",
     "tt-react-custom-scrollbars": "latest",
     "uuid4": "^1.1.4"

src/components/media/AudioPlayer/index.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { AUDIO_PLAYER_OPTIONS } from '~/redux/player/constants';
+
+import JPlayer, {
+  initializeOptions,
+  Gui,
+  SeekBar,
+  BufferBar,
+  Poster,
+  Audio,
+  Title,
+  FullScreen,
+  Mute,
+  Play,
+  PlayBar,
+  Repeat,
+  VolumeBar,
+  Duration,
+  CurrentTime,
+  Download,
+  BrowserUnsupported,
+} from 'react-jplayer';
+
+initializeOptions(AUDIO_PLAYER_OPTIONS);
+
+export const AudioPlayer = () => (
+  <JPlayer id={AUDIO_PLAYER_OPTIONS.id} className="jp-sleek">
+    <Audio />
+    <Gui>
+      <div className="jp-controls jp-icon-controls">
+        <Play>
+          <i className="fa">{/* Icon set in css */}</i>
+        </Play>
+        <Repeat>
+          <i className="fa fa-repeat" />
+        </Repeat>
+        <div className="jp-progress">
+          <SeekBar>
+            <BufferBar />
+            <PlayBar />
+            <CurrentTime />
+            <Duration />
+          </SeekBar>
+        </div>
+        <div className="jp-volume-container">
+          <Mute>
+            <i className="fa">{/* Icon set in css */}</i>
+          </Mute>
+          <div className="jp-volume-slider">
+            <div className="jp-volume-bar-container">
+              <VolumeBar />
+            </div>
+          </div>
+        </div>
+        <FullScreen>
+          <i className="fa fa-expand" />
+        </FullScreen>
+        <Download>
+          <i className="fa fa-download" />
+        </Download>
+        <div className="jp-title-container">
+          <Poster />
+          <Title />
+        </div>
+      </div>
+      <BrowserUnsupported />
+    </Gui>
+  </JPlayer>
+);
+
+export default AudioPlayer;

src/redux/player/constants.ts

@@ -0,0 +1,14 @@
+export const AUDIO_PLAYER_OPTIONS = {
+  id: 'AudioPlayer',
+  keyEnabled: true,
+  verticalVolume: true,
+  media: {
+    title: 'Bubble',
+    artist: 'Miaow',
+    sources: {
+      m4a: 'http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a',
+      oga: 'http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg',
+    },
+    free: true,
+  },
+};

src/redux/player/reducer.ts

@@ -0,0 +1,3 @@
+import { reducer } from 'react-jplayer';
+
+export default reducer;

src/redux/store.ts

@@ -19,6 +19,8 @@ import flowSaga from '~/redux/flow/sagas';
 import uploadReducer, { IUploadState } from '~/redux/uploads/reducer';
 import uploadSaga from '~/redux/uploads/sagas';
 
+import playerReducer from '~/redux/player/reducer';
+
 import { IAuthState } from '~/redux/auth/types';
 
 import modalReducer, { IModalState } from '~/redux/modal/reducer';
@@ -36,6 +38,7 @@ export interface IState {
   node: INodeState;
   uploads: IUploadState;
   flow: IFlowState;
+  player: any;
 }
 
 export const sagaMiddleware = createSagaMiddleware();
@@ -54,6 +57,7 @@ export const store = createStore(
     node: nodeReducer,
     uploads: uploadReducer,
     flow: flowReducer,
+    player: playerReducer,
   }),
   composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
 );