From ce3af1d1b877394b4cc0a6ebc2cccd6be3c5fdb8 Mon Sep 17 00:00:00 2001 From: aidewoode Date: Tue, 5 Dec 2023 14:36:15 +0800 Subject: [PATCH] Add native bridge controller for flash message --- app/javascript/application.js | 3 ++- .../controllers/flash_bridge_controller.js | 12 +++++++++ .../controllers/flash_controller.js | 5 ++++ app/javascript/controllers/index.js | 8 ++++-- ...js => playlist_songs_bridge_controller.js} | 5 ++++ .../controllers/playlist_songs_controller.js | 5 ++++ app/javascript/helper.js | 12 ++++++++- app/javascript/native_bridge.js | 25 +++++++++++-------- app/views/albums/show.html.erb | 14 +++++------ .../favorite_playlist/songs/index.html.erb | 8 +++--- app/views/playlists/songs/_song.html.erb | 6 ++--- app/views/playlists/songs/index.html.erb | 8 +++--- app/views/search/songs/_table.html.erb | 2 +- app/views/shared/_flash.html.erb | 12 +++++---- app/views/songs/_song.html.erb | 6 ++--- app/views/songs/_table.html.erb | 2 +- 16 files changed, 90 insertions(+), 43 deletions(-) create mode 100644 app/javascript/controllers/flash_bridge_controller.js rename app/javascript/controllers/{native_bridge_controller.js => playlist_songs_bridge_controller.js} (92%) diff --git a/app/javascript/application.js b/app/javascript/application.js index cad8eeaa..e5c0f8d0 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -4,6 +4,7 @@ import './channels' import Player from './player' import NativeBridge from './native_bridge' +import { isNativeApp } from './helper' window.App = { player: new Player(), @@ -35,7 +36,7 @@ window.addEventListener('turbo:before-render', ({ detail }) => { window.addEventListener('turbo:submit-start', (event) => { // Disable form submission on native app when the form has data-disabled-on-native attribute. - if (event.target.dataset.disabledOnNative === 'true' && App.nativeBridge.isTurboNative) { + if (event.target.dataset.disabledOnNative === 'true' && isNativeApp()) { event.detail.formSubmission.stop() event.stopPropagation() } diff --git a/app/javascript/controllers/flash_bridge_controller.js b/app/javascript/controllers/flash_bridge_controller.js new file mode 100644 index 00000000..32125c7c --- /dev/null +++ b/app/javascript/controllers/flash_bridge_controller.js @@ -0,0 +1,12 @@ +import { Controller } from '@hotwired/stimulus' +import { isNativeApp } from '../helper' + +export default class extends Controller { + static get shouldLoad () { + return isNativeApp() + } + + connect () { + App.nativeBridge.showFlashMessage(this.element.textContent) + } +} diff --git a/app/javascript/controllers/flash_controller.js b/app/javascript/controllers/flash_controller.js index 81644369..45be3676 100644 --- a/app/javascript/controllers/flash_controller.js +++ b/app/javascript/controllers/flash_controller.js @@ -1,6 +1,11 @@ import { Controller } from '@hotwired/stimulus' +import { isNativeApp } from '../helper' export default class extends Controller { + static get shouldLoad () { + return !isNativeApp() + } + static values = { timeout: { type: Number, default: 4000 } } diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index d316d9d1..80282af8 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -28,7 +28,9 @@ import PlaylistSortableController from './playlist_sortable_controller.js' import SearchController from './search_controller.js' -import NativeBridgeController from './native_bridge_controller.js' +import PlaylistSongsBridgeController from './playlist_songs_bridge_controller.js' + +import FlashBridgeController from './flash_bridge_controller.js' application.register('dialog', DialogController) @@ -54,4 +56,6 @@ application.register('playlist-sortable', PlaylistSortableController) application.register('search', SearchController) -application.register('native-bridge', NativeBridgeController) +application.register('playlist-songs-bridge', PlaylistSongsBridgeController) + +application.register('flash-bridge', FlashBridgeController) diff --git a/app/javascript/controllers/native_bridge_controller.js b/app/javascript/controllers/playlist_songs_bridge_controller.js similarity index 92% rename from app/javascript/controllers/native_bridge_controller.js rename to app/javascript/controllers/playlist_songs_bridge_controller.js index 5a0d77d7..3daccfe7 100644 --- a/app/javascript/controllers/native_bridge_controller.js +++ b/app/javascript/controllers/playlist_songs_bridge_controller.js @@ -1,7 +1,12 @@ 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() + } + initialize () { installEventHandler(this) } diff --git a/app/javascript/controllers/playlist_songs_controller.js b/app/javascript/controllers/playlist_songs_controller.js index 0ca7763c..83d39ed0 100644 --- a/app/javascript/controllers/playlist_songs_controller.js +++ b/app/javascript/controllers/playlist_songs_controller.js @@ -1,8 +1,13 @@ import { Controller } from '@hotwired/stimulus' import { installEventHandler } from './mixins/event_handler' import { installPlayingSongIndicator } from './mixins/playing_song_indicator' +import { isNativeApp } from '../helper' export default class extends Controller { + static get shouldLoad () { + return !isNativeApp() + } + static targets = ['item'] initialize () { diff --git a/app/javascript/helper.js b/app/javascript/helper.js index 4764660d..0cc8c54a 100644 --- a/app/javascript/helper.js +++ b/app/javascript/helper.js @@ -33,9 +33,19 @@ function dispatchEvent (element, type, data = null) { element.dispatchEvent(new CustomEvent(type, { detail: data })) } +function isiOSApp () { + return !!(window.webkit && window.webkit.messageHandlers) +} + +function isNativeApp () { + return isiOSApp() +} + export { formatDuration, randomIndex, fetchRequest, - dispatchEvent + dispatchEvent, + isiOSApp, + isNativeApp } diff --git a/app/javascript/native_bridge.js b/app/javascript/native_bridge.js index ddcaf07d..e35787d6 100644 --- a/app/javascript/native_bridge.js +++ b/app/javascript/native_bridge.js @@ -1,6 +1,8 @@ +import { isiOSApp } from './helper' + class NativeBridge { playAll (resourceType, resourceId) { - if (this.#isTurboiOS) { + if (isiOSApp()) { window.webkit.messageHandlers.nativeApp.postMessage({ name: 'playAll', resourceType, @@ -10,7 +12,7 @@ class NativeBridge { } playSong (songId) { - if (this.#isTurboiOS) { + if (isiOSApp()) { window.webkit.messageHandlers.nativeApp.postMessage({ name: 'playSong', songId: Number(songId) @@ -19,7 +21,7 @@ class NativeBridge { } playNext (songId) { - if (this.#isTurboiOS) { + if (isiOSApp()) { window.webkit.messageHandlers.nativeApp.postMessage({ name: 'playNext', songId: Number(songId) @@ -28,7 +30,7 @@ class NativeBridge { } playLast (songId) { - if (this.#isTurboiOS) { + if (isiOSApp()) { window.webkit.messageHandlers.nativeApp.postMessage({ name: 'playLast', songId: Number(songId) @@ -41,7 +43,7 @@ class NativeBridge { } updateTheme (theme) { - if (this.#isTurboiOS) { + if (isiOSApp()) { window.webkit.messageHandlers.nativeApp.postMessage({ name: 'updateTheme', theme @@ -49,12 +51,13 @@ class NativeBridge { } } - get isTurboNative () { - return this.#isTurboiOS - } - - get #isTurboiOS () { - return !!(window.webkit && window.webkit.messageHandlers) + showFlashMessage (message) { + if (isiOSApp()) { + window.webkit.messageHandlers.nativeApp.postMessage({ + name: 'showFlashMessage', + message + }) + } } } diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb index d31a5e06..bd1f01ff 100644 --- a/app/views/albums/show.html.erb +++ b/app/views/albums/show.html.erb @@ -1,6 +1,6 @@ <% page_title_tag @album.title %> -
+
<%= image_tag image_url_for(@album), class: "c-card__image u-image-large", data: {test_id: "album_image"} %>
@@ -22,9 +22,9 @@ data: { "disabled-on-native" => "true", "turbo-frame" => "turbo-playlist", - "action" => "native-bridge#playAll", - "native-bridge-resource-type-param" => "albums", - "native-bridge-resource-id-param" => @album.id + "action" => "playlist-songs-bridge#playAll", + "playlist-songs-bridge-resource-type-param" => "albums", + "playlist-songs-bridge-resource-id-param" => @album.id } } ) %> @@ -44,7 +44,7 @@ form_class: "o-flex__item--grow-1", form: { data: { - "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay native-bridge#playSong", + "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay playlist-songs-bridge#playSong", "turbo-frame" => "turbo-playlist", "disabled-on-native" => "true" } @@ -77,7 +77,7 @@ form: { data: { "turbo-frame" => "turbo-playlist", - "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext native-bridge#playNext", + "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext playlist-songs-bridge#playNext", "disabled-on-native" => "true" } } @@ -89,7 +89,7 @@ form: { data: { "turbo-frame" => "turbo-playlist", - "delegated-action" => "native-bridge#playLast", + "delegated-action" => "playlist-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 a043709a..93c66572 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,9 +21,9 @@ data: { "disabled-on-native" => "true", "turbo-frame" => "turbo-playlist", - "action" => "native-bridge#playAll", - "native-bridge-resource-type-param" => "playlists", - "native-bridge-resource-id-param" => @playlist.id + "action" => "playlist-songs-bridge#playAll", + "playlist-songs-bridge-resource-type-param" => "playlists", + "playlist-songs-bridge-resource-id-param" => @playlist.id } } ) %> diff --git a/app/views/playlists/songs/_song.html.erb b/app/views/playlists/songs/_song.html.erb index 56496e52..3fc228c1 100644 --- a/app/views/playlists/songs/_song.html.erb +++ b/app/views/playlists/songs/_song.html.erb @@ -7,7 +7,7 @@ form_class: "o-flex__item--grow-1", form: { data: { - "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay native-bridge#playSong", + "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay playlist-songs-bridge#playSong", "turbo-frame" => "turbo-playlist", "disabled-on-native" => "true" } @@ -37,7 +37,7 @@ form: { data: { "turbo-frame" => "turbo-playlist", - "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext native-bridge#playNext", + "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext playlist-songs-bridge#playNext", "disabled-on-native" => "true" } } @@ -49,7 +49,7 @@ form: { data: { "turbo-frame" => "turbo-playlist", - "delegated-action" => "native-bridge#playLast", + "delegated-action" => "playlist-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 d3b53c22..0d3e0337 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,9 +23,9 @@ data: { "disabled-on-native" => "true", "turbo-frame" => "turbo-playlist", - "action" => "native-bridge#playAll", - "native-bridge-resource-type-param" => "playlists", - "native-bridge-resource-id-param" => @playlist.id + "action" => "playlist-songs-bridge#playAll", + "playlist-songs-bridge-resource-type-param" => "playlists", + "playlist-songs-bridge-resource-id-param" => @playlist.id } } ) %> diff --git a/app/views/search/songs/_table.html.erb b/app/views/search/songs/_table.html.erb index a008caef..a93f64d6 100644 --- a/app/views/search/songs/_table.html.erb +++ b/app/views/search/songs/_table.html.erb @@ -1,4 +1,4 @@ -
+
<%= t("label.name") %>
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb index 441fe91e..017a0c27 100644 --- a/app/views/shared/_flash.html.erb +++ b/app/views/shared/_flash.html.erb @@ -1,5 +1,7 @@ -<% flash.each do |key, value| %> -
- <%= h value %> -
-<% end %> +
+ <% flash.each do |key, value| %> +
+ <%= h value %> +
+ <% end %> +
diff --git a/app/views/songs/_song.html.erb b/app/views/songs/_song.html.erb index 1323140d..4474dd1c 100644 --- a/app/views/songs/_song.html.erb +++ b/app/views/songs/_song.html.erb @@ -6,7 +6,7 @@ data: {test_id: "song_item"}, form: { data: { - "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay native-bridge#playSong", + "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlay playlist-songs-bridge#playSong", "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#checkBeforePlayNext native-bridge#playNext", + "delegated-action" => "turbo:submit-start->playlist-songs#checkBeforePlayNext playlist-songs-bridge#playNext", "disabled-on-native" => "true" } } @@ -51,7 +51,7 @@ form: { data: { "turbo-frame" => "turbo-playlist", - "delegated-action" => "native-bridge#playLast", + "delegated-action" => "playlist-songs-bridge#playLast", "disabled-on-native" => "true" } } diff --git a/app/views/songs/_table.html.erb b/app/views/songs/_table.html.erb index b16c12bd..35b9f17c 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("label.name") %>