From edd65825f851b12e362221e02d524f01ab2784bd Mon Sep 17 00:00:00 2001
From: gmnsii <github.gmnsii@pm.me>
Date: Thu, 15 Dec 2022 15:26:42 -0800
Subject: [PATCH] ShareModal - visual changes and improved component
 reusability

Time code text field no longer appears when sharing without time code.
Time code text field now appears under 'share with time code' checkbox.
'playlistId' and 'playlistIndex' are no longer required props.
---
 src/components/ShareModal.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index cf23a438..3a7b1218 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -1,10 +1,6 @@
 <template>
     <ModalComponent>
         <h2 v-t="'actions.share'" />
-        <div class="flex justify-between mt-4">
-            <label v-t="'actions.with_timecode'" for="withTimeCode" />
-            <input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
-        </div>
         <div class="flex justify-between">
             <label v-t="'actions.piped_link'" />
             <input type="checkbox" v-model="pipedLink" @change="onChange" />
@@ -13,7 +9,11 @@
             <label v-t="'actions.with_playlist'" />
             <input type="checkbox" v-model="withPlaylist" @change="onChange" />
         </div>
-        <div class="flex justify-between mt-2">
+        <div class="flex justify-between">
+            <label v-t="'actions.with_timecode'" for="withTimeCode" />
+            <input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
+        </div>
+        <div v-if="this.withTimeCode" class="flex justify-between mt-2">
             <label v-t="'actions.time_code'" />
             <input class="input w-12" type="text" v-model="timeStamp" />
         </div>
@@ -42,11 +42,9 @@ export default {
         },
         playlistId: {
             type: String,
-            required: true,
         },
         playlistIndex: {
             type: Number,
-            required: true,
         },
     },
     components: {