feat: add elevator music

“Cengiz · “Cengiz · commit f20ba471216c · 2026-01-06T20:45:53.000+01:00
diff --git a/app/assets/music/elevator-music-bossa-nova-background-music-version-60s-10900.mp3 b/app/assets/music/elevator-music-bossa-nova-background-music-version-60s-10900.mp3
diff --git a/app/components/music_toggle_component.html.erb b/app/components/music_toggle_component.html.erb
@@ -0,0 +1,11 @@
+<button type="button"
+        id="music-toggle-button"
+        data-elevator-music-target="button"
+        data-action="click->elevator-music#toggle"
+        <%= "data-playing" if playing? %>
+        class="h-10 sm:h-12 w-10 sm:w-12 font-bold text-lg border-[2px] rounded-[1px] transition-all duration-200 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] sm:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:-translate-y-0.5 active:translate-y-0 border-zinc-900 flex items-center justify-center
+               data-[playing]:bg-emerald-400 data-[playing]:text-zinc-900
+               bg-white text-zinc-900 hover:bg-zinc-100"
+        title="<%= playing? ? 'Stop elevator music' : 'Play elevator music' %>">
+  <span class="text-base"><%= playing? ? "🔊" : "🎵" %></span>
+</button>
diff --git a/app/components/music_toggle_component.rb b/app/components/music_toggle_component.rb
@@ -0,0 +1,11 @@
+class MusicToggleComponent < ApplicationComponent
+  def initialize(retro:)
+    @retro = retro
+  end
+
+  private
+
+  def playing?
+    @retro.music_playing?
+  end
+end
diff --git a/app/controllers/retros/musics_controller.rb b/app/controllers/retros/musics_controller.rb
@@ -0,0 +1,34 @@
+class Retros::MusicsController < ApplicationController
+  before_action :set_retro
+  before_action :ensure_participant
+  before_action :ensure_admin
+
+  def update
+    @retro.update!(music_playing: !@retro.music_playing)
+    broadcast_music_state
+
+    head :ok
+  end
+
+  private
+
+  def set_retro
+    @retro = Current.account.retros.find(params[:retro_id])
+  end
+
+  def ensure_participant
+    redirect_to retros_path unless @retro.participant?(Current.user)
+  end
+
+  def ensure_admin
+    head :forbidden unless @retro.admin?(Current.user)
+  end
+
+  def broadcast_music_state
+    Turbo::StreamsChannel.broadcast_action_to(
+      @retro,
+      action: :music,
+      attributes: { state: @retro.music_playing ? "playing" : "stopped" }
+    )
+  end
+end
diff --git a/app/javascript/controllers/elevator_music_controller.js b/app/javascript/controllers/elevator_music_controller.js
@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    playing: Boolean
+  }
+
+  static targets = ["audio", "button", "prompt"]
+
+  connect() {
+    // If music was playing when page loaded, try to start it
+    if (this.playingValue && this.hasAudioTarget) {
+      this.audioTarget.play().then(() => {
+        if (this.hasPromptTarget) this.promptTarget.classList.add("hidden")
+      }).catch(e => {
+        console.log("[Music] Autoplay blocked on connect:", e)
+        // Show prompt for user to enable audio
+        if (this.hasPromptTarget) this.promptTarget.classList.remove("hidden")
+      })
+    }
+  }
+
+  toggle() {
+    const isPlaying = !this.audioTarget.paused
+
+    // Update UI immediately for responsive feel
+    if (isPlaying) {
+      this.audioTarget.pause()
+      if (this.hasButtonTarget) delete this.buttonTarget.dataset.playing
+      if (this.hasPromptTarget) this.promptTarget.classList.add("hidden")
+    } else {
+      this.audioTarget.play().catch(e => console.log("[Music] Autoplay blocked:", e))
+      if (this.hasButtonTarget) this.buttonTarget.dataset.playing = "true"
+    }
+
+    // Persist to server (will broadcast to other clients)
+    fetch(this.urlValue, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+      }
+    })
+  }
+
+  // Called when participant clicks the "enable audio" prompt
+  enableAudio() {
+    if (this.hasAudioTarget) {
+      this.audioTarget.play().then(() => {
+        if (this.hasPromptTarget) this.promptTarget.classList.add("hidden")
+        if (this.hasButtonTarget) this.buttonTarget.dataset.playing = "true"
+      }).catch(e => console.log("[Music] Still blocked:", e))
+    }
+  }
+}
diff --git a/app/javascript/turbo_stream_actions.js b/app/javascript/turbo_stream_actions.js
@@ -41,3 +41,29 @@ Turbo.StreamActions.highlight = function() {
     }
   })
 }
