From 9b8a8593688880cbd2e5d2bac7f4ad41acd5ceec Mon Sep 17 00:00:00 2001 From: tristan Date: Wed, 5 Feb 2025 22:12:35 +0100 Subject: [PATCH 01/56] getting started with og mode --- README.md | 5 +- src/App.vue | 7 +- src/assets/css/og-mode.css | 274 +++++++++++++++++++++++ src/helpers/og-mode.js | 447 +++++++++++++++++++++++++++++++++++++ 4 files changed, 729 insertions(+), 4 deletions(-) create mode 100644 src/assets/css/og-mode.css create mode 100644 src/helpers/og-mode.js diff --git a/README.md b/README.md index abdb713..320ceef 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,9 @@ For a detailed explanation on how things work, check out the [guide](http://vuej ### start chrome without CORS -close all chrome instances: +close all chrome instances and then "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="tmp" -"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-site-isolation-trials --ignore-certificate-errors --user-data-dir="C:\tmp" --disable-web-security` +"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-site-isolation-trials --ignore-certificate-errors --user-data-dir="C:\tmp" --disable-web-security + `"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-site-isolation-trials --ignore-certificate-errors --user-data-dir="C:\tmp" --disable-web-security` diff --git a/src/App.vue b/src/App.vue index 84c8e3f..2c85996 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,10 +3,9 @@ id="app" :style="'background-color:' + color + ';'" > -
+
+
@@ -56,6 +57,8 @@ export default { diff --git a/src/components/routes/shop/Shop.vue b/src/components/routes/shop/Shop.vue deleted file mode 100644 index 00b8285..0000000 --- a/src/components/routes/shop/Shop.vue +++ /dev/null @@ -1,65 +0,0 @@ - - - - - diff --git a/src/components/routes/shop/ShopMerch.vue b/src/components/routes/shop/ShopMerch.vue deleted file mode 100644 index 33d9fe5..0000000 --- a/src/components/routes/shop/ShopMerch.vue +++ /dev/null @@ -1,78 +0,0 @@ - - - - - diff --git a/src/models/Podcast.ts b/src/models/Podcast.ts index 866d572..d42698c 100644 --- a/src/models/Podcast.ts +++ b/src/models/Podcast.ts @@ -1,11 +1,9 @@ export default class Podcast { + id: number; title: string; genres: string[]; dj: string; podImg: string; date: string; - tag_list: string[]; - - constructor() { - } + tagList: string[]; } \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 0ad9853..5036d04 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,8 +1,5 @@ import { createRouter, createWebHistory } from "vue-router"; -import ShopComponent from "@/components/routes/shop/Shop.vue"; -import ShopMerch from "@/components/routes/shop/ShopMerch.vue"; import Index from "@/components/Index.vue"; -import Events from "@/components/routes/Events.vue"; import Resident from "@/components/routes/resident/Resident.vue"; import Residents from "@/components/routes/resident/Residents.vue"; import Podcasts from "@/components/routes/Podcasts.vue"; @@ -14,20 +11,6 @@ import ChatPage from "@/components/routes/ChatPage.vue"; import RentalPage from "@/components/routes/RentalPage.vue"; const routes = [ - { - path: "/shop", - component: ShopComponent, - meta: { - title: "z⸱est radio - Shop", - }, - }, - { - path: "/shop/:type/:merch", - component: ShopMerch, - meta: { - title: "z⸱est radio - Shop", - }, - }, { path: "/podcasts", component: Podcasts, @@ -56,13 +39,6 @@ const routes = [ title: "z⸱est radio - Proposer un show", }, }, - { - path: "/events", - component: Events, - meta: { - title: "ODC Events", - }, - }, { path: "/about", component: About, -- GitLab From 95c7d6328a6a279473419bcc70825f3e19aeaab3 Mon Sep 17 00:00:00 2001 From: trirandom Date: Thu, 13 Feb 2025 16:23:08 +0100 Subject: [PATCH 07/56] fix podcast playing --- src/App.vue | 3 ++- src/components/navbar/IframeSC.vue | 2 +- src/components/navbar/NavBar.vue | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index ec051ed..396d7d7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -242,7 +242,8 @@ body { box-sizing: border-box; display: flex; width: 100%; - height: 100%; + // height: 100%; + overflow: auto; } .main_section { diff --git a/src/components/navbar/IframeSC.vue b/src/components/navbar/IframeSC.vue index 53c0824..b597646 100644 --- a/src/components/navbar/IframeSC.vue +++ b/src/components/navbar/IframeSC.vue @@ -264,7 +264,7 @@ export default { width: 100vw; z-index: 1; padding-top: 8px; - bottom: 49px; + bottom: 41px; height: unset; iframe { diff --git a/src/components/navbar/NavBar.vue b/src/components/navbar/NavBar.vue index 0e1fe90..a3be105 100644 --- a/src/components/navbar/NavBar.vue +++ b/src/components/navbar/NavBar.vue @@ -129,7 +129,8 @@ export default { } .soundcloud-iframe { - height: 144px; + height: 122px; + flex-shrink: 0; } nav { -- GitLab From 8f916c7a1438a66b17e19353459bea115d25b568 Mon Sep 17 00:00:00 2001 From: trirandom Date: Thu, 13 Feb 2025 17:24:50 +0100 Subject: [PATCH 08/56] no event on canvas --- src/assets/css/og-mode.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/css/og-mode.css b/src/assets/css/og-mode.css index b978775..e6bd120 100644 --- a/src/assets/css/og-mode.css +++ b/src/assets/css/og-mode.css @@ -9,6 +9,7 @@ canvas { z-index: 9998; width: 100%; height: 100%; + pointer-events: none; &.snow { background-color: #aaa; -- GitLab From d65bc8e40430814c2f064624d7159baf12fc0175 Mon Sep 17 00:00:00 2001 From: tristan Date: Sat, 15 Feb 2025 17:12:55 +0100 Subject: [PATCH 09/56] some refactor of css + getting og mode noise working --- src/App.vue | 200 +++++--------------------- src/assets/css/font-family.css | 35 +++++ src/assets/css/og-mode.css | 48 ++----- src/assets/css/scrollbar.css | 94 ++++++++++++ src/assets/css/variables.css | 23 +++ src/components/common/Live.vue | 16 ++- src/components/old.PlaylistList.vue | 63 -------- src/components/old.WidgetPlaylist.vue | 40 ------ src/helpers/og-mode.ts | 36 ++--- 9 files changed, 232 insertions(+), 323 deletions(-) create mode 100644 src/assets/css/font-family.css create mode 100644 src/assets/css/scrollbar.css create mode 100644 src/assets/css/variables.css delete mode 100644 src/components/old.PlaylistList.vue delete mode 100644 src/components/old.WidgetPlaylist.vue diff --git a/src/App.vue b/src/App.vue index 396d7d7..2b14d4f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,33 @@ @@ -31,11 +50,13 @@ export default { bg_mb: this.$config.VUE_APP_API + "/upload/background_mobile?t=" + new Date().getTime(), innerWidth: window.innerWidth, + innerHeight: window.innerHeight, }; }, mounted() { window.addEventListener("resize", () => { this.innerWidth = window.innerWidth; + this.innerHeight = window.innerHeight; }); axios .get(`${this.$config.VUE_APP_API}/upload/color?t=${new Date().getTime()}`) @@ -50,161 +71,10 @@ export default { diff --git a/src/components/old.WidgetPlaylist.vue b/src/components/old.WidgetPlaylist.vue deleted file mode 100644 index 497b537..0000000 --- a/src/components/old.WidgetPlaylist.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/src/helpers/og-mode.ts b/src/helpers/og-mode.ts index d2df1f0..ebad8ba 100644 --- a/src/helpers/og-mode.ts +++ b/src/helpers/og-mode.ts @@ -1,14 +1,14 @@ -function getRandomInt(min, max) { +function getRandomInt(min: number, max: number) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } export default class ScreenEffect { - canvasContext; - snowframe; + canvasContext: CanvasRenderingContext2D |null; + snowframe: number; - constructor(canvas) { + constructor(canvas: HTMLCanvasElement) { this.canvasContext = canvas.getContext("2d"); } @@ -31,22 +31,22 @@ export default class ScreenEffect { container.appendChild(wrapper1); - this.parent.parentNode.insertBefore(container, this.parent); - wrapper3.appendChild(this.parent); + // this.parent.parentNode.insertBefore(container, this.parent); + // wrapper3.appendChild(this.parent); - this.nodes = { container, wrapper1, wrapper2, wrapper3 }; + // this.nodes = { container, wrapper1, wrapper2, wrapper3 }; this.onResize(); } onResize() { - this.rect = this.parent.getBoundingClientRect(); - if ( this.effects.vcr && !!this.effects.vcr.enabled ) { - this.generateVCRNoise(); - } + // this.rect = this.parent.getBoundingClientRect(); + // if ( this.effects.vcr && !!this.effects.vcr.enabled ) { + // this.generateVCRNoise(); + // } } - add(type, options) { + add(type: string[] |string, options?) { const config = Object.assign({}, { fps: 30, @@ -232,14 +232,16 @@ export default class ScreenEffect { // Generate CRT noise generateSnow() { - - var w = this.canvasContext.canvas.width, + if (!this.canvasContext){ + return; + } + const w = this.canvasContext.canvas.width, h = this.canvasContext.canvas.height, d = this.canvasContext.createImageData(w, h), b = new Uint32Array(d.data.buffer), len = b.length; - for (var i = 0; i < len; i++) { + for (let i = 0; i < len; i++) { b[i] = ((255 * Math.random()) | 0) << 24; } @@ -247,8 +249,8 @@ export default class ScreenEffect { } animate() { - this.generateSnow(); - this.snowframe = requestAnimationFrame(this.animate); + setInterval(() => this.generateSnow(), 60); + // this.snowframe = requestAnimationFrame(this.animate); } renderTrackingNoise(radius = 2, xmax, ymax) { -- GitLab From 811800741cf107451998c602a0e6a218890d5f6a Mon Sep 17 00:00:00 2001 From: trirandom Date: Mon, 17 Feb 2025 16:47:21 +0100 Subject: [PATCH 10/56] Disable og mode for now so we can deploy latest fixes --- src/App.vue | 45 +++++++------------------ src/assets/css/og-mode.css | 3 -- src/components/common/WidgetPodcast.vue | 5 +-- src/helpers/og-mode.ts | 4 +-- src/models/Podcast.ts | 2 ++ 5 files changed, 20 insertions(+), 39 deletions(-) diff --git a/src/App.vue b/src/App.vue index 2b14d4f..870a1e0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,24 +1,13 @@ @@ -63,14 +52,14 @@ export default { .then((response) => { this.color = response.data.color; }); - const screen = new ScreenEffect(document.getElementById("og-mode-canvas")); - screen.animate(); + // const screen = new ScreenEffect(document.getElementById("og-mode-canvas")); + // screen.animate(); + }, }; diff --git a/src/assets/css/common.css b/src/assets/css/common.css new file mode 100644 index 0000000..ea48b5c --- /dev/null +++ b/src/assets/css/common.css @@ -0,0 +1,222 @@ +.flex { + display: flex; + justify-content: space-between; +} + +.flex_center { + display: flex; + justify-content: center; +} + +.marged { + margin: 1rem 2rem; +} + +.margin-top-0 { + margin-top: 0; +} + +h3.title, +h2.title, +h1.title { + font-size: 2rem; + line-height: 3rem; + margin-bottom: 0.5rem; + margin-top: 1rem; + display: inline-block; + font-family: Zest; + font-weight: 600; + letter-spacing: -0.7px; + + &--mt-0 { + margin-top: 0; + } +} + +nav { + .menu { + flex-shrink: 1; + gap: 1rem 0.5rem; + align-items: flex-start; + overflow: hidden; + + > :first-child { + padding-right: 2rem; + } + + h1, + h2, + h3 { + padding: 0 1rem; + margin: 0; + position: relative; + overflow: hidden; + transition: all 0.3s; + font-weight: 300; + border: 1px solid transparent; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &::before { + content: ''; + display: block; + position: absolute; + width: calc(100% + 2rem); + transition: all 0.3s; + transform: translateX(calc(-100% - 2rem)); + z-index: -1; + height: 100%; + } + + &:hover { + transform: skewX(-8deg); + color: var(--color-text); + + a { + color: var(--color-text) !important; + } + + &::before { + transform: translateX(-1rem); + background-color: var(--color-primary); + } + } + } + + a { + flex-shrink: 1; + overflow: hidden; + padding: 0 2px; + } + + a.router-link-active { + h1, + h2, + h3 { + transform: skewX(-8deg); + border: 1px solid var(--color-text); + + a { + color: var(--color-bg) !important; + } + + &::before { + transform: translateX(-1rem); + background-color: var(--color-primary); + } + } + } + } +} + +.button { + cursor: pointer; + padding: 0.1rem 1rem; + border: 1px solid var(--color-text); + transition: all 0.2s; + + &:hover { + background-color: var(--color-primary); + } +} + +.round-button { + cursor: pointer; + border-radius: 50%; + transition: all 0.2s; + + &:hover { + background-color: var(--color-primary); + } +} + +.genre { + position: relative; + font-size: 1rem; + cursor: pointer; + padding: 1px 2px; + display: inline; + color: var(--color-text-light); + transition: all 0.2s; + border-bottom: 1px solid transparent; + background-color: var(--color-bg-variant); + + a { + color: var(--color-text-light); + text-decoration: none; + } + + &:hover { + background-color: var(--color-primary); + } +} + +.player-title { + position: relative; + border-inline: solid 1px var(--color-text); + flex-grow: 1; +} + +@media (max-width: 1200px) { + nav .menu { + gap: 1rem 0.5rem; + } +} + +@media (max-width: 1000px) { + nav .menu { + gap: 1rem 0.5rem; + } +} + +@media (max-width: 815px) { + #mainComponent { + .bg { + min-height: calc(100vh - 100px); + padding-bottom: 15px; + } + + .main_section { + flex-direction: column; + justify-content: flex-start; + padding: 2rem 1rem 6rem 1rem; + margin-bottom: 0; + } + } + + .marged { + margin: 0rem auto 0px auto; + } + + .mobile_pods .podcast { + width: 230px !important; + flex-shrink: 0; + } + + h3.title, + h2.title, + h1.title { + font-size: 1.2rem; + } + + h1.title { + font-size: 1.5rem; + } +} + +@media (max-width: 430px) { + h3.title, + h2.title, + h1.title { + font-size: 1.5rem; + } + + h1.title { + font-size: 2rem; + } + + .mobile_pods .podcast .podimg { + width: 230px !important; + } +} diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css index 6fcf508..ae9c6a9 100644 --- a/src/assets/css/variables.css +++ b/src/assets/css/variables.css @@ -3,8 +3,9 @@ --color-primary-lighter: #fdecb4; --color-primary-bg: #fdd14269; --color-bg: #fffefd; + --color-bg-variant: hsl(46, 18%, 92%); --color-text: #000000; - --color-text-light: hsl(37, 4%, 36%); + --color-text-light: hsl(37, 4%, 42%); --color-chat-bg: #0f0e00; --color-chat-text: #fffffffa; --color-chat-text-light: #bdbdbd; diff --git a/src/components/common/WidgetPodcast.vue b/src/components/common/WidgetPodcast.vue index 2fbf8a6..7ea86ea 100644 --- a/src/components/common/WidgetPodcast.vue +++ b/src/components/common/WidgetPodcast.vue @@ -1,23 +1,40 @@