Community post placeholder

NUXT/components/SectionRenderers/shelfRenderer.vue

@@ -22,12 +22,12 @@
         :render="render.content[Object.keys(render.content)[0]]"
       ></component>
     </div>
-    <!-- <div
+    <div
       v-if="render.separator && render.separator.hasBottomSeparator"
       class="separator-bottom background"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{ height: render.separator.height + 'px' }"
-    ></div> -->
+    ></div>
   </div>
 </template>
 

NUXT/pages/channel/about.vue

@@ -1,11 +1,23 @@
 <template>
-  <div>
-    <b>Description</b>
+  <div class="pa-8">
+    <h3 class="my-2">Description</h3>
     <p>{{ $store.state.channel.descriptionPreview }}</p>
     <br />
     <br />
-    <b>Links</b>
+    <h3 class="my-2">Links</h3>
+    <div v-ripple class="py-2 d-flex flex-row">
+      <v-avatar tile size="20" color="primary"> </v-avatar>
+      <span class="ml-4 primary--text">Social Media</span>
+    </div>
     <br />
-    <b>More Info</b>
+    <h3 class="my-2">More Info</h3>
+    <div v-ripple class="py-2 d-flex flex-row">
+      <v-icon size="24" color="primary">mdi-web</v-icon>
+      <span class="ml-4">https://www.youtube.com/c/todo</span>
+    </div>
+    <div v-ripple class="py-2 d-flex flex-row">
+      <v-icon size="24" color="primary">mdi-earth</v-icon>
+      <span class="ml-4">United States</span>
+    </div>
   </div>
 </template>

NUXT/pages/channel/channels.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-4">
+  <div>
     <v-list-item
       v-for="(channel, index) in $store.state.channel.featuredChannels"
       :key="index"

NUXT/pages/channel/community.vue

@@ -1,3 +1,89 @@
 <template>
-  <div></div>
+  <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-btn
+          fab
+          text
+          elevation="0"
+          style="width: 50px !important; height: 50px !important"
+          @click.prevent=""
+        >
+          <v-icon>mdi-share-outline</v-icon>
+          <div
+            class="mt-2"
+            style="font-size: 0.66rem"
+            v-text="item.value || item.name"
+          />
+        </v-btn>
+      </div>
+      <p class="px-4">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>
+    <div
+      v-if="
+        !($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0)
+      "
+      class="separator-bottom background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      style="height: 4px"
+    ></div>
+  </div>
 </template>

NUXT/pages/channel/videos.vue

@@ -1,3 +1,12 @@
 <template>
-  <div></div>
+  <div>
+    <!-- <compact-video-renderer :video="$store.state.channel.videoExample" /> -->
+  </div>
 </template>
+
+<script>
+import CompactVideoRenderer from "../../components/CompactRenderers/compactVideoRenderer.vue";
+export default {
+  components: { CompactVideoRenderer },
+};
+</script>

NUXT/store/channel/index.js

@@ -11,6 +11,7 @@ const getDefaultState = () => {
     subscribers: null,
     videosCount: null,
     featuredChannels: null,
+    videoExample: null,
   };
 };
 export const state = () => {
@@ -55,6 +56,14 @@ export const actions = {
           );
         state.featuredChannels =
           featuredSection.shelfRenderer.content.horizontalListRenderer.items;
+        console.log(
+          channel.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer
+            .content.sectionListRenderer.contents[0].shelfRenderer.content
+            .verticalListRenderer.items[0].elementRenderer.newElement.type
+            .componentType.model
+        );
+        state.videoExample =
+          channel.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents[0].shelfRenderer.content.verticalListRenderer.items[0].elementRenderer.newElement.type.componentType.model.videoWithContextModel.videoWithContextData.videoData;
       })
       .catch((err) => {
         state.loading = false;