Add native bridge controller for flash message

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()
   }

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)
+  }
+}

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 }
   }

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)

app/javascript/controllers/native_bridge_controller.js → 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)
   }

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 () {

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
 }

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,20 +43,21 @@ class NativeBridge {
   }
 
   updateTheme (theme) {
-    if (this.#isTurboiOS) {
+    if (isiOSApp()) {
       window.webkit.messageHandlers.nativeApp.postMessage({
         name: 'updateTheme',
         theme
       })
     }
   }
 
-  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
+      })
+    }
   }
 }
 

app/views/albums/show.html.erb

@@ -1,6 +1,6 @@
 <% page_title_tag @album.title %>
 
-<div class='o-container o-container--narrow' data-controller='playlist-songs native-bridge'>
+<div class='o-container o-container--narrow' data-controller='playlist-songs playlist-songs-bridge'>
   <div class='c-card c-card--horizontal c-card--center@narrow u-my-large'>
     <%= image_tag image_url_for(@album), class: "c-card__image u-image-large", data: {test_id: "album_image"} %>
     <div class='c-card__body'>
@@ -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"
                       }
                     }

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 native-bridge'>
+  <div data-controller='playlist-songs playlist-songs-bridge'>
     <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,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
                     }
                   }
                 ) %>

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"
                 }
               }

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 native-bridge'>
+  <div data-controller='playlist-songs playlist-songs-bridge'>
     <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,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
                     }
                   }
                 ) %>

app/views/search/songs/_table.html.erb

@@ -1,4 +1,4 @@
-<div role='table' class='c-table' data-controller='playlist-songs native-bridge' cols-at-medium='3' cols-at-small='2'>
+<div role='table' class='c-table' data-controller='playlist-songs playlist-songs-bridge' cols-at-medium='3' cols-at-small='2'>
   <div role='rowgroup'>
     <div role='row'>
       <div role='columnheader'><%= t("label.name") %></div>

app/views/shared/_flash.html.erb

@@ -1,5 +1,7 @@
-<% flash.each do |key, value| %>
-  <div class='o-animation-fadeInDown c-flash__body <%= "c-flash__body--#{key}" %>' data-controller='flash'>
-    <%= h value %>
-  </div>
-<% end %>
+<div class='<%= "u-display-none" if native_app? %>'>
+  <% flash.each do |key, value| %>
+    <div class='o-animation-fadeInDown c-flash__body <%= "c-flash__body--#{key}" %>' data-controller='flash flash-bridge'>
+      <%= h value %>
+    </div>
+  <% end %>
+</div>

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"
                 }
               }

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. %>
-<div role='table' class='c-table' data-controller='playlist-songs native-bridge' cols-at-medium='3' cols-at-small='2'>
+<div role='table' class='c-table' data-controller='playlist-songs playlist-songs-bridge' cols-at-medium='3' cols-at-small='2'>
   <div role='rowgroup'>
     <div role='row'>
       <div role='columnheader'><%= t("label.name") %></div>