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} />
- --%>
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