Album release updates (#16)

* Update album description and add streaming links

* Update workflow version

* Add and precache image assets

* Clean up UI and add release show to album page

* Update regent show info

* Fix image asset setup

* Mobile UI improvements

.github/workflows/build-deploy.yml

@@ -32,7 +32,7 @@ jobs:
       run: echo 'spider-water.com' > ./build/web/CNAME
 
     - name: Upload production-ready build files
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: production-files
         path: ./build/web

lib/album/album.dart

@@ -1,10 +1,12 @@
 import 'package:firebase_analytics/firebase_analytics.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:spider_water/album/album_description.dart';
+import 'package:spider_water/home/shows_view.dart';
+import 'dart:math';
 
 import '../analytics/analytics.dart';
+import '../main.dart';
 
 class AlbumPage extends StatefulWidget {
   const AlbumPage({super.key});
@@ -56,14 +58,21 @@ class _AlbumPageState extends State<AlbumPage> {
 
     analytics.sendEvent(const AnalyticsEvent(name: "Loaded album page"));
 
-    return screenWidth < 450
+    return screenWidth < mobileWidthCutoff
         ? mobilePage(screenHeight)
         : desktopPage(screenHeight, screenWidth);
   }
 
   Future<void> loadImages() async {
     try {
       await precacheImage(const AssetImage('assets/img/album.jpg'), context);
+      await precacheImage(const AssetImage('assets/img/amazon-music.png'), context);
+      await precacheImage(const AssetImage('assets/img/apple-music.png'), context);
+      await precacheImage(const AssetImage('assets/img/bandcamp.png'), context);
+      await precacheImage(const AssetImage('assets/img/spotify.png'), context);
+      await precacheImage(const AssetImage('assets/img/tidal.png'), context);
+      await precacheImage(const AssetImage('assets/img/youtube.png'), context);
+      await precacheImage(const AssetImage('assets/img/youtube-music.png'), context);
     } catch (e) {
       debugPrint('Failed to load and cache image: $e');
     }
@@ -75,31 +84,51 @@ class _AlbumPageState extends State<AlbumPage> {
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
+          const SizedBox(height: 20),
           IntrinsicWidth(
               child: Image.asset(
             'assets/img/album.jpg',
             height: screenHeight / 2,
           )),
+          const SizedBox(height: 20),
+          StreamingLinkRow(analytics: analytics),
+          const SizedBox(height: 20),
+          ShowsView(screenHeight, true),
+          const SizedBox(height: 30),
           const AlbumBody(),
+          const SizedBox(height: 30)
         ],
       ),
     );
   }
 
   desktopPage(double screenHeight, double screenWidth) {
     return SingleChildScrollView(
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        crossAxisAlignment: CrossAxisAlignment.start,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
         children: [
+          const SizedBox(height: 30),
           IntrinsicHeight(
-              child: Image.asset(
-            'assets/img/album.jpg',
-            width: screenWidth / 3,
-          )),
-          const AlbumBody(),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                IntrinsicHeight(
+                    child: Image.asset(
+                      'assets/img/album.jpg',
+                      width: screenWidth / 3,
+                    )),
+                const AlbumBody()
+              ],
+            )
+          ),
+          const SizedBox(height: 30),
+          StreamingLinkRow(analytics: analytics),
+          const SizedBox(height: 30),
+          ShowsView(screenHeight),
+          const SizedBox(height: 30)
         ],
-      ),
+      )
     );
   }
 }
