audio clips - client done

client/app/components/Navbar/Navbar.tsx

@@ -21,6 +21,7 @@ export class Navbar extends React.Component<Props, State> {
                 <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
                 <Link to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">Youtube Downloader</Link>
                 <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link>
+                <Link to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">Clips</Link>
             </div>
         );
     }

client/app/components/Navbar/index.ts

@@ -0,0 +1 @@
+export * from './Navbar';

client/app/components/SoundList/SoundList.scss

@@ -0,0 +1,12 @@
+@import "../../scss/variables";
+
+.SoundList__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 50px;
+    
+    & + .SoundList__item {
+        border-top: 1px solid $gray3;
+    }
+}

client/app/components/SoundList/SoundList.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import './SoundList.scss';
+
+interface Props {
+    soundList: SoundType[];
+    type: string;
+}
+
+interface State {
+    showAudioControls: boolean[];
+}
+
+export interface SoundType {
+    extension: string;
+    name: string;
+    prefix?: string;
+}
+
+export class SoundList extends React.Component<Props, State> {
+    
+
+    constructor() {
+        super();
+        this.state = {
+            showAudioControls: [],
+        };
+    }
+    
+    checkExtension(extension: string) {
+        switch(extension) {
+        case "wav":
+            return true;
+        case "mp3":
+            return true;
+        case "mpeg":
+            return true;
+        default:
+            return false;
+        }
+    }
+
+    handleShowAudio(index: any) {
+        let temp = this.state.showAudioControls;
+        temp[index] = true;
+
+        this.setState({
+            showAudioControls: temp,
+        });
+    }
+    
+    render() {
+
+        const { soundList, type } = this.props;
+
+        return (
+            <div className="Card">
+                <div className="Card__header" style={{display:'flex'}}>
+                    <div>
+                        <span>{type}</span>
+                        <i className="fa fa fa-volume-up" aria-hidden="true"/>
+                    </div>
+                    <div style={{flex:1}}/>
+                    <div>({soundList.length})</div>
+                </div>
+                
+                {soundList.length > 0 ? soundList.map((sound: SoundType, index: number) => {
+                    return (
+                        <div key={index} className="SoundList__item">
+                            <div>{(sound.prefix || '') + sound.name}</div>
+                            
+                            {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
+                            <audio controls src={`/public/${type.toLowerCase()}/` + sound.name + "." + sound.extension}
+                                    itemType={"audio/" + sound.extension}
+                                    style={{width: "100px"}}/>
+                            : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
+                        </div>
+                    );
+                }) : null}
+            </div>
+        );
+    }
+}

client/app/components/SoundList/index.ts

@@ -0,0 +1 @@
+export * from './SoundList';