Better mobile experience

agadmator-library · Nov 21, 2023 · d27064d · d27064d
1 parent dcd6f9e
commit d27064d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/VideoDetails.vue b/src/components/VideoDetails.vue
@@ -16,6 +16,13 @@ onMounted(() => {
       .then(responseJson => videoDetails.value = responseJson)
 })
 
+function getThumbnailUrl(videoDetails: any): string {
+  if (window.innerWidth > 1000) {
+    return videoDetails.videoSnippet.thumbnail.high.url
+  }
+  return videoDetails.videoSnippet.thumbnail.medium.url
+}
+
 </script>
 
 <template>
@@ -58,7 +65,7 @@ onMounted(() => {
               </table>
             </div>
             <div class="col">
-              <img :src="videoDetails.videoSnippet.thumbnail.standard.url">
+              <img :src="getThumbnailUrl(videoDetails)">
             </div>
           </div>
         </template>

diff --git a/src/components/VideoTable.vue b/src/components/VideoTable.vue
@@ -18,11 +18,11 @@ defineProps({
 })
 const expandedRows = ref([]);
 
-const publishedVisible = ref(true)
+const publishedVisible = ref(window.innerWidth > 1000)
 const titleVisible = ref(true)
 const whiteVisible = ref(true)
 const blackVisible = ref(true)
-const gamesDatesVisible = ref(true)
+const gamesDatesVisible = ref(window.innerWidth > 1000)
 const resultVisible = ref(false)
 const openingsVisible = ref(false)