Merge pull request #214 from blackcandy-org/dev

Support change theme on native client
blackcandy-org · Oct 27, 2022 · 71f5ad6 · 71f5ad6
2 parents fb6c0b0 + b551a39
commit 71f5ad6
Show file tree

Hide file tree

Showing 18 changed files with 62 additions and 31 deletions.
diff --git a/app/channels/application_cable/channel.rb b/app/channels/application_cable/channel.rb
@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end
diff --git a/app/channels/application_cable/connection.rb b/app/channels/application_cable/connection.rb
@@ -1,15 +1,15 @@
 module ApplicationCable
   class Connection < ActionCable::Connection::Base
-    identified_by :current_user_id
+    identified_by :current_user
 
     def connect
-      self.current_user_id = find_verified_user
+      self.current_user = find_verified_user
     end
 
     private
 
     def find_verified_user
-      cookies.signed[:user_id] || reject_unauthorized_connection
+      User.find_by(id: cookies.signed[:user_id]) || reject_unauthorized_connection
     end
   end
 end
diff --git a/app/channels/theme_channel.rb b/app/channels/theme_channel.rb
@@ -0,0 +1,5 @@
+class ThemeChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "theme_update"
+  end
+end
diff --git a/app/controllers/users/settings_controller.rb b/app/controllers/users/settings_controller.rb
@@ -9,6 +9,7 @@ def update
 
     # set theme cookie to track theme when user didn't login
     cookies.permanent[:theme] = @user.theme
+    ActionCable.server.broadcast("theme_update", {theme: @user.theme})
 
     flash.now[:success] = t("success.update")
   end

diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,8 +1,11 @@
 import '@hotwired/turbo-rails'
 import './controllers'
+import './channels'
 
 import Player from './player'
 import NativeBridge from './native_bridge'
 
 window.App = { player: new Player() }
 window.NativeBridge = new NativeBridge()
+
+window.NativeBridge.updateTheme(document.body.dataset.colorScheme)
diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js
@@ -0,0 +1,3 @@
+import { createConsumer } from '@rails/actioncable'
+
+export default createConsumer()
diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js
@@ -0,0 +1 @@
+import './theme'
diff --git a/app/javascript/channels/theme.js b/app/javascript/channels/theme.js
@@ -0,0 +1,10 @@
+import consumer from './consumer'
+
+consumer.subscriptions.create('ThemeChannel', {
+  received (data) {
+    const theme = data.theme
+
+    document.body.dataset.colorScheme = theme
+    window.NativeBridge.updateTheme(theme)
+  }
+})
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -26,8 +26,6 @@ import PlaylistSortableController from './playlist_sortable_controller.js'
 
 import SearchController from './search_controller.js'
 
-import ThemeController from './theme_controller.js'
-
 application.register('dialog', DialogController)
 
 application.register('element', ElementController)
@@ -49,5 +47,3 @@ application.register('playlist-songs', PlaylistSongsController)
 application.register('playlist-sortable', PlaylistSortableController)
 
 application.register('search', SearchController)
-
-application.register('theme', ThemeController)
diff --git a/app/javascript/controllers/theme_controller.js b/app/javascript/controllers/theme_controller.js
diff --git a/app/javascript/native_bridge.js b/app/javascript/native_bridge.js
@@ -20,6 +20,15 @@ class NativeBridge {
     window.Turbo.visit(`/search?query=${query}`)
   }
 
+  updateTheme (theme) {
+    if (this._isTurboiOS) {
+      window.webkit.messageHandlers.nativeApp.postMessage({
+        name: 'updateTheme',
+        theme
+      })
+    }
+  }
+
   get nativeTitle () {
     return document.querySelector('meta[data-native-title]').dataset.nativeTitle
   }

diff --git a/app/models/user.rb b/app/models/user.rb
@@ -2,7 +2,7 @@
 
 class User < ApplicationRecord
   AVAILABLE_THEME_OPTIONS = %w[dark light auto].freeze