+
+// Custom Turbo Stream action to control elevator music across all connected clients
+Turbo.StreamActions.music = function() {
+  const state = this.getAttribute("state")
+  const audio = document.getElementById("elevator-music-audio")
+  const toggleButton = document.getElementById("music-toggle-button")
+  const enablePrompt = document.getElementById("music-enable-prompt")
+
+  if (!audio) return
+
+  if (state === "playing") {
+    audio.play().then(() => {
+      // Autoplay worked, hide prompt if visible
+      if (enablePrompt) enablePrompt.classList.add("hidden")
+      if (toggleButton) toggleButton.dataset.playing = "true"
+    }).catch(e => {
+      console.log("[Music] Autoplay blocked:", e)
+      // Show prompt for users to click to enable audio
+      if (enablePrompt) enablePrompt.classList.remove("hidden")
+    })
+  } else {
+    audio.pause()
+    if (toggleButton) delete toggleButton.dataset.playing
+    if (enablePrompt) enablePrompt.classList.add("hidden")
+  }
+}
diff --git a/app/models/retro.rb b/app/models/retro.rb
@@ -49,12 +49,9 @@ def back_phase!
     current_index = PHASE_ORDER.index(phase.to_sym)
     return if current_index.nil? || current_index <= PHASE_ORDER.index(:brainstorming)
 
-    from_phase = phase
     prev_phase = PHASE_ORDER[current_index - 1]
     update!(phase: prev_phase, highlighted_user_id: nil)
     participants.update_all(finished: false)
-
-    record_event("retro.phase_changed", particulars: { from: from_phase, to: phase, direction: "back" })
   end
 
   def previous_phase
diff --git a/app/views/layouts/retro.html.erb b/app/views/layouts/retro.html.erb
@@ -90,10 +90,40 @@
           </p>
         </div>
 
-        <div class="flex flex-wrap items-center gap-2 justify-center sm:justify-end w-full sm:w-auto">
+        <div class="flex flex-wrap items-center gap-2 justify-center sm:justify-end w-full sm:w-auto"
+             data-controller="elevator-music"
+             data-elevator-music-url-value="<%= retro_music_path(@retro) %>"
+             data-elevator-music-playing-value="<%= @retro.music_playing? %>">
+
+          <%# Hidden audio element for elevator music %>
+          <audio id="elevator-music-audio"
+                 data-elevator-music-target="audio"
+                 src="<%= asset_path('elevator-music-bossa-nova-background-music-version-60s-10900.mp3') %>"
+                 loop
+                 preload="auto"
+                 style="display: none;">
+          </audio>
+
+          <%# Enable audio prompt for participants (shown when browser blocks autoplay) %>
+          <button type="button"
+                  id="music-enable-prompt"
+                  data-elevator-music-target="prompt"
+                  data-action="click->elevator-music#enableAudio"
+                  class="hidden h-10 sm:h-12 px-4 sm:px-6 font-bold uppercase tracking-widest text-xs sm:text-sm bg-amber-400 text-zinc-900 border-[2px] border-zinc-900 rounded-[1px] transition-all duration-200 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:-translate-y-0.5 active:translate-y-0 animate-pulse">
+            <span class="flex items-center gap-2">
+              <span>🎵</span>
+              <span>Click to enable music</span>
+            </span>
+          </button>
+
           <%# Phase-specific actions (e.g., votes remaining) %>
           <%= yield :header_actions %>
 
