Convert Shrine files to ActiveStorage (#410)

README.md

@@ -17,7 +17,7 @@ Join the [Discord](https://discord.gg/KZWFsNN) to discuss content and developmen
 
 2. Clone the repo to your local machine
 
-4. Download the [Fixtures Pack](https://www.dropbox.com/scl/fi/gacrptl8htt331py9ysrh/PhishinDevFixtures.zip?rlkey=ys61k2qrer7exv2zej95b275l&st=xi1navpb&dl=0) and unzip it. This file contains a full database export (updated May 2024) minus users and API keys. It also includes MP3 audio and PNG waveform attachments for the last Baker's Dozen show, which should be browsable and playable via `localhost:3000/2017-08-06` once the local server is running. Additionally it includes MP3s/notes for 2018-12-28 for testing the `rails shows:import` task.
+4. Download the [Fixtures Pack](https://www.dropbox.com/scl/fi/ezmwysxnj6z1kgpfy04nb/PhishinDevFixtures.zip?rlkey=qvpvezehcudnr0u7c54337gv0&st=c8nchmf2&dl=0) and unzip it. This file contains a full database export (updated May 2024) minus users and API keys. It also includes MP3 audio and PNG waveform attachments for the last Baker's Dozen show, which should be browsable and playable via `localhost:3000/2017-08-06` once the local server is running. Additionally it includes MP3s/notes for 2018-12-28 for testing the `rails shows:import` task.
 
 ```bash
 # Copy SQL dump into PG container and run it

app/controllers/downloads_controller.rb

@@ -1,7 +1,14 @@
 class DownloadsController < ApplicationController
   def download_track
-    raise ActiveRecord::RecordNotFound if track&.audio_file.blank?
-    send_audio_file_as_attachment
+    raise ActiveRecord::RecordNotFound if track.blank?
+
+    if track.mp3_audio.attached?
+      send_active_storage_audio_as_attachment
+    elsif track.audio_file.exists?
+      send_shrine_audio_as_attachment
+    else
+      head :not_found
+    end
   end
 
   def download_blob
@@ -11,7 +18,19 @@ def download_blob
 
   private
 
-  def send_audio_file_as_attachment
+  def send_active_storage_audio_as_attachment
+    add_cache_header
+    send_file \
+      ActiveStorage::Blob.service.send(:path_for, track.mp3_audio.blob.key),
+      type: "audio/mpeg",
+      disposition: "attachment",
+      filename: "Phish #{track.show.date} #{track.title}.mp3",
+      length: track.mp3_audio.blob.byte_size
+  rescue ActionController::MissingFile
+    head :not_found
+  end
+
+  def send_shrine_audio_as_attachment
     add_cache_header
     send_file \
       track.audio_file.to_io.path,
@@ -36,9 +55,7 @@ def send_blob_file_inline
   end
 
   def track
-    @track ||=
-      Track.includes(show: :venue)
-           .find_by(id: params[:id])
+    @track ||= Track.includes(show: :venue).find_by(id: params[:id])
   end
 
   def blob

app/javascript/components/CoverArt.jsx

@@ -37,17 +37,17 @@ const CoverArt = ({ coverArtUrls, albumCoverUrl, openAppModal, size = "small", c
     setIsLoaded(true);
   };
 
-  const selectedImage = selectedOption === "albumCover" ?  albumCoverUrl : coverArtUrls?.[size];
+  const selectedImage = selectedOption === "albumCover" ? albumCoverUrl : coverArtUrls?.[size];
 
   return (
     <div
-      className={`cover-art cover-art-modal-trigger ${isLoaded ? "" : "loading-shimmer"}`}
+      className="cover-art cover-art-modal-trigger"
       onClick={handleOpenModal}
     >
       <img
         src={selectedImage}
         alt={selectedOption === "coverArt" ? "Cover art" : "Album cover"}
-        className={css || undefined}
+        className={`${css || ""} ${isLoaded ? "" : "loading-shimmer"}`}
         onLoad={handleImageLoad}
         loading="lazy"
       />

app/javascript/components/Show.jsx

@@ -84,7 +84,7 @@ const Show = ({ trackSlug }) => {
       <div id="layout-container">
         <aside id="sidebar" className="hidden-mobile">
           <div className="sidebar-content">
-            <div className="mb-2">
+            <div className="mb-4">
               <CoverArt
                 coverArtUrls={show.cover_art_urls}
                 albumCoverUrl={show.album_cover_url}
@@ -142,7 +142,6 @@ const Show = ({ trackSlug }) => {
                     albumCoverUrl={show.album_cover_url}
                     openAppModal={openAppModal}
                     size="medium"
-                    css="mobile-show-mobile"
                   />
                 </div>
                 <div className="mobile-show-info">

app/javascript/components/Shows.jsx

@@ -99,7 +99,7 @@ const Shows = ({ shows, numbering = false, tourHeaders = false, viewMode = "list
         onClick={() => handleShowClick(show.date)}
         style={{
           backgroundImage: isLoaded ? `url(${show.cover_art_urls.medium})` : "none",
-          opacity: isLoaded ? 1 : 0, // Force re-render to fix iOS Safari bug
+          opacity: isLoaded ? 1 : 0.9, // Force re-render to fix iOS Safari bug
         }}
       >
         {!isLoaded && <div className="loading-shimmer" />}

app/javascript/stylesheets/application.css.scss

@@ -2,32 +2,31 @@
 @import "~@fontsource/open-sans-condensed/300.css";
 @import "~@fontsource/open-sans-condensed/700.css";
 @import '~mapbox-gl/dist/mapbox-gl.css';
-
 @import "bulma/css/versions/bulma-no-dark-mode.min";
 
 $alert-red: #c6867f;
-$bg-blue: #cbf3ff;
-$bg-gray: #f2f3f5;
 $bg-red: #ffe4e1;
-$blue: rgb(3, 187, 242);
-$highlight-blue: rgb(171, 217, 255);
+$error-red: #b65b5b;
 $highlight-orange: #ff9d15;
-$control-gray: #f5f5f5;
+$bg-blue: #cbf3ff;
+$blue: #03BBF2;
 $google-blue: #5385ed;
-$header-gray: #c7c8ca;
+$highlight-blue: #ABD9FF;
+$bg-gray: #f2f3f5;
 $border-gray: #e3e3e3;
+$control-gray: #f5f5f5;
+$dark-gray: #3a3a3a;
+$header-gray: #c7c8ca;
 $inactive-gray: #d9dbdc;
 $text-gray: #6d6f71;
 $title-gray: #515152;
-$dark-gray: #3a3a3a;
 $radius: 0.5rem;
 
 @import "./bulma-overrides.css.scss";
 @import "./content.css.scss";
 @import "./eras.css.scss";
 @import "./errors.css.scss";
 @import "./feedback.css.scss";
-@import "./layout.css.scss";
 @import "./likes.css.scss";
 @import "./map.css.scss";
 @import "./mobile.css.scss";
@@ -85,7 +84,6 @@ a {
   margin-bottom: 0.1rem !important;
 }
 
-// Misc
 .context-dropdown .button {
   background-color: transparent;
   box-shadow: none;
@@ -180,12 +178,10 @@ a {
   background-color: $highlight-orange !important;
 }
 
-
 .section {
   padding-top: 0 !important;
 }
 
-// Static pages
 .api-command {
   margin: 0.5rem 0;
   display: block;
@@ -209,7 +205,6 @@ a {
   margin: 0 0 2rem 1rem;
 }
 
-// OAuth
 .external-login-btn {
   font-size: 1.3rem;
   text-align: center;