From 6a0b6787bde98fe4168c08c47ac63b3ace9d7645 Mon Sep 17 00:00:00 2001
From: Alex Kozack <kozackunisoft@gmail.com>
Date: Wed, 19 May 2021 16:45:00 +0300
Subject: [PATCH] =?UTF-8?q?refactor:=20=D0=A2=D0=B0=D0=B1=D1=8B=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=B1=D0=BE=D0=BA=D0=BE=D0=B2=D0=BE=D0=B9=20=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D0=B2=D1=8B=D0=BF=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=8B=20=D0=BA=D0=B0=D0=BA=20`input:radio`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WatchPage/VideoPlayer/VideoPlayer.vue     | 12 ++--
 .../src/components/WatchPage/WatchPage.vue    | 69 +++++++++++++------
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/packages/renderer/src/components/WatchPage/VideoPlayer/VideoPlayer.vue b/packages/renderer/src/components/WatchPage/VideoPlayer/VideoPlayer.vue
index 1bd2a1ca..c16a71c2 100644
--- a/packages/renderer/src/components/WatchPage/VideoPlayer/VideoPlayer.vue
+++ b/packages/renderer/src/components/WatchPage/VideoPlayer/VideoPlayer.vue
@@ -190,11 +190,13 @@ export default defineComponent({
     //
     // Работа с горячими клавишами
     const activeElement = useActiveElement();
-    const notUsingInteractiveElement = computed(() =>
-      activeElement.value?.tagName !== 'INPUT'
-      && activeElement.value?.tagName !== 'TEXTAREA'
-      && activeElement.value?.tagName !== 'SELECT'
-      && activeElement.value?.tagName !== 'BUTTON',
+    const notUsingInteractiveElement = computed(() => {
+      console.log(activeElement.value?.tagName);
+        return activeElement.value?.tagName !== 'INPUT'
+        && activeElement.value?.tagName !== 'TEXTAREA'
+        && activeElement.value?.tagName !== 'SELECT'
+        && activeElement.value?.tagName !== 'BUTTON';
+      },
     );
 
     const {space, arrowRight, arrowLeft, arrowUp, arrowDown, pause, play} = useMagicKeys();
diff --git a/packages/renderer/src/components/WatchPage/WatchPage.vue b/packages/renderer/src/components/WatchPage/WatchPage.vue
index 4a5c42ab..046edd40 100644
--- a/packages/renderer/src/components/WatchPage/WatchPage.vue
+++ b/packages/renderer/src/components/WatchPage/WatchPage.vue
@@ -20,18 +20,26 @@
         v-model:is-opened="isSidePanelOpened"
       >
         <div class="tabs">
-          <button
-            :class="{active: sidePanelActiveTab === 'episodes'}"
-            @click="sidePanelActiveTab = 'episodes'"
-          >
-            Эпизоды
-          </button>
-          <button
-            :class="{active: sidePanelActiveTab === 'translations'}"
-            @click="sidePanelActiveTab = 'translations'"
-          >
-            Переводы
-          </button>
+          <div class="radio-button-container">
+            <input
+              id="active-tab-episodes"
+              v-model="sidePanelActiveTab"
+              type="radio"
+              name="active-tab"
+              value="episodes"
+            >
+            <label for="active-tab-episodes">Эпизоды</label>
+          </div>
+          <div class="radio-button-container">
+            <input
+              id="active-tab-translations"
+              v-model="sidePanelActiveTab"
+              type="radio"
+              name="active-tab"
+              value="translations"
+            >
+            <label for="active-tab-translations">Переводы</label>
+          </div>
         </div>
         <episodes-list
           v-if="episodes.length > 0 && sidePanelActiveTab === 'episodes'"
@@ -63,7 +71,6 @@ import {showErrorMessage} from '/@/utils/dialogs';
 
 
 
-
 export default defineComponent({
   components: {WinIcon, VideoPlayer, TranslationsList, EpisodesList, SidePanel},
   props: {
@@ -195,21 +202,43 @@ export default defineComponent({
 }
 
 .tabs {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   height: 2.5rem;
   margin-bottom: 1rem;
 }
-.tabs button {
-  flex: 1;
+
+.tabs label {
   border: none;
   background: none;
-  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  align-items: center;
+  justify-content: center;
 }
-.tabs button:hover {
-  background: rgba(255,255,255,0.2);
+
+.tabs .radio-button-container:hover label {
+  background: rgba(255, 255, 255, 0.2);
 }
-.tabs button.active {
+
+.tabs input:checked + label {
   font-weight: bold;
   border-bottom: 3px solid;
 }
+
+.tabs .radio-button-container {
+  cursor: pointer;
+  position: relative;
+}
+.tabs .radio-button-container input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 0;
+  opacity: 0;
+}
 </style>