+          <%# Music toggle button - admin only %>
+          <% if @retro.admin?(Current.user) %>
+            <%= render MusicToggleComponent.new(retro: @retro) %>
+          <% end %>
+
           <%# I am finished button - available to all participants, hidden when retro is complete %>
           <% if @current_participant.present? && !@retro.complete? %>
             <%= button_to retro_finished_path(@retro),
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -5,3 +5,4 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << Rails.root.join("app/assets/music")
diff --git a/config/routes.rb b/config/routes.rb
@@ -30,6 +30,7 @@
       end
       resources :votes, only: %i[create destroy]
       resource :highlight, only: %i[update destroy]
+      resource :music, only: :update
     end
     resources :feedbacks, only: %i[ new create show edit update destroy ] do
       resource :publish, only: :create, module: :feedbacks
diff --git a/db/migrate/20260106192433_add_music_playing_to_retros.rb b/db/migrate/20260106192433_add_music_playing_to_retros.rb
@@ -0,0 +1,5 @@
+class AddMusicPlayingToRetros < ActiveRecord::Migration[8.1]
+  def change
+    add_column :retros, :music_playing, :boolean, default: false, null: false
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
diff --git a/test/controllers/retros/musics_controller_test.rb b/test/controllers/retros/musics_controller_test.rb
@@ -0,0 +1,50 @@
+require "test_helper"
+
+class Retros::MusicControllerTest < ActionDispatch::IntegrationTest
+  setup do
+    @retro = retros(:one)
+    @admin_user = users(:one)
+    @member_user = users(:two)
+    # Add member as participant (non-admin)
+    @retro.add_participant(@member_user, role: :participant)
+  end
+
+  test "admin can toggle music on" do
+    sign_in_as :one
+    @retro.update!(music_playing: false)
+
+    patch retro_music_path(@retro)
+
+    assert_response :ok
+    assert @retro.reload.music_playing?
+  end
+
+  test "admin can toggle music off" do
+    sign_in_as :one
+    @retro.update!(music_playing: true)
+
+    patch retro_music_path(@retro)
+
+    assert_response :ok
+    assert_not @retro.reload.music_playing?
+  end
+
+  test "non-admin participant cannot toggle music" do
+    sign_in_as :two
+    @retro.update!(music_playing: false)
+
+    patch retro_music_path(@retro)
+
+    assert_response :forbidden
+    assert_not @retro.reload.music_playing?
+  end
+
+  test "unauthenticated user cannot toggle music" do
+    @retro.update!(music_playing: false)
+
+    patch retro_music_path(@retro, script_name: nil)
+
+    assert_redirected_to session_menu_path(script_name: nil)
+    assert_not @retro.reload.music_playing?
+  end
+end
diff --git a/test/models/retro_test.rb b/test/models/retro_test.rb
@@ -81,20 +81,6 @@ class RetroTest < ActiveSupport::TestCase
     assert_not participant.reload.finished?
   end
 
-  test "back_phase! records phase change event" do
-    @retro.update!(phase: :voting)
-
-    assert_difference -> { @retro.retro_events.count }, 1 do
-      @retro.back_phase!
-    end
-
-    event = @retro.retro_events.order(:id).last
-    assert_equal "retro.phase_changed", event.action
-    assert_equal "voting", event.particulars["from"]
-    assert_equal "grouping", event.particulars["to"]
-    assert_equal "back", event.particulars["direction"]
-  end
-
   # === previous_phase tests ===
 
   test "previous_phase returns brainstorming when on grouping" do

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,4 @@`
`5`	`5`
`6`	`6`	`# Add additional assets to the asset load path.`
`7`	`7`	`# Rails.application.config.assets.paths << Emoji.images_path`
	`8`	`+Rails.application.config.assets.paths << Rails.root.join("app/assets/music")`