self-hosted/algora-tv
1
0
Fork 0
mirror of https://github.com/algora-io/tv.git synced 2025-12-23 21:51:11 +02:00
Code Releases Activity

migrate core components to latest (#1)

Browse Source 
* upgrade core components to latest

* adapt styles for dark mode

* restore custom components

* use new components & patterns

* delete icon component

* update tailwind config

* delete phoenix.css

* add ::selection style

* delete obsolete title_bar comp
This commit is contained in:
Zafer Cesur
2024-03-02 18:04:44 +03:00
committed by GitHub
parent fdf3d5adf0
commit 7684f3fc37
8 changed files with 747 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/app.css
View File

@@ -3,6 +3,11 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
::selection {
background: #4338ca;
color: #fff;
}
@layer base {
:root {
--radius: 0.5rem;

101
assets/css/phoenix.css
View File

File diff suppressed because one or more lines are too long

60
assets/tailwind.config.js
View File

@@ -1,18 +1,10 @@
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");
module.exports = {
content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
theme: {
extend: {
colors: {
white: colors.white,
green: colors.emerald,
purple: colors.indigo,
yellow: colors.amber,
gray: {
const gray = {
50: "#f8f9fc",
100: "#f1f2f9",
200: "#e1e2ef",
@@ -24,9 +16,47 @@ module.exports = {
800: "#1d1e3a",
900: "#100f29",
950: "#050217",
},
},
},
},
plugins: [require("@tailwindcss/forms")],
};
module.exports = {
content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
theme: {
extend: {
colors: {
gray,
green: colors.emerald,
purple: colors.indigo,
yellow: colors.amber,
},
},
},
plugins: [
require("@tailwindcss/forms"),
// Allows prefixing tailwind classes with LiveView classes to add rules
// only when LiveView classes are applied, for example:
//
// <div class="phx-click-loading:animate-ping">
//
plugin(({ addVariant }) =>
addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
),
plugin(({ addVariant }) =>
addVariant("phx-click-loading", [
".phx-click-loading&",
".phx-click-loading &",
])
),
plugin(({ addVariant }) =>
addVariant("phx-submit-loading", [
".phx-submit-loading&",
".phx-submit-loading &",
])
),
plugin(({ addVariant }) =>
addVariant("phx-change-loading", [
".phx-change-loading&",
".phx-change-loading &",
])
),
],
};

4
lib/algora/accounts/user.ex
View File

@@ -80,8 +80,8 @@ defmodule Algora.Accounts.User do
def settings_changeset(%User{} = user, params) do
user
|> cast(params, [:handle, :channel_tagline])
|> validate_required([:handle, :channel_tagline])
|> cast(params, [:handle, :name, :channel_tagline])
|> validate_required([:handle, :name, :channel_tagline])
|> validate_handle()
end

982
lib/algora_web/components/core_components.ex
View File

File diff suppressed because it is too large Load Diff

13
lib/algora_web/live/home_live.ex
View File

@@ -7,12 +7,19 @@ defmodule AlgoraWeb.HomeLive do
def render(assigns) do
~H"""
<div class="lg:mr-[20rem]">
<.title_bar :if={!@current_user}>
<.header :if={!@current_user}>
<.logo />
<:actions>
<.button primary patch="/auth/login">Login</.button>
<.link
navigate="/auth/login"
class="flex rounded px-5 py-2.5 overflow-hidden group bg-purple-500 relative hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-purple-400 transition-all ease-out duration-300"
>
<span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease">
</span>
<span class="relative font-semibold">Login</span>
</.link>
</:actions>
</.title_bar>
</.header>
<.playlist id="playlist" videos={@streams.videos} />
</div>
"""

9
lib/algora_web/live/layout_component.ex
View File

@@ -35,14 +35,7 @@ defmodule AlgoraWeb.LayoutComponent do
~H"""
<div class={unless @show, do: "hidden"}>
<%= if @show do %>
<.modal
show
id={@id}
navigate={@show.navigate}
patch={@show.patch}
on_cancel={@show.on_cancel}
on_confirm={@show.on_confirm}
>
<.modal show id={@id} on_cancel={@show.on_cancel} on_confirm={@show.on_confirm}>
<:title><%= @show.title %></:title>
<.live_component module={@show.module} {@show} />
<:cancel>Cancel</:cancel>

124
lib/algora_web/live/settings_live.ex
View File

@@ -5,96 +5,34 @@ defmodule AlgoraWeb.SettingsLive do
def render(assigns) do
~H"""
<.title_bar>
<.header>
Settings
</.title_bar>
<:subtitle>
Update your account details
</:subtitle>
</.header>
<div class="max-w-3xl px-4 sm:px-6 lg:px-8 mt-6">
<.form
:let={f}
id="settings-form"
for={@changeset}
phx-change="validate"
phx-submit="save"
class="space-y-8 divide-y divide-gray-700"
>
<div class="space-y-8 divide-y divide-gray-700">
<div class="max-w-3xl px-4 sm:px-6 lg:px-8 mt-4">
<.simple_form for={@form} phx-change="validate" phx-submit="save">
<.input field={@form[:handle]} label="Handle" />
<.input field={@form[:name]} label="Name" />
<.input label="Email" name="email" value={@current_user.email} disabled />
<.input field={@form[:channel_tagline]} label="Stream tagline" />
<div>
<div class="mt-6 flex flex-col gap-y-6">
<div class="sm:col-span-4">
<label for="handle" class="block text-sm font-medium text-gray-200">
Handle
</label>
<div class="mt-1 flex rounded-md shadow-sm">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-600 bg-gray-900 text-gray-400 sm:text-sm">
<%= URI.parse(AlgoraWeb.Endpoint.url()).host %>/
</span>
<%= text_input(f, :handle,
class:
"bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-600"
) %>
</div>
<.error field={:handle} input_name="user[handle]" errors={f.errors} />
</div>
<div class="sm:col-span-4">
<label for="handle" class="block text-sm font-medium text-gray-200">
Email
</label>
<div class="mt-1 flex rounded-md shadow-sm">
<%= text_input(f, :email,
disabled: true,
class:
"bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-md sm:text-sm border-gray-600 bg-gray-900"
) %>
</div>
</div>
<div class="sm:col-span-4">
<label for="about" class="block text-sm font-medium text-gray-200">
Stream title
</label>
<div class="mt-1">
<%= text_input(f, :channel_tagline,
class:
"bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-md sm:text-sm border-gray-600"
) %>
<.error
field={:channel_tagline}
input_name="user[channel_tagline]"
errors={f.errors}
<.input
label="Stream URL"
name="stream_url"
value={"rtmp://#{URI.parse(AlgoraWeb.Endpoint.url()).host}:#{Algora.config([:rtmp_port])}/#{@current_user.stream_key}"}
disabled
/>
</div>
</div>
<div class="sm:col-span-4">
<label for="about" class="block text-sm font-medium text-gray-200">
Stream URL
</label>
<div class="mt-1">
<div class="py-2 border px-3 border-1 bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-md sm:text-sm border-gray-600">
<%= "rtmp://#{URI.parse(AlgoraWeb.Endpoint.url()).host}:#{Algora.config([:rtmp_port])}/#{@current_user.stream_key}" %>
</div>
</div>
<p class="mt-2 text-sm text-gray-400">
<%= "Paste into OBS Studio > File > Settings > Stream > Server" %>
</p>
</div>
</div>
</div>
</div>
<div class="pt-5">
<div class="flex justify-end">
<button
type="submit"
class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-400"
>
Save
</button>
</div>
</div>
</.form>
<:actions>
<.button>Save</.button>
</:actions>
</.simple_form>
</div>
"""
end
@@ -110,12 +48,20 @@ defmodule AlgoraWeb.SettingsLive do
end
changeset = Accounts.change_settings(current_user, %{})
{:ok, assign(socket, current_user: current_user, changeset: changeset)}
{:ok,
socket
|> assign(current_user: current_user)
|> assign_form(changeset)}
end
def handle_event("validate", %{"user" => params}, socket) do
changeset = Accounts.change_settings(socket.assigns.current_user, params)
{:noreply, assign(socket, changeset: Map.put(changeset, :action, :validate))}
changeset =
socket.assigns.current_user
|> Accounts.change_settings(params)
|> Map.put(:action, :validate)
{:noreply, assign_form(socket, changeset)}
end
def handle_event("save", %{"user" => params}, socket) do
@@ -124,10 +70,10 @@ defmodule AlgoraWeb.SettingsLive do
{:noreply,
socket
|> assign(current_user: user)
|> put_flash(:info, "settings updated!")}
|> put_flash(:info, "Settings updated!")}
{:error, changeset} ->
{:noreply, assign(socket, changeset: changeset)}
{:noreply, assign_form(socket, changeset)}
end
end
@@ -138,4 +84,8 @@ defmodule AlgoraWeb.SettingsLive do
defp apply_action(socket, :edit, _params) do
socket |> assign(:page_title, "Settings")
end
defp assign_form(socket, %Ecto.Changeset{} = changeset) do
assign(socket, :form, to_form(changeset))
end
end