Merge pull request #19 from hayzey/develop

Merge develop into master for AWS config fixes
hayzey · Oct 7, 2020 · f360249 · f360249
2 parents 7100f19 + 812e251
commit f360249
Show file tree

Hide file tree

Showing 13 changed files with 910 additions and 47 deletions.
diff --git a/.platform/nginx/conf.d/myconf.conf b/.platform/nginx/conf.d/myconf.conf
@@ -0,0 +1,12 @@
+server {
+    server_name ~^(.+)$;
+
+    root /var/www/html;
+    index index.html;
+    rewrite ^(?!.*\.(js|css|jpg|png|json)($|\?)).* /index.html last;
+
+    location / {
+        root /var/www/html;
+        index index.html;
+    }
+}
diff --git a/LICENSE b/LICENSE
diff --git a/config/paths.js b/config/paths.js
@@ -64,6 +64,8 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
+  ebPlatform: resolveApp('.platform'),
+  appBuildEbPlatform: resolveApp('build/.platform'),
   publicUrlOrPath,
 };
 

diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="A Spotify music player"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Bonfire</title>

diff --git a/scripts/build.js b/scripts/build.js
@@ -208,4 +208,8 @@ function copyPublicFolder() {
     dereference: true,
     filter: file => file !== paths.appHtml,
   });
+
+  fs.removeSync(paths.appBuildEbPlatform);
+  fs.ensureDir(paths.appBuildEbPlatform);
+  fs.copySync(paths.ebPlatform, paths.appBuildEbPlatform);
 }
