From f9edbf76ba4f0b4d0ba6df410bd01f2e230c8fb8 Mon Sep 17 00:00:00 2001 From: Chris McCord Date: Fri, 3 Sep 2021 09:57:15 -0400 Subject: [PATCH] Fixed media player --- assets/css/app.css | 4 +- assets/js/app.js | 8 +- assets/package-lock.json | 37 ++ assets/package.json | 1 + assets/tailwind.config.js | 7 +- lib/live_beats_web/live/home_live.ex | 472 +++++++++++++++++ lib/live_beats_web/live/player_live.ex | 86 +++ lib/live_beats_web/live/signin_live.ex | 113 ++++ lib/live_beats_web/router.ex | 5 +- .../templates/layout/app.html.heex | 2 +- .../templates/layout/live.html.heex | 2 +- .../templates/layout/root.html.heex | 374 ++++++++++++- .../templates/page/index.html.heex | 499 ++++++++++++++++-- 13 files changed, 1547 insertions(+), 63 deletions(-) create mode 100644 lib/live_beats_web/live/home_live.ex create mode 100644 lib/live_beats_web/live/player_live.ex create mode 100644 lib/live_beats_web/live/signin_live.ex diff --git a/assets/css/app.css b/assets/css/app.css index 24920cf..bbc55be 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,5 +1,7 @@ /* This file is for your main application CSS */ -@import "./phoenix.css"; +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; /* Alerts and form errors used by phx.new */ .alert { diff --git a/assets/js/app.js b/assets/js/app.js index 8cc6a85..a35f60b 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,7 +1,6 @@ // We import the CSS which is extracted to its own file by esbuild. // Remove this line if you add a your own CSS build pipeline (e.g postcss). -import "alpinejs" - +import Alpine from "alpinejs" // If you want to use Phoenix channels, run `mix help phx.gen.channel` // to get started and then uncomment the line below. @@ -52,3 +51,8 @@ liveSocket.connect() // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session // >> liveSocket.disableLatencySim() window.liveSocket = liveSocket + +Alpine.start() + +window.Alpine = Alpine + diff --git a/assets/package-lock.json b/assets/package-lock.json index 99b268c..e1f95f7 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -8,6 +8,7 @@ "alpinejs": "^3.2.2" }, "devDependencies": { + "@tailwindcss/forms": "^0.3.3", "autoprefixer": "^10.2.0", "postcss": "^8.3.5", "postcss-import": "^14.0.2", @@ -146,6 +147,18 @@ "node": ">= 8" } }, + "node_modules/@tailwindcss/forms": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.3.tgz", + "integrity": "sha512-U8Fi/gq4mSuaLyLtFISwuDYzPB73YzgozjxOIHsK6NXgg/IWD1FLaHbFlWmurAMyy98O+ao74ksdQefsquBV1Q==", + "dev": true, + "dependencies": { + "mini-svg-data-uri": "^1.2.3" + }, + "peerDependencies": { + "tailwindcss": ">=2.0.0" + } + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -943,6 +956,15 @@ "node": ">=8.6" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz", + "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==", + "dev": true, + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, "node_modules/minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", @@ -1645,6 +1667,15 @@ "fastq": "^1.6.0" } }, + "@tailwindcss/forms": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.3.tgz", + "integrity": "sha512-U8Fi/gq4mSuaLyLtFISwuDYzPB73YzgozjxOIHsK6NXgg/IWD1FLaHbFlWmurAMyy98O+ao74ksdQefsquBV1Q==", + "dev": true, + "requires": { + "mini-svg-data-uri": "^1.2.3" + } + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -2260,6 +2291,12 @@ "picomatch": "^2.2.3" } }, + "mini-svg-data-uri": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz", + "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==", + "dev": true + }, "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", diff --git a/assets/package.json b/assets/package.json index 2b449a1..e36c37d 100644 --- a/assets/package.json +++ b/assets/package.json @@ -6,6 +6,7 @@ "alpinejs": "^3.2.2" }, "devDependencies": { + "@tailwindcss/forms": "^0.3.3", "autoprefixer": "^10.2.0", "postcss": "^8.3.5", "postcss-import": "^14.0.2", diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index c206117..268ccab 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -1,14 +1,19 @@ +const colors = require('tailwindcss/colors') module.exports = { + darkMode: 'media', mode: 'jit', purge: [ './js/**/*.js', '../lib/*_web/**/*.*ex' ], theme: { + colors: colors }, variants: { extend: {}, }, - plugins: [], + plugins: [ + require('@tailwindcss/forms') + ], } \ No newline at end of file diff --git a/lib/live_beats_web/live/home_live.ex b/lib/live_beats_web/live/home_live.ex new file mode 100644 index 0000000..4894ef4 --- /dev/null +++ b/lib/live_beats_web/live/home_live.ex @@ -0,0 +1,472 @@ +defmodule LiveBeatsWeb.HomeLive do + use LiveBeatsWeb, :live_view + + def render(assigns) do + ~H""" + +
+

Who's Here

+ +
+ + +
+
+

Projects

+
+ +
+ + + + """ + end + + def mount(_parmas, _session, socket) do + {:ok, socket} + end +end diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex new file mode 100644 index 0000000..b151616 --- /dev/null +++ b/lib/live_beats_web/live/player_live.ex @@ -0,0 +1,86 @@ +defmodule LiveBeatsWeb.PlayerLive do + use LiveBeatsWeb, :live_view + + def render(assigns) do + ~H""" + +
+
+
+
+
+

+ Black Sands +

+

+ Bonobo +

+
+
+ +
+
+
+
+
<%= @time %>
+
<%= @count %>
+
+
+
+
+ + + + + + + +
+ +
+ + """ + end + + def mount(_parmas, _session, socket) do + if connected?(socket), do: Process.send_after(self(), :tick, 1000) + {:ok, assign(socket, time: inspect(System.system_time()), count: 0)} + end + + def handle_info(:tick, socket) do + Process.send_after(self(), :tick, 1000) + {:noreply, update(socket, :count, &(&1 + 1))} + end +end diff --git a/lib/live_beats_web/live/signin_live.ex b/lib/live_beats_web/live/signin_live.ex new file mode 100644 index 0000000..f7ac254 --- /dev/null +++ b/lib/live_beats_web/live/signin_live.ex @@ -0,0 +1,113 @@ +defmodule LiveBeatsWeb.SigninLive do + use LiveBeatsWeb, :live_view + + def render(assigns) do + ~H""" +
+
+ Workflow +

+ Sign in to your account +

+

+ Or + + start your 14-day free trial + +

+
+ +
+
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ + +
+ +
+ + Forgot your password? + +
+
+ +
+ +
+
+ +
+
+
+
+
+
+ + Or continue with + +
+
+ +
+ + + + + +
+
+
+
+
+ """ + end + + def mount(_parmas, _session, socket) do + {:ok, socket} + end +end diff --git a/lib/live_beats_web/router.ex b/lib/live_beats_web/router.ex index 5e0680e..01bfb1a 100644 --- a/lib/live_beats_web/router.ex +++ b/lib/live_beats_web/router.ex @@ -17,7 +17,10 @@ defmodule LiveBeatsWeb.Router do scope "/", LiveBeatsWeb do pipe_through :browser - get "/", PageController, :index + live_session :default do + live "/", HomeLive, :index + live "/signin", SigninLive, :index + end end # Other scopes may use custom stacks. diff --git a/lib/live_beats_web/templates/layout/app.html.heex b/lib/live_beats_web/templates/layout/app.html.heex index 169aed9..407d0aa 100644 --- a/lib/live_beats_web/templates/layout/app.html.heex +++ b/lib/live_beats_web/templates/layout/app.html.heex @@ -1,4 +1,4 @@ -
+
<%= @inner_content %> diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex index a29d604..5a392a5 100644 --- a/lib/live_beats_web/templates/layout/live.html.heex +++ b/lib/live_beats_web/templates/layout/live.html.heex @@ -1,4 +1,4 @@ -
+
diff --git a/lib/live_beats_web/templates/layout/root.html.heex b/lib/live_beats_web/templates/layout/root.html.heex index 2378dc6..23bc680 100644 --- a/lib/live_beats_web/templates/layout/root.html.heex +++ b/lib/live_beats_web/templates/layout/root.html.heex @@ -10,21 +10,363 @@ -
-
- - -
-
- <%= @inner_content %> +
+ + + + + + +
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+ <%= live_render(@conn, LiveBeatsWeb.PlayerLive, session: %{}) %> + +
+
+

+ LiveBeats – Chill +

+
+
+ + +
+
+ + <%= @inner_content %> + +
+
+
diff --git a/lib/live_beats_web/templates/page/index.html.heex b/lib/live_beats_web/templates/page/index.html.heex index f844bd8..019fde7 100644 --- a/lib/live_beats_web/templates/page/index.html.heex +++ b/lib/live_beats_web/templates/page/index.html.heex @@ -1,41 +1,460 @@ -
-

<%= gettext "Welcome to %{name}!", name: "Phoenix" %>

-

Peace of mind from prototype to production

-
+ +
+

Who's Here

+ +
+ + +
+
+

Projects

+
+ +
+ + + \ No newline at end of file