diff --git a/app/javascript/controllers/album_bridge_controller.js b/app/javascript/controllers/album_bridge_controller.js new file mode 100644 index 00000000..1942f9c9 --- /dev/null +++ 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 index 82423948..c1f5de05 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -18,7 +18,7 @@ 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' @@ -26,7 +26,11 @@ 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,7 +56,7 @@ application.register('mini-player', MiniPlayerController) application.register('player', PlayerController) -application.register('playlist-songs', PlaylistSongsController) +application.register('songs', SongsController) application.register('current-playlist-songs', CurrentPlaylistSongsController) @@ -60,7 +64,11 @@ 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 index 223dcb4c..0d64dd36 100644 --- 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 index 6522bcd5..4bfd89ce 100644 --- 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 new file mode 100644 index 00000000..10d67ba3 --- /dev/null +++ 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/app/javascript/controllers/playlist_songs_bridge_controller.js b/app/javascript/controllers/songs_bridge_controller.js similarity index 67% rename from app/javascript/controllers/playlist_songs_bridge_controller.js rename to app/javascript/controllers/songs_bridge_controller.js index db771d97..4e47e81b 100644 --- a/app/javascript/controllers/playlist_songs_bridge_controller.js +++ b/app/javascript/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/app/javascript/controllers/playlist_songs_controller.js b/app/javascript/controllers/songs_controller.js similarity index 100% rename from app/javascript/controllers/playlist_songs_controller.js rename to app/javascript/controllers/songs_controller.js diff --git a/app/javascript/native_bridge.js b/app/javascript/native_bridge.js index dbbbc148..99b80a5b 100644 --- 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 index c523406a..c782ee1c 100644 --- a/app/views/albums/show.html.erb +++ b/app/views/albums/show.html.erb @@ -1,6 +1,6 @@ <% page_title_tag @album.name %> -
+
<%= cover_image_tag @album, class: "c-card__image u-image-medium", data: {"test-id" => "album_image"} %>
@@ -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| %> -
  • +
  • <%= 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 index 0aa7dcd9..0fe1fa31 100644 --- a/app/views/favorite_playlist/songs/index.html.erb +++ b/app/views/favorite_playlist/songs/index.html.erb @@ -1,5 +1,5 @@
    -
    +

    <%= @playlist.name %>

    @@ -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 index e84d727f..3cc945d0 100644 --- a/app/views/playlists/songs/_song.html.erb +++ b/app/views/playlists/songs/_song.html.erb @@ -1,4 +1,4 @@ -
  • +
  • <% unless mobile? %> @@ -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 index 8f76199e..05edc912 100644 --- 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 %>
    -
    +

    <%= @playlist.name %>

    @@ -23,7 +23,7 @@ data: { "disabled-on-native" => "true", "turbo-frame" => "turbo-playlist", - "action" => "playlist-songs-bridge#playResource" + "action" => "playlist-bridge#play" } } ) %> diff --git a/app/views/search/songs/_table.html.erb b/app/views/search/songs/_table.html.erb index 9f03601a..bdc2c112 100644 --- a/app/views/search/songs/_table.html.erb +++ b/app/views/search/songs/_table.html.erb @@ -1,4 +1,4 @@ -
    +
    <%= t("field.name") %>
    diff --git a/app/views/songs/_song.html.erb b/app/views/songs/_song.html.erb index 47bd2e51..19318879 100644 --- a/app/views/songs/_song.html.erb +++ b/app/views/songs/_song.html.erb @@ -1,12 +1,12 @@
    -
    +
    <%= button_to( current_playlist_songs_path(song_id: song.id, should_play: true), class: "c-button c-button--link", data: {"test-id" => "song_item"}, form: { data: { - "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay click->playlist-songs-bridge#playNow", + "delegated-action" => "turbo:submit-start-songs#checkBeforePlay click->songs-bridge#playNow", "turbo-frame" => "turbo-playlist", "disabled-on-native" => "true" } @@ -41,7 +41,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" } } @@ -53,7 +53,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/songs/_table.html.erb b/app/views/songs/_table.html.erb index 2ae23cde..de71f310 100644 --- a/app/views/songs/_table.html.erb +++ b/app/views/songs/_table.html.erb @@ -2,7 +2,7 @@ <%# So I can't use table element here to implement infinite scroll. %> <%# If turbo frame support built-in elements later https://github.com/hotwired/turbo/pull/131,%> <%# this view can use table element to refactor. %> -
    +
    <%= t("field.name") %>