-  DEFAULT_THEME = "dark"
+  DEFAULT_THEME = "auto"
   RECENTLY_PLAYED_LIMIT = 10
 
   include ScopedSetting

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-color-scheme='<%= Current.user&.theme || cookies[:theme].presence || User::DEFAULT_THEME  %>'>
+<html>
   <head>
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
@@ -15,7 +15,7 @@
     <script id='turbo-script'></script>
   </head>
 
-  <body>
+  <body data-color-scheme='<%= Current.user&.theme || cookies[:theme].presence || User::DEFAULT_THEME  %>'>
     <%= content_for?(:body) ? yield(:body) : yield %>
     <%= render 'shared/icons' %>
   </body>

diff --git a/app/views/users/settings/_form.html.erb b/app/views/users/settings/_form.html.erb
@@ -1,10 +1,10 @@
 <h2><%= t('label.personal') %></h2>
-<%= form_with model: user, url: user_setting_path(user), method: :put, class: 'c-form', data: { controller: 'theme', action: 'turbo:submit-end->theme#update' } do |form| %>
+<%= form_with model: user, url: user_setting_path(user), method: :put, class: 'c-form' do |form| %>
   <div class='c-form__field'>
     <%= form.label :theme %>
     <% User::AVAILABLE_THEME_OPTIONS.each do |option| %>
       <div class='c-form__radio'>
-        <%= form.radio_button :theme, option, checked: user.theme == option, data: { theme_option_param: option, action: 'click->theme#select'} %>
+        <%= form.radio_button :theme, option, checked: user.theme == option %>
         <%= form.label "theme_#{option}", option %>
       </div>
     <% end %>

diff --git a/test/channels/application_cable/connection_test.rb b/test/channels/application_cable/connection_test.rb
@@ -4,10 +4,10 @@
 
 class ApplicationCable::ConnectionTest < ActionCable::Connection::TestCase
   test "connects with cookies" do
-    cookies.signed[:user_id] = "1"
+    cookies.signed[:user_id] = users(:visitor1).id
     connect
 
-    assert_equal connection.current_user_id, "1"
+    assert_equal connection.current_user, users(:visitor1)
   end
 
   test "rejects connection without cookies" do

diff --git a/test/channels/theme_channel_test.rb b/test/channels/theme_channel_test.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class ThemeChannelTest < ActionCable::Channel::TestCase
+  test "subscribes and stream for theme" do
+    subscribe
+
+    assert subscription.confirmed?
+    assert_has_stream "theme_update"
+  end
+end
diff --git a/test/controllers/users/settings_controller_test.rb b/test/controllers/users/settings_controller_test.rb
@@ -5,7 +5,7 @@
 class Users::SettingsControllerTest < ActionDispatch::IntegrationTest
   test "should update user settings" do
     current_user = users(:visitor1)
-    assert_equal "dark", current_user.theme
+    assert_equal "auto", current_user.theme
 
     login current_user
     patch user_setting_url(current_user), params: {user: {theme: "light"}}, xhr: true

diff --git a/test/models/user_setting_test.rb b/test/models/user_setting_test.rb
@@ -16,7 +16,7 @@ class UserSettingTest < ActiveSupport::TestCase
 
   test "should update settings" do
     user = users(:visitor1)
-    assert_equal "dark", user.theme
+    assert_equal "auto", user.theme
 
     user.theme = "light"
     user.save
@@ -26,12 +26,12 @@ class UserSettingTest < ActiveSupport::TestCase
 
   test "should validte theme options" do
     user = users(:visitor1)
-    assert_equal "dark", user.theme
+    assert_equal "auto", user.theme
 
     user.theme = "fake_theme"
     user.save
 
     assert_not user.valid?
-    assert_equal "dark", user.reload.theme
+    assert_equal "auto", user.reload.theme
   end
 end