Using separate bridge controller for album and playlist

blackcandy-org · Apr 29, 2024 · b2c4b8b · b2c4b8b
1 parent 705c403
commit b2c4b8b
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 62 deletions.
diff --git a/app/javascript/controllers/album_bridge_controller.js b/app/javascript/controllers/album_bridge_controller.js
@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+import { installEventHandler } from './mixins/event_handler'
+import { isNativeApp } from '../helper'
+
+export default class extends Controller {
+  static get shouldLoad () {
+    return isNativeApp()
+  }
+
+  static values = {
+    id: Number
+  }
+
+  initialize () {
+    installEventHandler(this)
+  }
+
+  connect () {
+    this.handleEvent('click', {
+      on: this.element,
+      with: this.playBeginWith,
+      delegation: true
+    })
+  }
+
+  play () {
+    App.nativeBridge.playAlbum(this.idValue)
+  }
+
+  playBeginWith = (event) => {
+    const { songId } = event.target.closest('[data-song-id]').dataset
+    App.nativeBridge.playAlbumBeginWith(this.idValue, songId)
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -18,15 +18,19 @@ import MiniPlayerController from './mini_player_controller.js'
 
 import PlayerController from './player_controller.js'
 
-import PlaylistSongsController from './playlist_songs_controller.js'
+import SongsController from './songs_controller.js'
 
 import CurrentPlaylistSongsController from './current_playlist_songs_controller.js'
 
 import PlaylistSortableController from './playlist_sortable_controller.js'
 
 import SearchController from './search_controller.js'
 
-import PlaylistSongsBridgeController from './playlist_songs_bridge_controller.js'
+import SongsBridgeController from './songs_bridge_controller.js'
+
+import AlbumBridgeController from './album_bridge_controller.js'
+
+import PlaylistBridgeController from './playlist_bridge_controller.js'
 
 import FlashBridgeController from './flash_bridge_controller.js'
 
@@ -52,15 +56,19 @@ application.register('mini-player', MiniPlayerController)
 
 application.register('player', PlayerController)
 
-application.register('playlist-songs', PlaylistSongsController)
+application.register('songs', SongsController)
 
 application.register('current-playlist-songs', CurrentPlaylistSongsController)
 
 application.register('playlist-sortable', PlaylistSortableController)
 
 application.register('search', SearchController)
 
-application.register('playlist-songs-bridge', PlaylistSongsBridgeController)
+application.register('songs-bridge', SongsBridgeController)
+
+application.register('album-bridge', AlbumBridgeController)
+
+application.register('playlist-bridge', PlaylistBridgeController)
 
 application.register('flash-bridge', FlashBridgeController)
 

diff --git a/app/javascript/controllers/mixins/playing_song_indicator.js b/app/javascript/controllers/mixins/playing_song_indicator.js
@@ -11,13 +11,13 @@ export const installPlayingSongIndicator = (controller, getSongElements = () =>
   }
 
   const addPlayingSongIndicatorEventListener = () => {
-    document.addEventListener('playlistSongs:showPlaying', showPlayingSong)
-    document.addEventListener('playlistSongs:hidePlaying', hidePlayingSong)
+    document.addEventListener('songs:showPlaying', showPlayingSong)
+    document.addEventListener('songs:hidePlaying', hidePlayingSong)
   }
 
   const removePlayingSongIndicatorEventListener = () => {
-    document.removeEventListener('playlistSongs:showPlaying', showPlayingSong)
-    document.removeEventListener('playlistSongs:hidePlaying', hidePlayingSong)
+    document.removeEventListener('songs:showPlaying', showPlayingSong)
+    document.removeEventListener('songs:hidePlaying', hidePlayingSong)
   }
 
   const controllerConnectCallback = controller.connect.bind(controller)

diff --git a/app/javascript/controllers/player_controller.js b/app/javascript/controllers/player_controller.js
@@ -147,7 +147,7 @@ export default class extends Controller {
     this.timerInterval = setInterval(this.#setTimer.bind(this), 1000)
 
     // let playlist can show current playing song
-    dispatchEvent(document, 'playlistSongs:showPlaying')
+    dispatchEvent(document, 'songs:showPlaying')
   }
 
   #setPauseStatus = () => {
@@ -162,7 +162,7 @@ export default class extends Controller {
 
     if (!this.currentSong.id) {
       this.headerTarget.classList.remove('is-expanded')
-      dispatchEvent(document, 'playlistSongs:hidePlaying')
+      dispatchEvent(document, 'songs:hidePlaying')
     }
   }
 

diff --git a/app/javascript/controllers/playlist_bridge_controller.js b/app/javascript/controllers/playlist_bridge_controller.js
@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+import { installEventHandler } from './mixins/event_handler'
+import { isNativeApp } from '../helper'
+
+export default class extends Controller {
+  static get shouldLoad () {
+    return isNativeApp()
+  }
+
+  static values = {
+    id: Number
+  }
+
+  initialize () {
+    installEventHandler(this)
+  }
+
+  connect () {
+    this.handleEvent('click', {
+      on: this.element,
+      with: this.playBeginWith,
+      delegation: true
+    })
+  }
+
+  play () {
+    App.nativeBridge.playPlaylist(this.idValue)
+  }
+
+  playBeginWith = (event) => {
+    const { songId } = event.target.closest('[data-song-id]').dataset
+    App.nativeBridge.playPlaylistBeginWith(this.idValue, songId)
+  }
+}
diff --git a/...llers/playlist_songs_bridge_controller.js → ...pt/controllers/songs_bridge_controller.js b/...llers/playlist_songs_bridge_controller.js → ...pt/controllers/songs_bridge_controller.js
@@ -7,22 +7,11 @@ export default class extends Controller {
     return isNativeApp()
   }
 
-  static values = {
-    resourceType: String,
-    resourceId: Number
-  }
-
   initialize () {
     installEventHandler(this)
   }
 
   connect () {
-    this.handleEvent('click', {
-      on: this.element,
-      with: this.playResourceBeginWith,
-      delegation: true
-    })
-
     this.handleEvent('click', {
       on: this.element,
       with: this.playNow,
@@ -42,15 +31,6 @@ export default class extends Controller {
     })
   }
 
-  playResource () {
-    App.nativeBridge.playResource(this.resourceTypeValue, this.resourceIdValue)
-  }
-
-  playResourceBeginWith = (event) => {
-    const { songId } = event.target.closest('[data-song-id]').dataset
-    App.nativeBridge.playResourceBeginWith(this.resourceTypeValue, this.resourceIdValue, songId)
-  }
-
   playNow (event) {
     const { songId } = event.target.closest('[data-song-id]').dataset
     App.nativeBridge.playNow(songId)

diff --git a/.../controllers/playlist_songs_controller.js → ...avascript/controllers/songs_controller.js b/.../controllers/playlist_songs_controller.js → ...avascript/controllers/songs_controller.js
diff --git a/app/javascript/native_bridge.js b/app/javascript/native_bridge.js
@@ -1,32 +1,57 @@
 import { isAndroidApp, isiOSApp } from './helper'
 
 class NativeBridge {
-  playResource (resourceType, resourceId) {
+  playAlbum (albumId) {
     if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
-        name: 'playResource',
-        resourceType,
-        resourceId: Number(resourceId)
+        name: 'playAlbum',
+        albumId: Number(albumId)
       })
     }
 
     if (isAndroidApp()) {
-      window.NativeBridge.playResource(resourceType, Number(resourceId))
+      window.NativeBridge.playAlbum(Number(albumId))
     }
   }
 
-  playResourceBeginWith (resourceType, resourceId, songId) {
+  playAlbumBeginWith (albumId, songId) {
     if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
-        name: 'playResourceBeginWith',
-        resourceType,
-        resourceId: Number(resourceId),
+        name: 'playAlbumBeginWith',
+        albumId: Number(albumId),
         songId: Number(songId)
       })
     }
 
     if (isAndroidApp()) {
-      window.NativeBridge.playResourceBeginWith(resourceType, Number(resourceId), Number(songId))
+      window.NativeBridge.playAlbumBeginWith(Number(albumId), Number(songId))
+    }
+  }
+
+  playPlaylist (playlistId) {
+    if (isiOSApp()) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'playPlaylist',
+        playlistId: Number(playlistId)
+      })
+    }
+
+    if (isAndroidApp()) {
+      window.NativeBridge.playPlaylist(Number(playlistId))
+    }
+  }
+
+  playPlaylistBeginWith (playlistId, songId) {
+    if (isiOSApp()) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'playPlaylistBeginWith',
+        playlistId: Number(playlistId),
+        songId: Number(songId)
+      })
+    }
+
+    if (isAndroidApp()) {
+      window.NativeBridge.playPlaylistBeginWith(Number(playlistId), Number(songId))
     }
   }
 

diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb
@@ -1,6 +1,6 @@
 <% page_title_tag @album.name %>
 
-<div class='o-container o-container--narrow' data-controller='playlist-songs playlist-songs-bridge' data-playlist-songs-bridge-resource-type-value='album' data-playlist-songs-bridge-resource-id-value='<%= @album.id %>'>
+<div class='o-container o-container--narrow' data-controller='songs songs-bridge album-bridge' data-album-bridge-id-value='<%= @album.id %>'>
   <div class='c-card c-card--horizontal c-card--center@narrow u-my-large'>
     <%= cover_image_tag @album, class: "c-card__image u-image-medium", data: {"test-id" => "album_image"} %>
     <div class='c-card__body'>
@@ -22,7 +22,7 @@
                 data: {
                   "disabled-on-native" => "true",
                   "turbo-frame" => "turbo-playlist",
-                  "action" => "playlist-songs-bridge#playResource"
+                  "action" => "album-bridge#play"
                 }
               }
             ) %>
@@ -39,7 +39,7 @@
       <% end %>
 
       <% songs.each do |song| %>
-        <li class='c-list__item' data-playlist-songs-target='item' data-song-id='<%= song.id %>' data-test-id='album_song'>
+        <li class='c-list__item' data-songs-target='item' data-song-id='<%= song.id %>' data-test-id='album_song'>
           <div class='o-flex o-flex--justify-between o-flex--align-center'>
             <%= button_to(
                   current_playlist_album_path(@album, should_play: true, song_id: song.id),
@@ -48,7 +48,7 @@
                   form_class: "o-flex__item--grow-1",
                   form: {
                     data: {
-                      "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playResourceBeginWith",
+                      "delegated-action" => "turbo:submit-start->songs#checkBeforePlay click->album-bridge#playBeginWith",
                       "turbo-frame" => "turbo-playlist",
                       "disabled-on-native" => "true"
                     }
@@ -81,7 +81,7 @@
                       form: {
                         data: {
                           "turbo-frame" => "turbo-playlist",
-                          "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playNow",
+                          "delegated-action" => "turbo:submit-start->songs#checkBeforePlay click->songs-bridge#playNow",
                           "disabled-on-native" => "true"
                         }
                       }
@@ -93,7 +93,7 @@
                       form: {
                         data: {
                           "turbo-frame" => "turbo-playlist",
-                          "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext click->playlist-songs-bridge#playNext",
+                          "delegated-action" => "turbo:submit-start->songs#checkBeforePlayNext click->songs-bridge#playNext",
                           "disabled-on-native" => "true"
                         }
                       }
@@ -105,7 +105,7 @@
                       form: {
                         data: {
                           "turbo-frame" => "turbo-playlist",
-                          "delegated-action" => "click->playlist-songs-bridge#playLast",
+                          "delegated-action" => "click->songs-bridge#playLast",
                           "disabled-on-native" => "true"
                         }
                       }

diff --git a/app/views/favorite_playlist/songs/index.html.erb b/app/views/favorite_playlist/songs/index.html.erb
@@ -1,5 +1,5 @@
 <div class='o-container o-container--narrow' data-test-id='favorite_playlist'>
-  <div data-controller='playlist-songs playlist-songs-bridge' data-playlist-songs-bridge-resource-type-value='playlist' data-playlist-songs-bridge-resource-id-value='<%= @playlist.id %>'>
+  <div data-controller='songs songs-bridge playlist-bridge' data-playlist-bridge-id-value='<%= @playlist.id %>'>
     <div class="c-card c-card--horizontal u-my-large">
       <div class='c-card__body'>
         <h1 class='c-card__body__title' data-test-id='playlist_name'><%= @playlist.name %></h1>
@@ -21,7 +21,7 @@
                     data: {
                       "disabled-on-native" => "true",
                       "turbo-frame" => "turbo-playlist",
-                      "action" => "playlist-songs-bridge#playResource"
+                      "action" => "playlist-bridge#play"
                     }
                   }
                 ) %>

diff --git a/app/views/playlists/songs/_song.html.erb b/app/views/playlists/songs/_song.html.erb
@@ -1,4 +1,4 @@
-<li id='<%= "#{dom_id(playlist)}_#{dom_id(song)}" %>' class='c-list__item u-p-0' data-playlist-songs-target='item' data-song-id='<%= song.id %>' data-test-id='playlist_song' draggable='true'>
+<li id='<%= "#{dom_id(playlist)}_#{dom_id(song)}" %>' class='c-list__item u-p-0' data-songs-target='item' data-song-id='<%= song.id %>' data-test-id='playlist_song' draggable='true'>
   <div class='o-flex o-flex--align-center u-py-narrow'>
     <% unless mobile? %>
       <button class='c-button c-button--icon js-playlist-sortable-item-handle u-mr-narrow' data-test-id='playlist_song_sortable_handle'><%= icon_tag "drag-indicator", size: "small" %></button>
@@ -11,7 +11,7 @@
           form_class: "o-flex__item--grow-1",
           form: {
             data: {
-              "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playResourceBeginWith",
+              "delegated-action" => "turbo:submit-start->songs#checkBeforePlay click->playlist-bridge#playBeginWith",
               "turbo-frame" => "turbo-playlist",
               "disabled-on-native" => "true"
             }
@@ -39,7 +39,7 @@
               form: {
                 data: {
                   "turbo-frame" => "turbo-playlist",
-                  "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playNow",
+                  "delegated-action" => "turbo:submit-start->songs#checkBeforePlay click->songs-bridge#playNow",
                   "disabled-on-native" => "true"
                 }
               }
@@ -51,7 +51,7 @@
               form: {
                 data: {
                   "turbo-frame" => "turbo-playlist",
-                  "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext click->playlist-songs-bridge#playNext",
+                  "delegated-action" => "turbo:submit-start->songs#checkBeforePlayNext click->songs-bridge#playNext",
                   "disabled-on-native" => "true"
                 }
               }
@@ -63,7 +63,7 @@
               form: {
                 data: {
                   "turbo-frame" => "turbo-playlist",
-                  "delegated-action" => "click->playlist-songs-bridge#playLast",
+                  "delegated-action" => "click->songs-bridge#playLast",
                   "disabled-on-native" => "true"
                 }
               }

diff --git a/app/views/playlists/songs/index.html.erb b/app/views/playlists/songs/index.html.erb
@@ -1,7 +1,7 @@
 <% page_title_tag @playlist.name %>
 
 <div class='o-container o-container--narrow'>
-  <div data-controller='playlist-songs playlist-songs-bridge' data-playlist-songs-bridge-resource-type-value='playlist' data-playlist-songs-bridge-resource-id-value='<%= @playlist.id %>'>
+  <div data-controller='songs songs-bridge playlist-bridge' data-playlist-bridge-id-value='<%= @playlist.id %>'>
     <div class="c-card c-card--horizontal u-my-large">
       <div class='c-card__body'>
         <h1 class='c-card__body__title' data-test-id='playlist_name'><%= @playlist.name %></h1>
@@ -23,7 +23,7 @@
                     data: {
                       "disabled-on-native" => "true",
                       "turbo-frame" => "turbo-playlist",
-                      "action" => "playlist-songs-bridge#playResource"
+                      "action" => "playlist-bridge#play"
                     }
                   }
                 ) %>