Merge pull request #328 from blackcandy-org/action-cable

Broadcast theme change through turbo stream

Gemfile

@@ -8,7 +8,7 @@ gem "rails", "~> 7.1.0"
 gem "propshaft", "~> 0.7.0"
 
 # Install Turbo on Rails
-gem "turbo-rails", "~> 1.4.0"
+gem "turbo-rails", "~> 1.5.0"
 
 # Install Stimulus on Rails
 gem "stimulus-rails", "~> 1.2.1"

Gemfile.lock

@@ -360,7 +360,7 @@ GEM
     thor (1.3.0)
     tilt (2.3.0)
     timeout (0.4.0)
-    turbo-rails (1.4.0)
+    turbo-rails (1.5.0)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
@@ -423,7 +423,7 @@ DEPENDENCIES
   standard (~> 1.25.0)
   standard-rails
   stimulus-rails (~> 1.2.1)
-  turbo-rails (~> 1.4.0)
+  turbo-rails (~> 1.5.0)
   tzinfo-data
   wahwah (~> 1.5.0)
   web-console (>= 3.3.0)

app/controllers/application_controller.rb

@@ -75,7 +75,7 @@ def redirect_back_with_referer_params(fallback_location:)
 
   def render_flash(type: :success, message: "")
     flash[type] = message unless message.blank?
-    turbo_stream.replace "turbo-flash", partial: "shared/flash"
+    turbo_stream.update "turbo-flash", partial: "shared/flash"
   end
 
   private

app/controllers/users/settings_controller.rb

@@ -6,11 +6,6 @@ class Users::SettingsController < ApplicationController
 
   def update
     return unless @user.update(user_setting_params)
-
-    # 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
 

app/javascript/application.js

@@ -1,6 +1,5 @@
 import '@hotwired/turbo-rails'
 import './controllers'
-import './channels'
 
 import Player from './player'
 import NativeBridge from './native_bridge'
@@ -11,8 +10,6 @@ window.App = {
   nativeBridge: new NativeBridge()
 }
 
-App.nativeBridge.updateTheme(document.body.dataset.colorScheme)
-
 // Use custom rendering to avoid reloading the permanent aside player element.
 // Otherwise the current playlist controller in the aside player will be reconnected every time.
 // And this will lead to unexpected behaviour when updating the current playlist song based on

app/javascript/controllers/index.js

@@ -32,6 +32,10 @@ import PlaylistSongsBridgeController from './playlist_songs_bridge_controller.js
 
 import FlashBridgeController from './flash_bridge_controller.js'
 
+import ThemeController from './theme_controller.js'
+
+import ThemeBridgeController from './theme_bridge_controller.js'
+
 application.register('dialog', DialogController)
 
 application.register('element', ElementController)
@@ -59,3 +63,7 @@ application.register('search', SearchController)
 application.register('playlist-songs-bridge', PlaylistSongsBridgeController)
 
 application.register('flash-bridge', FlashBridgeController)
+
+application.register('theme', ThemeController)
+
+application.register('theme-bridge', ThemeBridgeController)

app/javascript/controllers/theme_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()
+  }
+
+  initialize () {
+    App.nativeBridge.updateTheme(this.element.content)
+  }
+}

app/javascript/controllers/theme_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  initialize () {
+    document.documentElement.dataset.colorScheme = this.element.content
+  }
+}

app/models/user.rb

@@ -12,6 +12,7 @@ class User < ApplicationRecord
   serialize :recently_played_album_ids, type: Array, coder: YAML
 
   before_update :remove_deprecated_password_salt, if: :will_save_change_to_password_digest?
+  after_update :broadcast_theme_change, if: :saved_change_to_theme?
   after_create :create_buildin_playlists
 
   normalizes :email, with: ->(email) { email.strip.downcase }
@@ -71,4 +72,8 @@ def create_buildin_playlists
     create_current_playlist
     create_favorite_playlist
   end
+
+  def broadcast_theme_change
+    broadcast_replace_to self, :theme, target: "turbo-theme", partial: "shared/theme_meta", locals: {theme: theme}
+  end
 end

app/views/layouts/application.html.erb

@@ -1,5 +1,10 @@
+<% content_for :head do %>
+  <%= render partial: "shared/theme_meta", locals: {theme: Current.user.theme} %>
+<% end %>
+
 <% content_for :body do %>
-  <%= turbo_stream_from "media_sync" %>
+  <%= turbo_stream_from "media_sync" if is_admin? %>
+  <%= turbo_stream_from Current.user, :theme %>
 
   <% if native_app? %>
     <%= render "shared/flash" %>

app/views/layouts/base.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-color-scheme='<%= User::DEFAULT_THEME %>'>
   <head>
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
@@ -8,9 +8,10 @@
     <%= favicon_link_tag "link_icon.png", type: "image/png" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <%= yield(:head) %>
   </head>
 
-  <body data-color-scheme='<%= Current.user&.theme || cookies[:theme].presence || User::DEFAULT_THEME %>'>
+  <body>
     <%= content_for?(:body) ? yield(:body) : yield %>
     <%= render "shared/icons" %>
   </body>

app/views/shared/_theme_meta.html.erb

@@ -0,0 +1 @@
+<meta id="turbo-theme" data-controller='theme theme-bridge' name="black-candy-theme" content='<%= theme %>'>

test/models/user_test.rb

@@ -13,7 +13,7 @@ class UserTest < ActiveSupport::TestCase
   ].freeze
 
   setup do
-    @user = User.create(email: "test@test.com", password: "foobar")
+    @user = User.create(email: "test@test.com", password: "foobar", theme: "auto")
     @user.playlists.create(name: "test")
   end
 
@@ -120,4 +120,14 @@ class UserTest < ActiveSupport::TestCase
 
     assert_equal User::RECENTLY_PLAYED_LIMIT, @user.recently_played_album_ids.count
   end
+
+  test "should broadcast theme change" do
+    assert_no_turbo_stream_broadcasts [@user, :theme] do
+      @user.update(theme: "auto")
+    end
+
+    assert_turbo_stream_broadcasts [@user, :theme] do
+      @user.update(theme: "light")
+    end
+  end
 end

test/test_helper.rb

@@ -34,6 +34,7 @@
 WebMock.disable_net_connect!(allow_localhost: true, net_http_connect_on_start: true, allow: allowed_sites_for_webmock)
 
 class ActiveSupport::TestCase
+  include Turbo::Broadcastable::TestHelper
   # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
   fixtures :all