diff --git a/assets/js/app.js b/assets/js/app.js
index e769331..2459ce4 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -60,7 +60,7 @@ if (
const sorter = new Sortable(this.el, {
animation: 400,
- delay: 20,
+ delay: 300,
dragClass: "drag-item",
forceFallback: true,
ghostClass: "drag-ghost",
diff --git a/assets/js/youtube/hook.js b/assets/js/youtube/hook.js
index a28fed6..93c36a4 100644
--- a/assets/js/youtube/hook.js
+++ b/assets/js/youtube/hook.js
@@ -39,6 +39,11 @@ const udpateTimeDisplays = (
export default {
backdrop_id: null,
endTimeTrackerId: null,
+ handleCallbackEvent: async (callbackEvent, args = {}) => {
+ if (callbackEvent) {
+ await this.pushEventTo(this.el, callbackEvent, args)
+ }
+ },
mounted() {
/**
* on_container_mounted
@@ -112,6 +117,11 @@ export default {
)
}, 1000)
hookContext.el.dataset['trackTimeInterval'] = trackTimeInterval
+
+ const backdrop = document.getElementById(this.backdropId)
+ backdrop.classList.add('opacity-0')
+ backdrop.classList.remove('opacity-50')
+
break
case YT.PlayerState.PAUSED:
console.debug("[Player State :: PAUSED")
@@ -270,6 +280,71 @@ export default {
scrollToElement(`${player.media_id}-item`)
})
+
+ /**
+ * change_volume
+ *
+ * Received when the player should change the volume level
+ */
+ this.handleEvent('change_volume', async ({
+ volume_level: volumeLevel,
+ callback_event: callbackEvent = null
+ }) => {
+ console.debug('[Player :: change_volume', volumeLevel)
+ this.player.unMute()
+ this.player.setVolume(volumeLevel)
+
+ await this.handleCallbackEvent(callbackEvent)
+ })
+
+ /**
+ * mute
+ *
+ * Received when the player should mute
+ */
+ this.handleEvent('mute', async ({callback_event: callbackEvent = null}) => {
+ console.debug('[Player :: mute')
+ this.player.mute()
+
+ await this.handleCallbackEvent(callbackEvent)
+ })
+
+ /**
+ * unmute
+ *
+ * Received when the player should unmute
+ */
+ this.handleEvent('unmute', async ({
+ callback_event: callbackEvent = null
+ }) => {
+ console.debug('[Player :: unmute')
+ this.player.unMute()
+
+ await this.handleCallbackEvent(callbackEvent)
+ })
+
+ /**
+ * fullscreen
+ *
+ * Switches to fullscreen mode
+ */
+ this.handleEvent('fullscreen', () => {
+ console.debug('[Player :: fullscreen')
+ const videoIframe = this.player.getIframe()
+
+ console.log("iframe", videoIframe)
+
+ const requestFullScreen =
+ videoIframe.requestFullScreen
+ || videoIframe.mozRequestFullScreen
+ || videoIframe.webkitRequestFullScreen
+
+ console.log(requestFullScreen)
+
+ if (requestFullScreen) {
+ requestFullScreen.bind(videoIframe)();
+ }
+ })
},
player: null,
playerContainerId: null,
diff --git a/config/dev.exs b/config/dev.exs
index f408c7a..79d7b38 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -19,7 +19,7 @@ config :livedj, Livedj.Repo,
config :livedj, LivedjWeb.Endpoint,
# Binding to loopback ipv4 address prevents access from other machines.
# Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
- http: [ip: {127, 0, 0, 1}, port: 4000],
+ http: [ip: {0, 0, 0, 0}, port: 4000],
check_origin: false,
code_reloader: true,
debug_errors: true,
diff --git a/lib/livedj/sessions/channels.ex b/lib/livedj/sessions/channels.ex
index 59b8314..20d2b9a 100644
--- a/lib/livedj/sessions/channels.ex
+++ b/lib/livedj/sessions/channels.ex
@@ -201,14 +201,16 @@ defmodule Livedj.Sessions.Channels do
"""
@spec broadcast_player_play!(binary(), Livedj.Sessions.Player.t()) :: :ok
def broadcast_player_play!(room_id, %Livedj.Sessions.Player{} = player),
- do: broadcast!(player_topic(room_id), {player_play_event(), player})
+ do:
+ broadcast!(player_topic(room_id), {player_play_event(), room_id, player})
@doc """
Broadcasts a #{@player_pause} message to the player topic.
"""
@spec broadcast_player_pause!(binary(), Livedj.Sessions.Player.t()) :: :ok
def broadcast_player_pause!(room_id, %Livedj.Sessions.Player{} = player),
- do: broadcast!(player_topic(room_id), {player_pause_event(), player})
+ do:
+ broadcast!(player_topic(room_id), {player_pause_event(), room_id, player})
# ----------------------------------------------------------------------------
# Playlist brodcasting
diff --git a/lib/livedj_web/components/custom_components.ex b/lib/livedj_web/components/custom_components.ex
index 60dccd2..6897d61 100644
--- a/lib/livedj_web/components/custom_components.ex
+++ b/lib/livedj_web/components/custom_components.ex
@@ -96,10 +96,10 @@ defmodule LivedjWeb.CustomComponents do
"""
def room_grid(assigns) do
assigns =
- with %{modules: %Phoenix.LiveView.LiveStream{}} <- assigns do
+ with %{modules: _modules} <- assigns do
assign(
assigns,
- module_id: assigns.module_id || fn {id, _item} -> id end
+ module_id: assigns.module_id || fn %{id: id} -> id end
)
end
@@ -118,8 +118,9 @@ defmodule LivedjWeb.CustomComponents do
class="
group
h-52 w-40 rounded-lg
- bg-zinc-50 hover:bg-zinc-200 border-[1px] border-zinc-200 dark:border-0
- dark:bg-zinc-800 dark:hover:bg-zinc-700
+ transition duration-300
+ bg-zinc-50 hover:brightness-90 border-[1px] border-zinc-200 dark:border-0
+ dark:bg-zinc-800 dark:hover:bg-zinc-800 dark:hover:brightness-110
"
>
<.livedj_logo theme={@theme} />
-
+
<.version_pill version={Application.spec(:livedj, :vsn)} />
diff --git a/lib/livedj_web/components/layouts/session.html.heex b/lib/livedj_web/components/layouts/session.html.heex
index 136ebe4..9bce376 100644
--- a/lib/livedj_web/components/layouts/session.html.heex
+++ b/lib/livedj_web/components/layouts/session.html.heex
@@ -11,7 +11,7 @@
<.toggle_theme_button theme={@theme} />
-
+ <%!--
<%= if @current_user do %>
-
<.text><%= @current_user.email %>
@@ -51,7 +51,7 @@
<% end %>
-
+
--%>
diff --git a/lib/livedj_web/components/list_component.ex b/lib/livedj_web/components/list_component.ex
index 9997c3a..11e5bea 100644
--- a/lib/livedj_web/components/list_component.ex
+++ b/lib/livedj_web/components/list_component.ex
@@ -86,6 +86,7 @@ defmodule LivedjWeb.ListComponent do