Tuesday, February 11, 2025
HomeRuby On RailsRetailers and Everlasting Tags | Drifting Ruby

Retailers and Everlasting Tags | Drifting Ruby


# Terminal
rails action_text:set up
rails g scaffold submit title content material:rich_text
rails g scaffold music title file:attachment
rails g stimulus monitor
rails g stimulus music_player
# app/views/musics/index.html.erb
<%# audio_tag url_for(music.file), controls: true if music.file.hooked up? && music.file.audio? %>
<% if music.file.hooked up? && music.file.audio? %>
  <div data-controller="monitor"
    data-track-music-player-outlet="#musicPlayer"
    data-audio-url="<%= url_for(music.file) %>"
    data-audio-title="<%= music.title %>">
  <button data-action="click->monitor#play:stop" class="text-blue-600 hover:text-blue-800">
    ▶ Play
  </button>
<% finish %>
# app/views/layouts/utility.html.erb
<div data-controller="music-player" id="musicPlayer" data-turbo-permanent class="mounted bottom-0 left-0 right-0 bg-gray-900 text-white p-4 flex items-center justify-between hidden">
  <span data-music-player-target="title" class="text-lg font-semibold"></span>
  <audio data-music-player-target="audio" controls class="w-full mx-4"><audio>
<div>
# app/javascript/controllers/music_player_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="music-player"
export default class extends Controller {
  static targets = ["audio", "title"]

  // Possibility 1
  // playMusic() {
  //   this.audioTarget.play()
  //   this.ingredient.classList.take away("hidden")
  // }

  playMusic(supply, title) {
    this.audioTarget.src = supply
    this.titleTarget.textContent = title
    this.audioTarget.play()
    this.ingredient.classList.take away("hidden")
  }
}
# app/javascript/controllers/track_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="monitor"
export default class extends Controller {
  static shops = ["music-player"]

  play() {
    // Possibility 1
    // this.musicPlayerOutlet.audioTarget.src = this.ingredient.dataset.audioUrl
    // this.musicPlayerOutlet.titleTarget.textContent = this.ingredient.dataset.audioTitle
    // this.musicPlayerOutlet.playMusic()

    this.musicPlayerOutlet.playMusic(
      this.ingredient.dataset.audioUrl,
      this.ingredient.dataset.audioTitle
    )
  }
}
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments