From d2fc4c94e8d186297caef5c6c99fc3eb8dde5f6b Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Thu, 19 May 2022 15:14:17 -0400
Subject: [PATCH] playlist & community card components

---
 NUXT/components/communityCard.vue | 71 +++++++++++++++++++++++++
 NUXT/components/playlistCard.vue  | 77 +++++++++++++++++++++++++++
 NUXT/pages/channel/community.vue  | 82 ++++-------------------------
 NUXT/pages/channel/playlists.vue  | 86 ++++---------------------------
 NUXT/pages/library.vue            | 28 +++-------
 5 files changed, 176 insertions(+), 168 deletions(-)
 create mode 100644 NUXT/components/communityCard.vue
 create mode 100644 NUXT/components/playlistCard.vue

diff --git a/NUXT/components/communityCard.vue b/NUXT/components/communityCard.vue
new file mode 100644
index 0000000..83530f7
--- /dev/null
+++ b/NUXT/components/communityCard.vue
@@ -0,0 +1,71 @@
+<template>
+  <v-card
+    v-ripple
+    flat
+    class="background"
+    :class="
+      $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
+        ? $vuetify.theme.dark
+          ? 'lighten-1'
+          : 'darken-1'
+        : ''
+    "
+    :style="{
+      borderRadius: $store.state.tweaks.roundThumb
+        ? `${$store.state.tweaks.roundTweak / 2}rem`
+        : '0',
+      margin:
+        $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
+          ? '0 1rem 1rem 1rem'
+          : '0 0 0.25rem 0',
+    }"
+  >
+    <div class="d-flex flex-row pa-4">
+      <v-avatar size="50" color="primary" />
+      <div class="d-flex flex-column my-auto pl-4">
+        <b>Work in progress</b>
+        <div
+          class="background--text"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        >
+          69 years ago
+        </div>
+      </div>
+      <v-spacer />
+      <v-btn
+        fab
+        text
+        elevation="0"
+        style="width: 50px !important; height: 50px !important"
+      >
+        <v-icon>mdi-share-outline</v-icon>
+      </v-btn>
+    </div>
+    <p class="px-4" v-emoji>Blurb Blurb Text Goes Here ...</p>
+    <v-img
+      contain
+      class="background my-4"
+      :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+      style="max-height: 15rem"
+      :style="{
+        borderRadius: `${$store.state.tweaks.roundTweak / 4}rem`,
+        marginLeft:
+          !($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak) >
+          0
+            ? '1rem'
+            : '0',
+        marginRight:
+          !($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak) >
+          0
+            ? '1rem'
+            : '0',
+      }"
+      src="/dev.svg"
+    />
+    <div class="d-flex flex-row px-4 pb-4">
+      <v-icon>mdi-thumb-up-outline</v-icon>
+      <b class="mx-2">123</b>
+      <v-icon class="ml-2">mdi-thumb-down-outline</v-icon>
+    </div>
+  </v-card>
+</template>
diff --git a/NUXT/components/playlistCard.vue b/NUXT/components/playlistCard.vue
new file mode 100644
index 0000000..2775f80
--- /dev/null
+++ b/NUXT/components/playlistCard.vue
@@ -0,0 +1,77 @@
+<template>
+  <v-card
+    v-ripple
+    class="background d-flex flex-row overflow-hidden mb-4 mx-4"
+    :class="
+      $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
+        ? $vuetify.theme.dark
+          ? 'lighten-1'
+          : 'darken-1'
+        : ''
+    "
+    :style="{
+      borderRadius: $store.state.tweaks.roundThumb
+        ? `${$store.state.tweaks.roundTweak / 2}rem`
+        : '0',
+    }"
+    flat
+  >
+    <v-img
+      contain
+      src="/dev.svg"
+      class="background"
+      style="position: relative; max-width: 8rem !important"
+      :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+      :style="{
+        borderRadius: $store.state.tweaks.roundThumb
+          ? `${$store.state.tweaks.roundTweak / 4}rem`
+          : '0',
+      }"
+    >
+      <div
+        class="background d-flex flex-column justify-center align-center"
+        style="
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 40%;
+          height: 100%;
+          opacity: 0.5;
+        "
+      >
+        <div>420</div>
+        <v-icon>mdi-playlist-play</v-icon>
+      </div>
+    </v-img>
+    <div class="pa-4" v-emoji>
+      <b>Work in Progress</b>
+
+      <div
+        class="background--text caption"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
+        Bottom Text <br />
+        420 videos
+      </div>
+    </div>
+    <v-spacer></v-spacer>
+    <div class="d-flex flex-column">
+      <v-btn
+        text
+        tile
+        elevation="0"
+        style="width: 50px !important; height: 50px !important"
+      >
+        <v-icon>mdi-share-outline</v-icon>
+      </v-btn>
+      <v-btn
+        text
+        tile
+        elevation="0"
+        style="width: 50px !important; height: 50px !important"
+      >
+        <v-icon>mdi-plus-box-multiple-outline</v-icon>
+      </v-btn>
+    </div>
+  </v-card>
+</template>
diff --git a/NUXT/pages/channel/community.vue b/NUXT/pages/channel/community.vue
index 6bde337..4235d5b 100644
--- a/NUXT/pages/channel/community.vue
+++ b/NUXT/pages/channel/community.vue
@@ -1,77 +1,6 @@
 <template>
   <div>
-    <!-- TODO: make this a community-post-renderer -->
-    <v-card
-      v-ripple
-      flat
-      class="background"
-      :class="
-        $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
-          ? $vuetify.theme.dark
-            ? 'lighten-1'
-            : 'darken-1'
-          : ''
-      "
-      :style="{
-        borderRadius: $store.state.tweaks.roundThumb
-          ? `${$store.state.tweaks.roundTweak / 2}rem`
-          : '0',
-        margin:
-          $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
-            ? '0 1rem 1rem 1rem'
-            : '0 0 0.25rem 0',
-      }"
-    >
-      <div class="d-flex flex-row pa-4">
-        <v-avatar size="50" color="primary" />
-        <div class="d-flex flex-column my-auto pl-4">
-          <b>Work in progress</b>
-          <div
-            class="background--text"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          >
-            69 years ago
-          </div>
-        </div>
-        <v-spacer />
-        <v-btn
-          fab
-          text
-          elevation="0"
-          style="width: 50px !important; height: 50px !important"
-        >
-          <v-icon>mdi-share-outline</v-icon>
-        </v-btn>
-      </div>
-      <p class="px-4" v-emoji>Blurb Blurb Text Goes Here ...</p>
-      <v-img
-        contain
-        class="background my-4"
-        :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
-        style="max-height: 15rem"
-        :style="{
-          borderRadius: `${$store.state.tweaks.roundTweak / 4}rem`,
-          marginLeft:
-            !(
-              $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak
-            ) > 0
-              ? '1rem'
-              : '0',
-          marginRight:
-            !(
-              $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak
-            ) > 0
-              ? '1rem'
-              : '0',
-        }"
-        src="/dev.svg"
-      />
-      <div class="d-flex flex-row px-4 pb-4">
-        <v-icon>mdi-thumb-up-outline</v-icon>
-        <b class="mx-2">123</b>
-        <v-icon class="ml-2">mdi-thumb-down-outline</v-icon>
-      </div>
-    </v-card>
+    <community-card />
     <div
       v-if="
         !($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0)
@@ -82,3 +11,12 @@
     ></div>
   </div>
 </template>
+
+<script>
+import communityCard from "../../components/communityCard.vue";
+export default {
+  components: {
+    communityCard,
+  },
+};
+</script>
diff --git a/NUXT/pages/channel/playlists.vue b/NUXT/pages/channel/playlists.vue
index fbd5dc1..8af7935 100644
--- a/NUXT/pages/channel/playlists.vue
+++ b/NUXT/pages/channel/playlists.vue
@@ -1,80 +1,14 @@
 <template>
   <div>
-    <!-- TODO: make this a playlist-card-renderer -->
-    <v-card
-      v-ripple
-      class="background d-flex flex-row overflow-hidden mb-4 mx-4"
-      :class="
-        $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
-          ? $vuetify.theme.dark
-            ? 'lighten-1'
-            : 'darken-1'
-          : ''
-      "
-      :style="{
-        borderRadius: $store.state.tweaks.roundThumb
-          ? `${$store.state.tweaks.roundTweak / 2}rem`
-          : '0',
-      }"
-      flat
-    >
-      <v-img
-        contain
-        src="/dev.svg"
-        class="background"
-        style="position: relative; max-width: 8rem !important"
-        :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
-        :style="{
-          borderRadius: $store.state.tweaks.roundThumb
-            ? `${$store.state.tweaks.roundTweak / 4}rem`
-            : '0',
-        }"
-      >
-        <div
-          class="background d-flex flex-column justify-center align-center"
-          style="
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 40%;
-            height: 100%;
-            opacity: 0.5;
-          "
-        >
-          <div>420</div>
-          <v-icon>mdi-playlist-play</v-icon>
-        </div>
-      </v-img>
-      <div class="pa-4" v-emoji>
-        <b>Work in Progress</b>
-
-        <div
-          class="background--text caption"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-        >
-          Bottom Text <br />
-          420 videos
-        </div>
-      </div>
-      <v-spacer></v-spacer>
-      <div class="d-flex flex-column">
-        <v-btn
-          text
-          tile
-          elevation="0"
-          style="width: 50px !important; height: 50px !important"
-        >
-          <v-icon>mdi-share-outline</v-icon>
-        </v-btn>
-        <v-btn
-          text
-          tile
-          elevation="0"
-          style="width: 50px !important; height: 50px !important"
-        >
-          <v-icon>mdi-plus-box-multiple-outline</v-icon>
-        </v-btn>
-      </div>
-    </v-card>
+    <playlist-card />
   </div>
 </template>
+
+<script>
+import playlistCard from "../../components/playlistCard.vue";
+export default {
+  components: {
+    playlistCard,
+  },
+};
+</script>
diff --git a/NUXT/pages/library.vue b/NUXT/pages/library.vue
index 12857b6..81d5a8b 100644
--- a/NUXT/pages/library.vue
+++ b/NUXT/pages/library.vue
@@ -1,25 +1,13 @@
 <template>
-  <center class="px-4">
-    <v-img
-      contain
-      style="margin-top: 5em; max-width: 80%; max-height: 15em"
-      src="/dev.svg"
-    />
-    <h2
-      class="background--text mt-4"
-      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-    >
-      Page Under Construction
-    </h2>
-    <p
-      class="background--text"
-      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-    >
-      Please read the VueTube FAQ for more information.
-    </p>
-  </center>
+  <div>
+    <h4 class="ml-8 mb-2">Local Playlists</h4>
+    <playlist-card />
+  </div>
 </template>
 
 <script>
-export default {};
+import playlistCard from "../components/playlistCard.vue";
+export default {
+  components: { playlistCard },
+};
 </script>