refactor home

src/components/HomeMedia.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { View } from '@/jfapi'
+import NextUp from './NextUp.vue'
+import LatestMedia from './LatestMedia.vue'
+import { onBeforeMount, ref } from 'vue'
+
+// const props = defineProps<{
+//   views: View[]
+// }>()
+
+const views = ref<View[]>()
+const viewstring = ref<string | null>('')
+views.value = undefined
+onBeforeMount(() => {
+  viewstring.value = localStorage.getItem('jf_views')
+  views.value = JSON.parse(viewstring.value ? viewstring.value : '')
+})
+console.log('HomeMedia =>', views.value)
+</script>
+<template>
+  <NextUp />
+  <!-- <MediaScroller title="Latest Movies" :items="LatestMovies" />
+<MediaScroller title="Latest Anime" :items="LatestAnime" /> -->
+  <LatestMedia v-for="view of views" :view="view" :key="view.Id" />
+</template>
+
+<style scoped></style>

src/jfapi.ts

@@ -60,6 +60,12 @@ type Item = {
   UserData?: UserData
 }
 
+type ItemList = {
+  Items: Item[]
+  StartIndex: number
+  TotalRecordCount: number
+}
+
 type UserData = {
   UnplayedItemCount: number
 }
@@ -76,7 +82,7 @@ type User = {
   Views?: View[]
 }
 
-export type { User, View, Item, ViewList }
+export type { User, View, Item, ViewList, ItemList }
 
 class JFApi {
   request<T>(endpoint: Endpoint): Promise<T | null> {
@@ -122,6 +128,12 @@ class JFApi {
       method: 'GET',
     })
   }
+  GetItemsInView(userid: string, viewId: string) {
+    return this.request({
+      resource: `http://192.168.0.63:30013/Users/${userid}/Items?SortBy=DateCreated%2CSortName%2CProductionYear&SortOrder=Descending&IncludeItemTypes=Movie&Recursive=true&Fields=PrimaryImageAspectRatio%2CMediaSourceCount&ImageTypeLimit=1&EnableImageTypes=Primary%2CBackdrop%2CBanner%2CThumb&StartIndex=0&ParentId=${viewId}&Limit=100`,
+      method: 'GET',
+    })
+  }
   ThumbImageUrl(itemId: string, imgTag: string) {
     const host = localStorage.getItem('jf_host') === null ? '' : localStorage.getItem('jf_host')
     return `${host}/Items/${itemId}/Images/Thumb?fillHeight=267&fillWidth=474&quality=96&tag=${imgTag}`

src/router/index.ts

@@ -1,13 +1,25 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import BrowseView from '@/views/BrowseView.vue'
+import HomeMedia from '@/components/HomeMedia.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'browse',
-      component: HomeView,
+      component: BrowseView,
+      redirect: '/home',
+      children: [
+        {
+          path: 'home',
+          component: HomeMedia,
+        },
+        {
+          path: 'view/:id',
+          component: HomeMedia,
+        },
+      ],
     },
     {
       path: '/login',

src/views/BrowseView.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import MediaShowcase from '@/components/MediaShowcase.vue'
+import type { View, ViewList } from '@/jfapi'
+import { onBeforeMount, ref } from 'vue'
+import jfapi from '@/jfapi'
+
+const views = ref<View[]>()
+onBeforeMount(async () => {
+  const viewlist = ref<ViewList | null>()
+  const userid = localStorage.getItem('jf_userid')
+  const host = localStorage.getItem('jf_host')
+  console.log('Host =>', host)
+  viewlist.value = await jfapi.LoadViews(userid ? userid : '')
+  if (window.location.pathname.toLowerCase() !== '/login') {
+    if (host === null) {
+      window.location.href = '/login'
+    } else if (viewlist.value === null) {
+      window.location.href = '/login'
+    }
+  }
+  localStorage.setItem('jf_views', JSON.stringify(viewlist.value ? viewlist.value.Items : ''))
+  views.value = viewlist.value ? viewlist.value.Items : undefined
+  console.log(views.value)
+})
+</script>
+
+<template>
+  <main>
+    <MediaShowcase />
+    <div class="home-nav">
+      <div class="home-nav-item active">Home</div>
+      <div class="home-nav-item" v-for="view in views" :key="view.Id">{{ view.Name }}</div>
+    </div>
+    <div class="media">
+      <RouterView />
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.home-nav {
+  display: flex;
+  justify-content: center;
+  margin-top: 1.5em;
+  gap: 3em;
+  align-items: center;
+}
+.home-nav-item:hover {
+  cursor: pointer;
+  color: var(--color-text-faded);
+}
+.home-nav-item.active {
+  padding: 0.4em 1.5em;
+  background-color: var(--color-text);
+  border-radius: 15px;
+  color: var(--color-text-dark);
+  font-weight: 600;
+}
+.home-nav-item.active:hover {
+  background-color: var(--color-text-faded);
+}
+.media {
+  margin: 0 10%;
+}
+</style>

src/views/HomeView.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import MediaShowcase from '@/components/MediaShowcase.vue'
-import ContinueWatching from '@/components/NextUp.vue'
-import LatestMedia from '@/components/LatestMedia.vue'
 import type { View, ViewList } from '@/jfapi'
 import { onBeforeMount, ref } from 'vue'
 import jfapi from '@/jfapi'
@@ -20,9 +18,9 @@ onBeforeMount(async () => {
       window.location.href = '/login'
     }
   }
-  localStorage.setItem('jf_views', JSON.stringify(viewlist.value ? viewlist.value.Items : ''))
   views.value = viewlist.value ? viewlist.value.Items : undefined
   console.log(views.value)
+  localStorage.setItem('jf_views', JSON.stringify(views.value ? views.value : ''))
 })
 </script>
 
@@ -34,10 +32,7 @@ onBeforeMount(async () => {
       <div class="home-nav-item" v-for="view in views" :key="view.Id">{{ view.Name }}</div>
     </div>
     <div class="media">
-      <ContinueWatching />
+      <RouterView />
-      <!-- <MediaScroller title="Latest Movies" :items="LatestMovies" />
-    <MediaScroller title="Latest Anime" :items="LatestAnime" /> -->
-      <LatestMedia v-for="view of views" :view="view" :key="view.Id" />
     </div>
   </main>
 </template>