From 01b089f1f6b72b439a48f395bbe46fb9c708bf2a Mon Sep 17 00:00:00 2001 From: Raphix Date: Fri, 29 Aug 2025 00:22:08 +0200 Subject: [PATCH] Version 1.0.0 - Frontend --- package-lock.json | 78 ++- package.json | 5 +- public/information.json | 2 +- src/App.vue | 2 +- src/assets/Global.scss | 38 +- src/assets/Icons/AddList.vue | 30 + src/assets/Icons/Backward.vue | 6 + src/assets/Icons/Disconnect.vue | 5 + src/assets/Icons/Forward.vue | 6 + src/assets/Icons/Hand.vue | 5 + src/assets/Icons/Loop.vue | 5 + src/assets/Icons/Pause.vue | 6 + src/assets/Icons/Play.vue | 5 + src/assets/Icons/Shuffle.vue | 7 + src/assets/Icons/YoutubeRefresh.vue | 6 + src/assets/LogoDark.vue | 4 +- src/assets/LogoLight.vue | 4 +- src/assets/default_thumbnail.png | Bin 0 -> 1791 bytes src/components/Layout/Account.vue | 6 +- src/components/Layout/GuildHeader.vue | 20 +- src/components/Layout/Player.vue | 538 ++++++++++++++++++ src/components/Layout/Playlist.vue | 197 +++++++ src/components/Layout/Queue.vue | 132 +++++ src/components/Layout/Search.vue | 52 +- src/components/Layout/View.vue | 220 +++++-- src/components/UI/Avatar.vue | 43 +- src/components/UI/Box.vue | 2 +- src/components/UI/Button.vue | 7 + src/components/UI/Carousel.vue | 273 +++++++++ src/components/UI/CustomIcon.vue | 51 ++ src/components/UI/DurationBar.vue | 275 +++++++++ src/components/UI/Glider.vue | 90 +++ src/components/UI/IconAction.vue | 23 +- src/components/UI/Marquee.vue | 129 +++++ src/components/UI/Metric.vue | 102 ++++ src/components/UI/Modal.vue | 14 +- src/components/UI/MusicAnimation.vue | 57 ++ src/components/UI/PlaylistItem.vue | 66 +++ src/components/UI/Selector.vue | 19 +- src/components/UI/Server.vue | 4 +- src/components/UI/Splash.vue | 90 ++- src/components/UI/SubsonicsLogo.vue | 20 +- src/components/UI/Tag.vue | 9 +- src/components/UI/User.vue | 33 +- src/components/UI/Video.vue | 172 ++++++ src/components/UI/VideoList.vue | 142 +++++ src/components/UI/VideoQueue.vue | 144 +++++ src/components/Widget/Dispatcher.vue | 35 ++ .../Widget/Guild/GuildHeaderUsers.vue | 2 +- src/components/Widget/Guild/GuildSettings.vue | 4 + .../Widget/Guild/Settings/GuildStats.vue | 80 +-- src/components/Widget/Queue/NextList.vue | 203 +++++++ src/components/Widget/Queue/PreviousList.vue | 120 ++++ .../Widget/Server/ServerListItem.vue | 6 +- .../User/Settings/InformationSettings.vue | 13 +- src/components/Widget/VideoComposable.vue | 246 ++++++++ src/components/Widget/View/Default.vue | 71 ++- .../Widget/View/Home/AccountMobile.vue | 49 ++ src/components/Widget/View/Home/Advice.vue | 92 +++ .../Widget/View/Home/AdviceItem.vue | 52 ++ src/components/Widget/View/Home/Changelog.vue | 244 ++++++++ src/components/Widget/View/Home/History.vue | 96 ++++ .../Widget/View/Home/Motivation.vue | 71 +++ src/components/Widget/View/Home/Welcome.vue | 72 +++ src/components/Widget/View/LoadingView.vue | 16 +- .../Widget/View/Player/ActualChannel.vue | 39 ++ .../Widget/View/Playlist/PlaylistView.vue | 95 ++++ .../Widget/View/Search/PlaylistHeader.vue | 448 +++++++++++++++ src/components/Widget/View/SearchResults.vue | 92 ++- src/components/Widget/View/UploadFiles.vue | 257 +++++++++ src/stores/globalStore.js | 10 +- src/stores/userStore.js | 2 + src/utils/Events.js | 8 +- src/utils/Loader.vue | 13 +- src/utils/Logic.js | 103 ++++ src/utils/SocketEnvironment.vue | 12 + src/utils/TimeConverter.js | 37 +- src/views/Interface.vue | 99 +++- src/views/Login.vue | 5 +- src/views/PageError.vue | 4 + src/views/Privacy.vue | 5 + src/views/Servers.vue | 8 +- src/views/Terms.vue | 5 + 83 files changed, 5613 insertions(+), 245 deletions(-) create mode 100644 src/assets/Icons/AddList.vue create mode 100644 src/assets/Icons/Backward.vue create mode 100644 src/assets/Icons/Disconnect.vue create mode 100644 src/assets/Icons/Forward.vue create mode 100644 src/assets/Icons/Hand.vue create mode 100644 src/assets/Icons/Loop.vue create mode 100644 src/assets/Icons/Pause.vue create mode 100644 src/assets/Icons/Play.vue create mode 100644 src/assets/Icons/Shuffle.vue create mode 100644 src/assets/Icons/YoutubeRefresh.vue create mode 100644 src/assets/default_thumbnail.png create mode 100644 src/components/Layout/Player.vue create mode 100644 src/components/Layout/Playlist.vue create mode 100644 src/components/Layout/Queue.vue create mode 100644 src/components/UI/Carousel.vue create mode 100644 src/components/UI/CustomIcon.vue create mode 100644 src/components/UI/DurationBar.vue create mode 100644 src/components/UI/Glider.vue create mode 100644 src/components/UI/Marquee.vue create mode 100644 src/components/UI/Metric.vue create mode 100644 src/components/UI/MusicAnimation.vue create mode 100644 src/components/UI/PlaylistItem.vue create mode 100644 src/components/UI/Video.vue create mode 100644 src/components/UI/VideoList.vue create mode 100644 src/components/UI/VideoQueue.vue create mode 100644 src/components/Widget/Dispatcher.vue create mode 100644 src/components/Widget/Queue/NextList.vue create mode 100644 src/components/Widget/Queue/PreviousList.vue create mode 100644 src/components/Widget/VideoComposable.vue create mode 100644 src/components/Widget/View/Home/AccountMobile.vue create mode 100644 src/components/Widget/View/Home/Advice.vue create mode 100644 src/components/Widget/View/Home/AdviceItem.vue create mode 100644 src/components/Widget/View/Home/Changelog.vue create mode 100644 src/components/Widget/View/Home/History.vue create mode 100644 src/components/Widget/View/Home/Motivation.vue create mode 100644 src/components/Widget/View/Home/Welcome.vue create mode 100644 src/components/Widget/View/Player/ActualChannel.vue create mode 100644 src/components/Widget/View/Playlist/PlaylistView.vue create mode 100644 src/components/Widget/View/Search/PlaylistHeader.vue create mode 100644 src/components/Widget/View/UploadFiles.vue create mode 100644 src/utils/Logic.js diff --git a/package-lock.json b/package-lock.json index cf57dbe..60a03d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,13 @@ "@fortawesome/vue-fontawesome": "^3.0.8", "@unhead/vue": "^2.0.12", "@vitejs/plugin-vue": "^6.0.0", - "core-js": "^3.8.3", + "@vueuse/core": "^13.7.0", "pinia": "^3.0.3", "socket.io-client": "^4.8.1", "vite": "^7.0.5", "vue": "^3.2.13", - "vue-router": "^4.0.3" + "vue-router": "^4.0.3", + "vuedraggable": "^4.1.0" }, "devDependencies": { "vite-plugin-vue-devtools": "^7.7.7" @@ -1385,6 +1386,12 @@ "undici-types": "~7.8.0" } }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz", + "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==", + "license": "MIT" + }, "node_modules/@unhead/vue": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.12.tgz", @@ -1637,6 +1644,44 @@ "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==", "license": "MIT" }, + "node_modules/@vueuse/core": { + "version": "13.7.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.7.0.tgz", + "integrity": "sha512-myagn09+c6BmS6yHc1gTwwsdZilAovHslMjyykmZH3JNyzI5HoWhv114IIdytXiPipdHJ2gDUx0PB93jRduJYg==", + "license": "MIT", + "dependencies": { + "@types/web-bluetooth": "^0.0.21", + "@vueuse/metadata": "13.7.0", + "@vueuse/shared": "13.7.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, + "node_modules/@vueuse/metadata": { + "version": "13.7.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.7.0.tgz", + "integrity": "sha512-8okFhS/1ite8EwUdZZfvTYowNTfXmVCOrBFlA31O0HD8HKXhY+WtTRyF0LwbpJfoFPc+s9anNJIXMVrvP7UTZg==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "13.7.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.7.0.tgz", + "integrity": "sha512-Wi2LpJi4UA9kM0OZ0FCZslACp92HlVNw1KPaDY6RAzvQ+J1s7seOtcOpmkfbD5aBSmMn9NvOakc8ZxMxmDXTIg==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -1776,17 +1821,6 @@ "url": "https://github.com/sponsors/mesqueeb" } }, - "node_modules/core-js": { - "version": "3.44.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.44.0.tgz", - "integrity": "sha512-aFCtd4l6GvAXwVEh3XbbVqJGHDJt0OZRa+5ePGx3LLwi12WfexqQxcsohb2wgsa/92xtl19Hd66G/L+TaAxDMw==", - "hasInstallScript": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2994,6 +3028,12 @@ "node": ">=10.0.0" } }, + "node_modules/sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==", + "license": "MIT" + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -3472,6 +3512,18 @@ "vue": "^3.2.0" } }, + "node_modules/vuedraggable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", + "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==", + "license": "MIT", + "dependencies": { + "sortablejs": "1.14.0" + }, + "peerDependencies": { + "vue": "^3.0.1" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 4aa6bcf..6565de2 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,13 @@ "@fortawesome/vue-fontawesome": "^3.0.8", "@unhead/vue": "^2.0.12", "@vitejs/plugin-vue": "^6.0.0", - "core-js": "^3.8.3", + "@vueuse/core": "^13.7.0", "pinia": "^3.0.3", "socket.io-client": "^4.8.1", "vite": "^7.0.5", "vue": "^3.2.13", - "vue-router": "^4.0.3" + "vue-router": "^4.0.3", + "vuedraggable": "^4.1.0" }, "devDependencies": { "vite-plugin-vue-devtools": "^7.7.7" diff --git a/public/information.json b/public/information.json index 20c0c92..27cac35 100644 --- a/public/information.json +++ b/public/information.json @@ -5,7 +5,7 @@ }, "backend": { "development": "http://192.168.1.77:3000", - "production": "http://backend.subsonics.raphix.fr" + "production": "http://alpha.raphix.fr:3000" }, "bot_invite": { "development": "https://discord.com/api/oauth2/authorize?client_id=1342913183744004158&permissions=40546675842624&scope=bot%20applications.commands", diff --git a/src/App.vue b/src/App.vue index 503eb96..d16b35d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,5 +4,5 @@ \ No newline at end of file diff --git a/src/assets/Global.scss b/src/assets/Global.scss index 88657c4..4ae8c31 100644 --- a/src/assets/Global.scss +++ b/src/assets/Global.scss @@ -7,37 +7,43 @@ --primary: #111210; + --primary-inverse: #FFFFFF; --primary-hover: #ececec; --secondary: #2A2B28; --tertiary: #404040; + --quaternary: #636363; --text: #FFFFFF; --text-inverse: #111210; --text-secondary: #C5c3c3; --text-tertiary: #A5A5A5; --text-error: #ff2b2b; - + --text-success: #00ff00; + --text-warning: #FFA500; + } [data-theme='light'] { --primary: #FFFFFF; + --primary-inverse: #111210; --primary-hover: #292b26; --secondary: #EAEAEA; --tertiary: #d3d3d3; + --quaternary: #b8b8b8; --text: #111210; --text-inverse: #FFFFFF; --text-secondary: #404040; --text-tertiary: #C5c3c3; --text-error: #CD034F; + --text-success: #00a900; + --text-warning: #FFA500; } :root { --main: #CD034F; - --main-hover: #A0023F; - --main-active: #7A002F; - - --text-success: #00ff00; + --main-hover: color-mix(in srgb, var(--main) 90%, black); + --main-active: color-mix(in srgb, var(--main) 70%, black); --admin-color: #209AFE; --owner-color: #FFAA32; @@ -87,6 +93,7 @@ a { ::-webkit-scrollbar { width: 5px; margin-right: 20px; + margin-left: 20px; } ::-webkit-scrollbar-track { border-radius: 12px; @@ -143,6 +150,7 @@ textarea:focus { } } + input[type="checkbox"] { background-color: #FFFFFF !important; } @@ -153,4 +161,24 @@ input[type="checkbox"]:checked { input[type="checkbox"]:hover { background-color: var(--main-active) !important; +} + +input[type="text"] { + background-color: var(--tertiary); + border: none; + border-radius: 5px; + padding: 7px; + color: var(--text); + font-family: 'Inter', sans-serif; + outline: none; +} + + +@keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(var(--scroll-distance)); + } } \ No newline at end of file diff --git a/src/assets/Icons/AddList.vue b/src/assets/Icons/AddList.vue new file mode 100644 index 0000000..5db18ed --- /dev/null +++ b/src/assets/Icons/AddList.vue @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/assets/Icons/Backward.vue b/src/assets/Icons/Backward.vue new file mode 100644 index 0000000..43f8c66 --- /dev/null +++ b/src/assets/Icons/Backward.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/assets/Icons/Disconnect.vue b/src/assets/Icons/Disconnect.vue new file mode 100644 index 0000000..949fb39 --- /dev/null +++ b/src/assets/Icons/Disconnect.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/assets/Icons/Forward.vue b/src/assets/Icons/Forward.vue new file mode 100644 index 0000000..e95f2e7 --- /dev/null +++ b/src/assets/Icons/Forward.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/assets/Icons/Hand.vue b/src/assets/Icons/Hand.vue new file mode 100644 index 0000000..27f203b --- /dev/null +++ b/src/assets/Icons/Hand.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/assets/Icons/Loop.vue b/src/assets/Icons/Loop.vue new file mode 100644 index 0000000..69f2867 --- /dev/null +++ b/src/assets/Icons/Loop.vue @@ -0,0 +1,5 @@ + diff --git a/src/assets/Icons/Pause.vue b/src/assets/Icons/Pause.vue new file mode 100644 index 0000000..ed9d448 --- /dev/null +++ b/src/assets/Icons/Pause.vue @@ -0,0 +1,6 @@ + diff --git a/src/assets/Icons/Play.vue b/src/assets/Icons/Play.vue new file mode 100644 index 0000000..2609400 --- /dev/null +++ b/src/assets/Icons/Play.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/assets/Icons/Shuffle.vue b/src/assets/Icons/Shuffle.vue new file mode 100644 index 0000000..3f16674 --- /dev/null +++ b/src/assets/Icons/Shuffle.vue @@ -0,0 +1,7 @@ + diff --git a/src/assets/Icons/YoutubeRefresh.vue b/src/assets/Icons/YoutubeRefresh.vue new file mode 100644 index 0000000..8e19ebc --- /dev/null +++ b/src/assets/Icons/YoutubeRefresh.vue @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/assets/LogoDark.vue b/src/assets/LogoDark.vue index 672d8d6..17fa541 100644 --- a/src/assets/LogoDark.vue +++ b/src/assets/LogoDark.vue @@ -20,9 +20,9 @@ style="stroke-width:1.60707" /> + style="fill:var(--main);fill-opacity:1;stroke-width:1.60707" /> \ No newline at end of file diff --git a/src/assets/LogoLight.vue b/src/assets/LogoLight.vue index 0487969..9ff36b9 100644 --- a/src/assets/LogoLight.vue +++ b/src/assets/LogoLight.vue @@ -20,9 +20,9 @@ style="stroke-width:1.60707" /> + style="fill:var(--main);fill-opacity:1;stroke-width:1.60707" /> \ No newline at end of file diff --git a/src/assets/default_thumbnail.png b/src/assets/default_thumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..81eb65297e6016ecc61bcca98d0bce1e999f76cb GIT binary patch literal 1791 zcmb`IX;jh)7sio9MWu2G0mbZXGabsmX>Vfg3t^Up<3fo_Rvt4fmvU`XB+`tO2{oO_ zESGW02Tc^B_!gP&v zK_C#!li=F(m25d5**3YO-q4|2w`9vbxY z!wn0n)6J>XbwKfBPqrX7N@|CGC%?g9Fp}Yh|5jZ_JvR2CM=Ut;_~&z(pN75cuiyo9 z-EtFWe2nBQNF7*ilYC|j5lfE1njf0_P{@KAM`IXA&}YSwUB%R=_kz9P12#euS$vnx zj>ucgjqI0M7q$J>PH+^Gz{xRBou?FaP`jTaMXkeh0|#hpg>PjA`!8g^#N(Pgdfc2PCdZcrnpY& z*kdxnvY>{vus0S*75)2cV%M~_65mqqoWam~!Y*|tea75oHiI+JBNIB;Ya#qmrT#n_ zvUyCUovr4JG@A!BkvL8D6BXE>0{M%Pb|P31U#+UmW9p+|>jfuBT{9*a7+_TOlQgW7 z(^WY_1eMTMZEe0Y3Vdz=n&QVO_Wc+r?xpvHL9~;3_O1!%RU#!hf+f z!=Wq-UKW*IbB&8N!+JMfL2RpjKJN`*mWPza%~Vk13@@e9yL2;V+rTZZVdL zk{vOU2p!#WL8dfhT6XZTi%i){>xj8U0PF2F)pQXpnMACcl7Yl?ZJXGp19um`PowMY zMcjsZS6u}tTtk20XA%K0!dwX;#Wz<;cV`%Nd1y{Ax*G4!FZ>WEix!oR{>Y;2%G=ZA zC240=v9S-ow%0SjY($9CGFo{jS$4qKe5-lkWhfMnTYGUsF@iS=LyOw|9-@9$=HF1zpzn?1-3|ajKv0b@g-79qa)nn# zS0ypD9%hiJl_OVhGHQFROHRJ2o3_tX?s@}p2WL$k_6cKl{DzN zu@j>FeXAV=GsGs(N4GANyFb?CAyoXd$8LRUfu{J z`&9Q+lI6Sg9DS;vQF4z7iR7jgsNe%ZZ!d(MWnfM^2H2gxIo6m-MgFc^Kky~{kVBz| z6pH@|8-Du|>-00u#&JeHX=E3Kg=T6=Ult7(et$Hgx@OYt=r{24PD*Y=v9%Tayp}Oy z*vuL=ac--5HIYW35#>x&Blrh!$&mXqVVs1iQ&36Y1!=#OQYzd?0D%@Q$=QY~!)9(9 z3|5suyz~C!qmWOhvA|K-62jahYO9lX4wFZ^D4m(_18CDv_bD@XP?ex1zFpTFNRQnNfxEb}jP z$r73-RBWz(-M@%W43mAW zTgR1aY}H8zRh*4IrgNw_%5|$V4XMd$n744`hPI1JLmIQAoxW`zIDHZ29k~*)ym%}p eDz)|hBzRdKTE{*$k+Sj8K%O4n?p3ao^#1|6(^(7v literal 0 HcmV?d00001 diff --git a/src/components/Layout/Account.vue b/src/components/Layout/Account.vue index a0f2641..52bab31 100644 --- a/src/components/Layout/Account.vue +++ b/src/components/Layout/Account.vue @@ -1,6 +1,6 @@