diff --git a/src/components/CurrentTrackInfo/CurrentTrackInfo.scss b/src/components/CurrentTrackInfo/CurrentTrackInfo.scss
@@ -1,4 +1,7 @@
-$album-cover-size: 100px;
+$album-cover-size: 120px;
+$album-cover-size-sm: 60px;
+$album-size-breakpoint: 600px;
+$spinning-album-cover-margin: 8px;
 
 .bf-current-track-info {
     display: grid;
@@ -10,6 +13,43 @@ $album-cover-size: 100px;
         position: relative;
         width: $album-cover-size;
         height: $album-cover-size;
+        overflow: hidden;
+        cursor: pointer;
+
+        &.spinning-record {
+            @media screen and (min-width: $album-size-breakpoint + 1) {
+                width: $album-cover-size - ($spinning-album-cover-margin * 2);
+                height: $album-cover-size - ($spinning-album-cover-margin * 2);
+                margin: $spinning-album-cover-margin;
+
+                border-radius: 100%;
+
+                @keyframes spin-record {
+                    from {
+                        transform: rotateZ(0deg);
+                    }
+
+                    to {
+                        transform: rotateZ(360deg);
+                    }
+                }
+
+                animation: spin-record 4s linear infinite;
+
+                &:after {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    background-color: #111;
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 100%;
+                    transform: translate(-50%, -50%);
+                }
+            }
+        }
     }
 
     .album-cover {
@@ -29,6 +69,7 @@ $album-cover-size: 100px;
 
     .main-track-info {
         padding: 8px 24px;
+        max-width: 250px;
 
         p {
             margin: 0;
@@ -38,4 +79,15 @@ $album-cover-size: 100px;
     .track-name {
         font-weight: 500;
     }
+
+    .artist-name {
+        font-size: 12px;
+    }
+
+    @media screen and (max-width: #{$album-size-breakpoint}) {
+        .album-cover-container {
+            width: $album-cover-size-sm;
+            height: $album-cover-size-sm;
+        }
+    }
 }
diff --git a/src/components/CurrentTrackInfo/CurrentTrackInfo.tsx b/src/components/CurrentTrackInfo/CurrentTrackInfo.tsx
@@ -8,7 +8,17 @@ interface CurrentTrackInfoProps {
     ready: boolean;
 }
 
-export class CurrentTrackInfo extends React.Component<CurrentTrackInfoProps> {
+interface CurrentTrackInfoState {
+    albumCoverSpinning: boolean;
+}
+
+export class CurrentTrackInfo extends React.Component<CurrentTrackInfoProps, CurrentTrackInfoState> {
+    albumCoverSpinningClass = 'spinning-record';
+
+    readonly state: CurrentTrackInfoState = {
+        albumCoverSpinning: false
+    };
+
     getCurrentTrack() {
         return this.props.playbackState?.track_window?.current_track;
     }
@@ -73,22 +83,44 @@ export class CurrentTrackInfo extends React.Component<CurrentTrackInfoProps> {
         return 'Album cover loading...';
     }
 
+    toggleAlbumSpinning() {
+        this.setState({
+            albumCoverSpinning: !this.state.albumCoverSpinning
+        });
+    }
+
+    getAlbumCoverClasses() {
+        let classes = 'album-cover-container';
+
+        if (this.state.albumCoverSpinning) {
+            classes += ` ${this.albumCoverSpinningClass}`;
+        }
+
+        return classes;
+    }
+
+    handleAlbumCoverClicked = () => {
+        this.toggleAlbumSpinning();
+    }
+
     render() {
         let content;
 
         if (this.props.ready) {
             content = (
                 <div className="bf-current-track-info">
-                    <div className="album-cover-container">
+                    <div
+                        className={ this.getAlbumCoverClasses() }
+                        onClick={ this.handleAlbumCoverClicked }>
                         <img
                             className="album-cover"
                             src={ this.getAlbumImageUrl() }
                             alt={ this.getAlbumImageAltText() }
                         />
                     </div>
                     <div className="main-track-info">
-                        <p className="track-name">{ this.getTrackName() }</p>
-                        <p className="artist-name">{ this.getTrackArtistName() }</p>
+                        <p className="track-name truncate">{ this.getTrackName() }</p>
+                        <p className="artist-name truncate">{ this.getTrackArtistName() }</p>
                     </div>
                 </div>
             );

diff --git a/src/components/PlaybackControls/PlaybackControls.scss b/src/components/PlaybackControls/PlaybackControls.scss
@@ -1,21 +1,59 @@
-
-
 .bf-playback-controls {
     display: grid;
-    grid-template-columns: minmax(250px, 1fr) 3fr minmax(250px, 1fr);
+    grid-template-columns: minmax(300px, 1fr) 3fr minmax(250px, 1fr);
+    grid-template-rows: auto auto;
     justify-content: center;
     align-items: center;
     background-color: #111;
 
-    .primary-controls {
-        padding: 8px 24px;
+    .bf-current-track-info {
+        grid-row-start: 1;
+        grid-row-end: 3;
     }
 
     .bf-playback-controls-primary {
-        margin-bottom: 8px;
+        margin-top: 16px;
+        grid-row-start: 1;
+        grid-row-end: 2;
     }
 
     .bf-playback-progress {
-        margin-top: 8px;
+        grid-row-start: 2;
+        grid-row-end: 3;
+        padding: 0 16px;
+    }
+
+    .bf-playback-controls-secondary {
+        grid-row-start: 1;
+        grid-row-end: 3;
+    }
+
+    @media screen and (max-width: 960px) {
+        grid-template-columns: 300px 1fr;
+        grid-template-rows: auto 1fr;
+
+        .bf-playback-controls-secondary {
+            display: none;
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        grid-template-columns: minmax(200px, 1fr) auto;
+
+        .bf-current-track-info {
+            grid-row-start: 1;
+            grid-row-end: 1;
+        }
+
+        .bf-playback-controls-primary {
+            grid-row-start: 1;
+            grid-row-end: 1;
+        }
+
+        .bf-playback-progress {
+            grid-column-start: 1;
+            grid-column-end: 3;
+            margin: 8px 0 4px 0;
+        }
     }
 }
diff --git a/src/components/PlaybackControls/PlaybackControls.tsx b/src/components/PlaybackControls/PlaybackControls.tsx
@@ -53,23 +53,21 @@ export class PlaybackControls extends React.Component<PlaybackControlsProps> {
                     ready={ this.props.ready }
                     playbackState={ this.props.playbackState }
                 />
+
+                <PlaybackControlsPrimary
+                    ready={ this.props.ready }
+                    onPreviousTrackClicked={ this.handlePreviousTrackClicked }
+                    onTogglePlayClicked={ this.handleTogglePlayClicked }
+                    onNextTrackClicked={ this.handleNextTrackClicked }
+                    playing={ this.props.playing }
+                />
 
-                <div className="primary-controls">
-                    <PlaybackControlsPrimary
-                        ready={ this.props.ready }
-                        onPreviousTrackClicked={ this.handlePreviousTrackClicked }
-                        onTogglePlayClicked={ this.handleTogglePlayClicked }
-                        onNextTrackClicked={ this.handleNextTrackClicked }
-                        playing={ this.props.playing }
-                    />
-
-                    <PlaybackProgress
-                        ready={ this.props.ready }
-                        playbackState={ this.props.playbackState }
-                        position={ this.props.position }
-                        onSeek={ this.handleSeek }
-                    />
-                </div>
+                <PlaybackProgress
+                    ready={ this.props.ready }
+                    playbackState={ this.props.playbackState }
+                    position={ this.props.position }
+                    onSeek={ this.handleSeek }
+                />
 
                 <PlaybackControlsSecondary
                     ready={ this.props.ready }

diff --git a/src/components/PlaybackControlsPrimary/PlaybackControlsPrimary.scss b/src/components/PlaybackControlsPrimary/PlaybackControlsPrimary.scss
@@ -5,4 +5,20 @@
         border: 2px solid;
         margin: 0 8px;
     }
+
+    @media screen and (max-width: 400px) {
+        .previous-track-button {
+            display: none;
+        }
+    }
+
+    @media screen and (max-width: 350px) {
+        .next-track-button {
+            display: none;
+        }
+
+        .toggle-play-button {
+            margin-right: 16px;
+        }
+    }
 }
diff --git a/src/components/TrackList/TrackList.scss b/src/components/TrackList/TrackList.scss
@@ -17,4 +17,23 @@ $primary-color: #FF9C61;
             color: inherit;
         }
     }
+
+    .track-play-button-cell {
+        width: 0;
+        padding: 0;
+    }
+
+    @media screen and (max-width: 600px) {
+        .track-album-cell {
+            display: none;
+        }
+
+        .track-artist-cell {
+            padding-right: 0;
+        }
+
+        .MuiTableCell-root {
+            font-size: 13px;
+        }
+    }
 }