From 71ff2ad34ad27f968e4b88911eb0a0d188d1277b Mon Sep 17 00:00:00 2001
From: L-Nafaryus <l.nafaryus@gmail.com>
Date: Thu, 10 Oct 2024 22:14:08 +0500
Subject: [PATCH] fix: client appearance [#1]

---
 crates/frontend/Cargo.toml                    |  2 +-
 crates/frontend/index.html                    |  2 +-
 crates/frontend/package-lock.json             |  4 +--
 crates/frontend/package.json                  |  2 +-
 crates/frontend/src/assets/style.css          |  2 +-
 crates/frontend/src/components/MatrixIcon.vue |  6 +++++
 crates/frontend/src/components/NavBar.vue     |  2 +-
 crates/frontend/src/components/Player.vue     | 23 +++++++++--------
 crates/frontend/src/components/Station.vue    |  2 +-
 crates/frontend/src/components/StopIcon.vue   | 11 ++++++++
 crates/frontend/src/components/rect1.svg      | 25 +++++++++++++++++++
 crates/frontend/src/views/Base.vue            | 14 ++++++++---
 crates/frontend/templates/base.html           |  2 +-
 13 files changed, 75 insertions(+), 22 deletions(-)
 create mode 100644 crates/frontend/src/components/MatrixIcon.vue
 create mode 100644 crates/frontend/src/components/StopIcon.vue
 create mode 100644 crates/frontend/src/components/rect1.svg
diff --git a/crates/frontend/Cargo.toml b/crates/frontend/Cargo.toml
index 14bc3b9..7475376 100644
--- a/crates/frontend/Cargo.toml
+++ b/crates/frontend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "elnafo-radio-frontend"
-version = "0.1.0"
+version = "0.1.1"
 edition = "2021"
 publish = ["elnafo-vcs"]
 authors = ["L-Nafaryus <l.nafaryus@elnafo.ru>"]
diff --git a/crates/frontend/index.html b/crates/frontend/index.html
index 51822ad..d9188d9 100644
--- a/crates/frontend/index.html
+++ b/crates/frontend/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <link rel="icon" href="/assets/vinyl.svg" type="image/svg+xml" sizes="16x16 32x32">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <title>Elnafo Radio Dev</title>
     </head>
     <body class="h-full text-zinc-200 font-sans ">
diff --git a/crates/frontend/package-lock.json b/crates/frontend/package-lock.json
index 6e5f5c7..44c75b1 100644
--- a/crates/frontend/package-lock.json
+++ b/crates/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "elnafo-radio-vue",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "elnafo-radio-vue",
-            "version": "0.1.0",
+            "version": "0.1.1",
             "dependencies": {
                 "@catppuccin/tailwindcss": "^0.1.6",
                 "@hey-api/client-axios": "^0.2.3",
diff --git a/crates/frontend/package.json b/crates/frontend/package.json
index cf0ab1c..d09eacd 100644
--- a/crates/frontend/package.json
+++ b/crates/frontend/package.json
@@ -1,6 +1,6 @@
 {
     "name": "elnafo-radio-vue",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "private": true,
     "type": "module",
     "scripts": {
diff --git a/crates/frontend/src/assets/style.css b/crates/frontend/src/assets/style.css
index 2a5697e..1e39953 100644
--- a/crates/frontend/src/assets/style.css
+++ b/crates/frontend/src/assets/style.css
@@ -27,7 +27,7 @@
     }
 
     .button {
-        @apply pt-1 pb-1 pl-3 pr-3 sm:pt-2 sm:pb-2 sm:pl-5 sm:pr-5 rounded-md bg-ctp-peach border hover:bg-ctp-surface0/20 text-ctp-blue cursor-pointer;
+        @apply pt-1 pb-1 pl-3 pr-3 sm:pt-2 sm:pb-2 sm:pl-5 sm:pr-5 rounded-md bg-none border hover:bg-ctp-surface0/20 text-ctp-blue cursor-pointer;
     }
 
     .link-button {
diff --git a/crates/frontend/src/components/MatrixIcon.vue b/crates/frontend/src/components/MatrixIcon.vue
new file mode 100644
index 0000000..cf9aa66
--- /dev/null
+++ b/crates/frontend/src/components/MatrixIcon.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6">
+        <path
+            d="M0.844 0.735v30.531h2.197v0.735h-3.041v-32h3.041v0.735zM10.235 10.412v1.547h0.041c0.412-0.595 0.912-1.047 1.489-1.371 0.579-0.323 1.251-0.484 2-0.484 0.719 0 1.38 0.141 1.975 0.417 0.599 0.281 1.047 0.776 1.359 1.479 0.339-0.5 0.803-0.943 1.38-1.323 0.579-0.38 1.267-0.573 2.063-0.573 0.604 0 1.161 0.073 1.677 0.224 0.521 0.145 0.959 0.38 1.328 0.703 0.365 0.329 0.651 0.751 0.86 1.272 0.203 0.52 0.307 1.151 0.307 1.891v7.635h-3.129v-6.468c0-0.381-0.016-0.745-0.048-1.084-0.020-0.307-0.099-0.604-0.239-0.88-0.131-0.251-0.333-0.459-0.584-0.593-0.255-0.152-0.609-0.224-1.047-0.224-0.443 0-0.797 0.083-1.068 0.249-0.265 0.167-0.489 0.396-0.64 0.667-0.161 0.287-0.265 0.604-0.308 0.927-0.052 0.349-0.077 0.699-0.083 1.048v6.359h-3.131v-6.401c0-0.339-0.005-0.672-0.025-1-0.011-0.317-0.073-0.624-0.193-0.916-0.104-0.281-0.301-0.516-0.552-0.672-0.255-0.167-0.636-0.255-1.136-0.255-0.151 0-0.348 0.031-0.588 0.099-0.24 0.067-0.479 0.192-0.703 0.375-0.229 0.188-0.428 0.453-0.589 0.797-0.161 0.343-0.239 0.796-0.239 1.359v6.62h-3.131v-11.421zM31.156 31.265v-30.531h-2.197v-0.735h3.041v32h-3.041v-0.735z" />
+    </svg>
+</template>
diff --git a/crates/frontend/src/components/NavBar.vue b/crates/frontend/src/components/NavBar.vue
index 034f306..87f3ec1 100644
--- a/crates/frontend/src/components/NavBar.vue
+++ b/crates/frontend/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="h-12 mx-auto bg-ctp-peach rounded-b-xl">
+    <div class="h-12 mx-auto bg-ctp-peach/85 rounded-b-xl">
         <nav class="w-full h-full max-w-[1200px] flex justify-between items-center mx-auto my-0 pl-3 pr-3">
             <div class="items-center m-0 flex">
                 <slot name="left"></slot>
diff --git a/crates/frontend/src/components/Player.vue b/crates/frontend/src/components/Player.vue
index 3e8f546..e507aa2 100644
--- a/crates/frontend/src/components/Player.vue
+++ b/crates/frontend/src/components/Player.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import PlayIcon from "@/components/PlayIcon.vue";
 import PauseIcon from "@/components/PauseIcon.vue";
+import StopIcon from "@/components/StopIcon.vue";
 import VinylIcon from "@/components/VinylIcon.vue";
 import { api, store } from "@";
 import { ref, onUpdated, onMounted } from "vue";
@@ -32,7 +33,8 @@ onMounted(() => {
             <div class="flex items-center">
                 <button @click="player.toggle()"
                     class="h-full w-20 inline-flex rounded items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
-                    <PlayIcon v-if="!player.playing" class="text-ctp-peach w-8 h-8" />
+                    <StopIcon v-if="!player.station" class="text-ctp-peach w-8 h-8" />
+                    <PlayIcon v-else-if="!player.playing" class="text-ctp-peach w-8 h-8" />
                     <PauseIcon v-else class="text-ctp-peach w-8 h-8" />
                 </button>
             </div>
@@ -49,19 +51,20 @@ onMounted(() => {
     @apply appearance-none bg-ctp-surface0 hover:bg-ctp-surface1 w-4 rounded-full;
 }
 
-.slider::-webkit-slider-thumb {
-    @apply appearance-none bg-ctp-peach rounded-full cursor-pointer w-4 border-none;
-}
-
 .slider::-moz-range-thumb {
-    @apply appearance-none bg-ctp-peach rounded-full cursor-pointer w-4 border-none;
-}
-
-.slider::-webkit-progress-value {
-    @apply bg-ctp-peach/30 w-4 rounded-full;
+    @apply appearance-none bg-ctp-peach rounded-full cursor-pointer w-4 h-4 border-none;
 }
 
 .slider::-moz-range-progress {
     @apply bg-ctp-peach/30 w-4 rounded-full;
 }
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    @apply bg-ctp-peach rounded-full cursor-pointer w-4 h-4 border-none;
+}
+
+.slider::-webkit-slider-runnable-track {
+    @apply bg-ctp-peach/30 w-4 rounded-full border-none bg-no-repeat;
+}
 </style>
diff --git a/crates/frontend/src/components/Station.vue b/crates/frontend/src/components/Station.vue
index 9a0d761..fd6131f 100644
--- a/crates/frontend/src/components/Station.vue
+++ b/crates/frontend/src/components/Station.vue
@@ -69,7 +69,7 @@ onMounted(() => {
                         <InfoIcon class="text-ctp-peach" />
                     </Tooltip>
                 </button>
-                <a :href="stationInfo.url"
+                <a :href="stationInfo.url" target="_blank"
                     class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50 cursor-pointer">
                     <ExternalIcon class="text-ctp-peach" />
                 </a>
diff --git a/crates/frontend/src/components/StopIcon.vue b/crates/frontend/src/components/StopIcon.vue
new file mode 100644
index 0000000..b02382f
--- /dev/null
+++ b/crates/frontend/src/components/StopIcon.vue
@@ -0,0 +1,11 @@
+<template>
+    <svg class="w-4 h-4 p-1" fill="currentColor" viewBox="0 0 8.466666 8.4666661" version="1.1" id="svg1"
+        xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+        <defs id="defs1" />
+        <g id="layer1">
+            <path style="opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" id="rect1"
+                width="8.4666662" height="8.4666662" x="0" y="0"
+                d="M 0.33866665,0 H 8.1279996 A 0.33866665,0.33866665 45 0 1 8.4666662,0.33866665 V 8.1279996 A 0.33866665,0.33866665 135 0 1 8.1279996,8.4666662 H 0.33866665 A 0.33866665,0.33866665 45 0 1 0,8.1279996 V 0.33866665 A 0.33866665,0.33866665 135 0 1 0.33866665,0 Z" />
+        </g>
+    </svg>
+</template>
diff --git a/crates/frontend/src/components/rect1.svg b/crates/frontend/src/components/rect1.svg
new file mode 100644
index 0000000..9ff7289
--- /dev/null
+++ b/crates/frontend/src/components/rect1.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="31.999998"
+   height="31.999998"
+   viewBox="0 0 8.466666 8.4666661"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:0.979565;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
+       id="rect1"
+       width="8.4666662"
+       height="8.4666662"
+       x="0"
+       y="0"
+       d="M 0.33866665,0 H 8.1279996 A 0.33866665,0.33866665 45 0 1 8.4666662,0.33866665 V 8.1279996 A 0.33866665,0.33866665 135 0 1 8.1279996,8.4666662 H 0.33866665 A 0.33866665,0.33866665 45 0 1 0,8.1279996 V 0.33866665 A 0.33866665,0.33866665 135 0 1 0.33866665,0 Z" />
+  </g>
+</svg>
diff --git a/crates/frontend/src/views/Base.vue b/crates/frontend/src/views/Base.vue
index 6a8670b..916f8e3 100644
--- a/crates/frontend/src/views/Base.vue
+++ b/crates/frontend/src/views/Base.vue
@@ -4,6 +4,7 @@ import { headMeta, devel } from "@";
 import NavBar from "@/components/NavBar.vue";
 import DocumentationIcon from "@/components/DocumentationIcon.vue";
 import DiscordIcon from "@/components/DiscordIcon.vue";
+import MatrixIcon from "@/components/MatrixIcon.vue";
 import GitIcon from "@/components/GitIcon.vue";
 import VinylIcon from "@/components/VinylIcon.vue";
 import Player from "@/components/Player.vue";
@@ -13,6 +14,7 @@ import Error from "@/components/Error.vue";
 const title = ref(null);
 const author = ref(null);
 const discord = ref(null);
+const matrix = ref(null);
 const git = ref(null);
 const documentation = ref(null);
 
@@ -20,6 +22,7 @@ onMounted(() => {
     title.value = document.getElementsByTagName("title")[0].text;
     author.value = devel ? "L-Nafaryus" : headMeta("author");
     discord.value = devel ? "http://example.com" : headMeta("discord");
+    matrix.value = devel ? "http://example.com" : headMeta("matrix");
     git.value = devel ? "http://example.com" : headMeta("git");
     documentation.value = devel ? "http://example.com" : headMeta("documentation");
 });
@@ -35,7 +38,12 @@ onMounted(() => {
             </template>
 
             <template #right>
-                <a v-if="discord" :href="discord"
+                <a v-if="matrix" :href="discord" target="_blank" rel="noreferrer"
+                    class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold">
+                    <MatrixIcon />
+                    <span class="hidden sm:inline">Matrix</span>
+                </a>
+                <a v-if="discord" :href="discord" target="_blank" rel="noreferrer"
                     class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold">
                     <DiscordIcon />
                     <span class="hidden sm:inline">Discord</span>
@@ -54,12 +62,12 @@ onMounted(() => {
         <div class="flex justify-between max-w-[1200px] mx-auto">
             <span v-if="author" class="text-ctp-peach font-bold items-center flex">Made by {{ author }}</span>
             <div class="flex space-x-1">
-                <a v-if="documentation" :href="documentation"
+                <a v-if="documentation" :href="documentation" target="_blank" rel="noreferrer"
                     class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle">
                     <DocumentationIcon />
                     <span class="hidden sm:inline">Docs</span>
                 </a>
-                <a v-if="git" :href="git"
+                <a v-if="git" :href="git" target="_blank" rel="noreferrer"
                     class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle">
                     <GitIcon />
                     <span class="hidden sm:inline">Git</span>
diff --git a/crates/frontend/templates/base.html b/crates/frontend/templates/base.html
index 2796721..18ebd81 100644
--- a/crates/frontend/templates/base.html
+++ b/crates/frontend/templates/base.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="/assets/logo.svg">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <title>{{ title }}</title>
         {% for item in meta.as_deref().unwrap_or([]) %}
         <meta name="{{ item.name }}" content="{{ item.content }}">
