feat: add favorites - update dependencies

client/app/components/clip-player-control/clip-player-control.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
-import { SoundService } from '../../services';
+import { SoundListType, SoundType } from '../../model';
 
 interface IProps {
   sound: SoundType;
-  type: 'sounds' | 'clips';
-  showDiscordPlay?: boolean;
+  type: SoundListType;
+  hasModPermissions: boolean;
+  showFavorite?: boolean;
+  onFavorite?: () => void;
+  onPlayBrowser: (sound: SoundType) => void;
+  onPlayDiscord: (sound: SoundType) => void;
 }
 
 interface IState {}
 
-export interface SoundType {
-  extension: string;
-  name: string;
-}
-
 export class ClipPlayerControl extends React.Component<IProps, IState> {
   checkExtension(extension: string) {
     switch (extension) {
@@ -28,22 +27,21 @@ export class ClipPlayerControl extends React.Component<IProps, IState> {
     }
   }
 
-  handlePlayAudioInBrowser(sound: SoundType, type: string) {
-    const url = `/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension;
-    const audio = new Audio(url);
-    audio.play();
-  }
-
-  onPlayDiscord = (sound: SoundType) => {
-    SoundService.playSound(sound);
-  };
-
   render() {
-    const { sound, showDiscordPlay, type } = this.props;
+    const { onPlayBrowser, onPlayDiscord, sound, hasModPermissions, showFavorite, type } = this.props;
 
     return (
       this.checkExtension(sound.extension) && (
         <div className="flex flex--center">
+          {showFavorite && hasModPermissions && (
+            <i
+              title="Favorite"
+              className={'fa link fa-lg ' + (type === 'favorites' ? 'fa-trash' : 'fa-heart color__red')}
+              aria-hidden="true"
+              style={{ paddingRight: '5px' }}
+              onClick={() => !this.props.onFavorite || this.props.onFavorite()}
+            />
+          )}
           <a
             href={`/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension}
             download
@@ -56,15 +54,15 @@ export class ClipPlayerControl extends React.Component<IProps, IState> {
             className="fa fa-play link"
             aria-hidden="true"
             style={{ paddingLeft: '15px' }}
-            onClick={() => this.handlePlayAudioInBrowser(sound, type)}
+            onClick={() => onPlayBrowser(sound)}
           />
-          {showDiscordPlay && (
+          {hasModPermissions && (
             <i
               title="Play in discord"
               className="fa fa-play-circle link fa-lg"
               aria-hidden="true"
               style={{ paddingLeft: '10px' }}
-              onClick={() => this.onPlayDiscord(sound)}
+              onClick={() => onPlayDiscord(sound)}
             />
           )}
         </div>

client/app/components/sound-list/sound-list.tsx

@@ -1,25 +1,23 @@
 import React from 'react';
+import { SoundListType, SoundType } from '../../model';
+import { SoundService } from '../../services';
 import { ClipPlayerControl } from '../clip-player-control/clip-player-control';
 import './sound-list.scss';
 
 interface Props {
   soundList: SoundType[];
-  type: 'sounds' | 'clips';
+  type: SoundListType;
   title: string;
   onPlayDiscord?: (sound: SoundType) => void;
-  showDiscordPlay?: boolean;
+  hasModPermissions: boolean;
+  onFavorite?: (sound: SoundType) => void;
+  deleteFavorite?: (sound: SoundType) => void;
 }
 
 interface State {
   showAudioControls: boolean[];
 }
 
-export interface SoundType {
-  extension: string;
-  name: string;
-  prefix?: string;
-}
-
 export class SoundList extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -41,14 +39,8 @@ export class SoundList extends React.Component<Props, State> {
     }
   }
 
-  handlePlayAudioInBrowser(sound: SoundType, type: string) {
-    const url = `/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension;
-    const audio = new Audio(url);
-    audio.play();
-  }
-
   render() {
-    const { showDiscordPlay, soundList, title, type } = this.props;
+    const { hasModPermissions, onFavorite, soundList, title, type } = this.props;
 
     return (
       <div className="card">
@@ -66,10 +58,18 @@ export class SoundList extends React.Component<Props, State> {
               return (
                 <div key={index} className="sound-list__item">
                   <div className="text-wrap">
-                    {(type === 'sounds' && sound.prefix ? sound.prefix : '') + sound.name}
+                    {((type === 'sounds' || type === 'favorites') && sound.prefix ? sound.prefix : '') + sound.name}
                   </div>
 
-                  <ClipPlayerControl showDiscordPlay={showDiscordPlay} sound={sound} type={type} />
+                  <ClipPlayerControl
+                    showFavorite={type !== 'clips'}
+                    onFavorite={() => !onFavorite || onFavorite(sound)}
+                    hasModPermissions={hasModPermissions}
+                    sound={sound}
+                    type={type}
+                    onPlayBrowser={(sound) => SoundService.playAudioInBrowser(sound, type)}
+                    onPlayDiscord={SoundService.playSound}
+                  />
                 </div>
               );
             })