@@ -110,19 +139,130 @@ class AlbumBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     double screenWidth = MediaQuery.of(context).size.width;
-    return SizedBox(
-        height: screenWidth < 450 ? 800 : screenWidth * .45,
-        width: screenWidth < 450 ? 800 : screenWidth * .45,
-        child: MarkdownBody(
-          data: description,
-          selectable: true,
-          styleSheet: MarkdownStyleSheet(
-              a: style,
-              h1: styleh1,
-              h2: styleh2,
-              h3: styleh3,
-              h4: style,
-              p: style),
-        ));
+    return IntrinsicHeight(
+      child: SizedBox(
+          width: screenWidth < mobileWidthCutoff ? 800 : screenWidth * .45,
+          child: MarkdownBody(
+            data: description,
+            selectable: true,
+            styleSheet: MarkdownStyleSheet(
+                a: style,
+                h1: styleh1,
+                h2: styleh2,
+                h3: styleh3,
+                h4: style,
+                p: style),
+          )
+      )
+    );
+  }
+}
+
+class StreamingLinkRow extends StatelessWidget {
+
+  final SpiderAnalytics analytics;
+
+  const StreamingLinkRow({
+    Key? key,
+    required this.analytics
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          StreamingLink(
+              platformName: "Spotify",
+              imagePath: "assets/img/spotify.png",
+              url: "https://open.spotify.com/album/7bzxwIg5XRQwNCrd8gxwEn?si=_llBqDD1R7-7DJ5TUCrAyA",
+              analytics: analytics
+          ),
+          const SizedBox(width: 10),
+          StreamingLink(
+              platformName: "Apple Music",
+              imagePath: "assets/img/apple-music.png",
+              url: "https://music.apple.com/us/album/exit-plan/1770647795",
+              analytics: analytics
+          ),
+          const SizedBox(width: 10),
+          StreamingLink(
+              platformName: "Bandcamp",
+              imagePath: "assets/img/bandcamp.png",
+              url: "https://spiderwater.bandcamp.com/album/exit-plan",
+              analytics: analytics
+          ),
+          const SizedBox(width: 10),
+          StreamingLink(
+              platformName: "YouTube",
+              imagePath: "assets/img/youtube.png",
+              url: "https://www.youtube.com/watch?v=3-77YkBhULA&list=OLAK5uy_ktGt8xtGlPMZMnzFrXnSqSkMsM0jGRZDs",
+              analytics: analytics
+          ),
+          const SizedBox(width: 10),
+          StreamingLink(
+              platformName: "TIDAL",
+              imagePath: "assets/img/tidal.png",
+              url: "https://tidal.com/browse/album/389134256",
+              analytics: analytics
+          ),
+          const SizedBox(width: 10),
+          StreamingLink(
+              platformName: "Amazon Music",
+              imagePath: "assets/img/amazon-music.png",
+              url: "https://amazon.com/music/player/albums/B0DHTKLLW3?marketplaceId=ATVPDKIKX0DER&musicTerritory=US&ref=dm_sh_MqOazxG3KKccfu9RIoz8GOCDT",
+              analytics: analytics
+          ),
+
+          // commenting out youtube music link for now since it will be
+          // confusing with youtube also there, until we add labels
+
+          // const SizedBox(width: 10),
+          // StreamingLink(
+          //     platformName: "YouTube Music",
+          //     imagePath: "assets/img/youtube-music.png",
+          //     url: "https://music.youtube.com/playlist?list=OLAK5uy_nBWcRM4HPTHz-itN5NxnQJlodCbCwiLpE&si=0PbG2sGknOBh7qkZ",
+          //     analytics: analytics
+          // ),
+        ]
+    );
+  }
+}
+
+class StreamingLink extends StatelessWidget {
+  final String platformName;
+  final String imagePath;
+  final String url;
+  final SpiderAnalytics analytics;
+
+  const StreamingLink({
+    Key? key,
+    required this.platformName,
+    required this.imagePath,
+    required this.url,
+    required this.analytics
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
+
+      return MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: GestureDetector(
+          onTap: () {
+            analytics.sendEvent(AnalyticsEvent(
+                name: "Clicked Streaming Link",
+                properties: {"platform": platformName}));
+            onUrlTapped(url);
+          },
+          child: Image.asset(
+            imagePath,
+            height: max(50, screenWidth / 15),
+            width: max(50, screenWidth / 15)
+          )
+        )
+    );
   }
 }

lib/album/album_description.dart

@@ -12,10 +12,10 @@ pints downed in the arriving minutes of an uber driver
 
 ## we're ready to finally share that story
 
-Exit Plan is a 7-track guide for survival in a world where the silhouette lounge only has one shadow
+'exit plan' is a 7-track guide for survival in a world where the silhouette lounge only has one shadow
 
 a world where brat politicians corrupt the masses through major chord progressions
 
-### break free from the plan. September 22
+### break free from the plan. OUT NOW.
 
 """;

lib/home/home_page_content.dart

@@ -6,6 +6,7 @@ import 'package:spider_water/home/shows_view.dart';
 
 import '../analytics/analytics.dart';
 import '../hover_text.dart';
+import '../main.dart';
 import 'bobbing_head.dart';
 
 class HomePageContent extends StatefulWidget {
@@ -42,7 +43,7 @@ class _HomePageContentState extends State<HomePageContent> {
     double screenWidth = MediaQuery.of(context).size.width;
     double screenHeight = MediaQuery.of(context).size.height;
 
-    return screenWidth < 450
+    return screenWidth < mobileWidthCutoff
         ? mobilePage(screenHeight)
         : desktopPage(screenHeight, screenWidth);
   }

lib/home/shows.dart

@@ -51,7 +51,7 @@ final ShowList = [
       title: "PAWTUCKET ART GALLERY",
       date: DateTime(2023, 12, 9, 19)),
   Show(
-      url: "https://regenttheatre.com/",
+      url: "https://ci.ovationtix.com/36186/production/1213789?performanceId=11525072/",
       title: "ALBUM RELEASE SHOW @ REGENT",
-      date: DateTime(2024, 10, 12, 19)),
+      date: DateTime(2024, 10, 12, 20)),
 ];

lib/home/shows_view.dart

@@ -27,39 +27,42 @@ class ShowsView extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         for (var show in futureDates)
-          GestureDetector(
-            onTap: () {
-              analytics.sendEvent(AnalyticsEvent(
-                  name: "Clicked show",
-                  properties: {"show": jsonEncode(show)}));
-              onUrlTapped(show.url);
-            },
-            child: Wrap(
-              direction: Axis.horizontal,
-              children: [
-                HoverText(
-                    baseColor: Colors.black,
-                    hoverColor: Colors.red,
-                    textStyle: TextStyle(
-                      color: Colors.black,
-                      fontSize: isMobile ? 20 : screenHeight / 23,
-                      fontFamily: 'Blockstepped',
-                    ),
-                    child: Text("-${show.title}")),
-                const Padding(padding: EdgeInsets.all(5)),
-                HoverText(
-                    baseColor: Colors.red,
-                    hoverColor: Colors.black,
-                    textStyle: TextStyle(
-                      color: Colors.red,
-                      fontSize: isMobile ? 16 : screenHeight / 30,
-                      fontFamily: 'Blockstepped',
-                    ),
-                    child: Text(
-                      "${formatter.format(show.date)} @ ${DateFormat.jm().format(show.date)}",
-                    ))
-              ],
-            ),
+          MouseRegion(
+            cursor: SystemMouseCursors.click,
+            child: GestureDetector(
+              onTap: () {
+                analytics.sendEvent(AnalyticsEvent(
+                    name: "Clicked show",
+                    properties: {"show": jsonEncode(show)}));
+                onUrlTapped(show.url);
+              },
+              child: Wrap(
+                direction: Axis.horizontal,
+                children: [
+                  HoverText(
+                      baseColor: Colors.black,
+                      hoverColor: Colors.red,
+                      textStyle: TextStyle(
+                        color: Colors.black,
+                        fontSize: isMobile ? 20 : screenHeight / 23,
+                        fontFamily: 'Blockstepped',
+                      ),
+                      child: Text("-${show.title}")),
+                  const Padding(padding: EdgeInsets.all(5)),
+                  HoverText(
+                      baseColor: Colors.red,
+                      hoverColor: Colors.black,
+                      textStyle: TextStyle(
+                        color: Colors.red,
+                        fontSize: isMobile ? 16 : screenHeight / 30,
+                        fontFamily: 'Blockstepped',
+                      ),
+                      child: Text(
+                        "${formatter.format(show.date)} @ ${DateFormat.jm().format(show.date)}",
+                      ))
+                ],
+              ),
+            )
           )
       ],
     );

lib/main.dart

@@ -133,3 +133,5 @@ void onUrlTapped(String? repoLink) {
   if (repoLink == null) return;
   js.context.callMethod('open', [repoLink]);
 }
+
+const mobileWidthCutoff = 600;

pubspec.yaml

@@ -40,6 +40,13 @@ flutter:
     - assets/img/stin.png
     - assets/img/chuck.png
     - assets/img/album.jpg
+    - assets/img/amazon-music.png
+    - assets/img/apple-music.png
+    - assets/img/bandcamp.png
+    - assets/img/spotify.png
+    - assets/img/tidal.png
+    - assets/img/youtube-music.png
+    - assets/img/youtube.png
   fonts:
     - family: Blockstepped
       fonts: