{{ props.title }}
-
+
-
+
@@ -55,7 +55,7 @@
.media-showcase-hero {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: end;
}
.media-showcase-logo img {
max-height: 90px;
@@ -67,14 +67,14 @@
}
.media-showcase-info {
text-align: center;
- padding: 3em 5em;
- padding-right: 13em;
+ padding: 3em 3em;
+ margin-left: 2%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.3em;
max-height: 475px;
- max-width: 854px;
+ max-width: 700px;
}
.media-showcase-info-misc {
display: flex;
diff --git a/src/components/ScrollerItemLandscape.vue b/src/components/ScrollerItemLandscape.vue
index 36b4c20..ffc74a7 100644
--- a/src/components/ScrollerItemLandscape.vue
+++ b/src/components/ScrollerItemLandscape.vue
@@ -54,7 +54,7 @@ const props = defineProps({
-
@@ -55,7 +55,7 @@
.media-showcase-hero {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: end;
}
.media-showcase-logo img {
max-height: 90px;
@@ -67,14 +67,14 @@
}
.media-showcase-info {
text-align: center;
- padding: 3em 5em;
- padding-right: 13em;
+ padding: 3em 3em;
+ margin-left: 2%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.3em;
max-height: 475px;
- max-width: 854px;
+ max-width: 700px;
}
.media-showcase-info-misc {
display: flex;
diff --git a/src/components/ScrollerItemLandscape.vue b/src/components/ScrollerItemLandscape.vue
index 36b4c20..ffc74a7 100644
--- a/src/components/ScrollerItemLandscape.vue
+++ b/src/components/ScrollerItemLandscape.vue
@@ -54,7 +54,7 @@ const props = defineProps({
{{ props.title }}
{{ props.infoSubtext }}
{{ props.summary }}
+ {{ props.summary }}
{{ props.date }}
{{ props.runtime }}
@@ -96,17 +96,15 @@ const props = defineProps({
width: 35px;
height: 35px;
cursor: pointer;
- z-index: 3;
- /* visibility: hidden; */
+ z-index: 2;
opacity: 0%;
padding: 0.75em;
- /* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.5);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(6.6px);
- -webkit-backdrop-filter: blur(6.6px);
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background 10ms linear 0ms;
}
@@ -118,10 +116,10 @@ const props = defineProps({
left: 135px;
opacity: 100%;
transition:
- all 0.25s ease 0.5s,
+ all var(--hover-animation-speed) ease var(--hover-animation-delay),
z-index 1ms,
background 10ms linear 0ms;
- z-index: 4;
+ z-index: 5;
visibility: visible;
}
.scroller-item-img {
@@ -137,10 +135,11 @@ const props = defineProps({
transform: scale(1.35) translateX(32px) translateY(17px);
cursor: pointer;
transition:
- all 0.25s ease 0.5s,
+ all var(--hover-animation-speed) ease,
z-index 1ms;
+ transition-delay: var(--hover-animation-delay);
position: relative;
- z-index: 3;
+ z-index: 4;
}
.scroller-item-title {
text-align: center;
@@ -163,12 +162,13 @@ const props = defineProps({
}
.scroller-item-img:hover .info-box {
visibility: visible;
- transition-delay: 0.5s;
transform: translateX(324px);
width: 340px;
height: 183px;
- z-index: 2;
- transition-duration: 0.3s;
+ z-index: 3;
+ transition:
+ all var(--hover-animation-speed) ease var(--hover-animation-delay),
+ z-index 1ms var(--hover-animation-delay);
}
.info-box-content {
width: 90%;
@@ -179,8 +179,9 @@ const props = defineProps({
display: flex;
flex-direction: column;
align-items: baseline;
- gap: 2em;
- min-height: 80%;
+ justify-content: space-around;
+ gap: 1em;
+ min-height: 100%;
}
.scroller-item:hover .info-box-content {
max-height: 183px;
diff --git a/src/components/ScrollerItemPortrait.vue b/src/components/ScrollerItemPortrait.vue
index 44b828e..06df160 100644
--- a/src/components/ScrollerItemPortrait.vue
+++ b/src/components/ScrollerItemPortrait.vue
@@ -34,6 +34,9 @@ const props = defineProps({
MPAA: {
type: String,
},
+ tag: {
+ type: String,
+ },
})
@@ -41,6 +44,9 @@ const props = defineProps({
+ ![]()
-1) {
+ return 'Microsoft Edge'
+ } else if (userAgent.indexOf('Chrome') > -1) {
+ return 'Chrome'
+ } else if (userAgent.indexOf('Firefox') > -1) {
+ return 'Firefox'
+ } else if (userAgent.indexOf('Safari') > -1) {
+ return 'Safari'
+ } else if (userAgent.indexOf('Opera') > -1) {
+ return 'Opera'
+ } else if (userAgent.indexOf('Trident') > -1 || userAgent.indexOf('MSIE') > -1) {
+ return 'Internet Explorer'
+ }
+
+ return 'Unknown'
+}
+
+const jellyfin = new Jellyfin({
+ clientInfo: {
+ name: 'Featherfin',
+ version: '0.0.1',
+ },
+ deviceInfo: {
+ name: detectBrowser(),
+ id: 'abc123',
+ },
+})
+
+const JF = jellyfin.createApi('http://192.168.0.63:30013')
+
+export const Libraries = async () => {
+ const libs = await getLibraryApi(JF).getMediaFolders()
+ console.log(libs.data)
+ return libs.data
+}
+
+export default JF
+
+// import { useDataStore } from '@/stores/data'
+
+// type Endpoint = {
+// resource: string
+// method: string
+// }
+
+// type View = {
+// Id: string
+// Name: string
+// CollectionType: string
+// ParentId: string
+// }
+
+// type NextUp = {
+// Items: [Item]
+// }
+
+// type Item = {
+// Name: string
+// Id: string
+// Type: string
+// OfficialRating?: string
+// ImageTags: ImageTags
+// CommunityRating?: number
+// ProductionYear?: number
+// IndexNumber?: number
+// ParentIndexNumber?: number
+// SeriesName?: string
+// Overview?: string
+// RunTimeTicks: number
+// }
+
+// type ImageTags = {
+// Primary?: string
+// Thumb?: string
+// }
+
+// class JFApi {
+// request(host: string, endpoint: Endpoint) {
+// return fetch(`${host}${endpoint.resource}`, {
+// method: endpoint?.method,
+// })
+// .then(async (response) => {
+// const data = await response.json()
+// return data as T
+// })
+// .catch((error) => {
+// return error
+// })
+// }
+// LoadViews(host: string, userid: string) {
+// const { setViews } = useDataStore()
+// return this.request(host, {
+// resource: `/UserViews?userId=${userid}`,
+// method: 'GET',
+// })
+// .then((data) => {
+// setViews(data)
+// return data
+// })
+// .catch((err) => {
+// return err
+// })
+// }
+// GetLatest(host: string, view: View): Promise<[Item]> {
+// return this.request(host, {
+// resource: `/Latest&ParentId=${view.Id}`,
+// method: 'GET',
+// })
+// .then((data) => {
+// return data
+// })
+// .catch((err) => {
+// return err
+// })
+// }
+// GetNextUp(host: string): Promise {
+// return this.request(host, {
+// resource: `/Shows/NextUp?Limit=24&Fields=PrimaryImageAspectRatio%2CDateCreated%2CPath%2CMediaSourceCount&UserId=f7967316db8e46b4960690d0df2c0163&ImageTypeLimit=1&EnableImageTypes=Primary%2CBackdrop%2CBanner%2CThumb&EnableTotalRecordCount=false&DisableFirstEpisode=false&NextUpDateCutoff=2023-12-03T21%3A55%3A33.690Z&EnableResumable=false&EnableRewatching=false`,
+// method: 'GET',
+// })
+// .then((data) => {
+// return data
+// })
+// .catch((err) => {
+// return err
+// })
+// }
+// GetItem(host: string, userid: string, itemId: string): Promise- {
+// return this.request(host, {
+// resource: `/User/${userid}/Items/${itemId}`,
+// method: 'GET',
+// })
+// .then((data) => {
+// return data
+// })
+// .catch((err) => {
+// return err
+// })
+// }
+// ThumbImageUrl(host: string, itemId: string, imgTag: string) {
+// return `${host}/Items/${itemId}/Images/Thumb?fillHeight=267&fillWidth=474&quality=96&tag=${imgTag}`
+// }
+// PrimaryImageUrl(host: string, itemId: string, imgTag: string) {
+// return `${host}/Items/${itemId}/Images/Primary?fillHeight=446&fillWidth=297&quality=96&tag=${imgTag}`
+// }
+// Login(host: string, username: string, password: string) {
+// return fetch(`${host}/Users/authenticatebyname`, {
+// method: 'POST',
+// body: JSON.stringify({ Username: username, Pw: password }),
+// headers: {
+// 'Content-Type': 'application/json',
+// Authorization:
+// 'MediaBrowser Client="Jellyfin Web", Device="Chrome", DeviceId="TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzEyNC4wLjAuMCBTYWZhcmkvNTM3LjM2fDE3MTQ1MzI1OTIxODU1", Version="10.10.3"',
+// },
+// })
+// .then((data) => data.json())
+// .then((data) => console.log(data))
+// }
+// }
+
+// export default new JFApi()
+
+// /*
+// - /UserViews?userId=XYZ - returns [Library]
+// - /Latest?...&ParentId=Library.Id - returns latest in library
+// - /Resume?...&MediaTypes=Video - returns unfinished playback
+// - /NextUp?... - returns [Episode]
+// - /Users/authenticatebyname body:{Username: "xyz", Pw: "xyz123"} returns: AccessToken, User, SessionInfo
+// Authentication is done by appending 'Token="MyTokenXYZ123"' to Authorization header
+// - /Users/User.Id - returns: User
+// - /Users/User.Id/Items?SortBy=DateCreated%2CSortName%2CProductionYear&SortOrder=Descending&IncludeItemTypes=Movie&Recursive=true&Fields=PrimaryImageAspectRatio%2CMediaSourceCount&ImageTypeLimit=1&EnableImageTypes=Primary%2CBackdrop%2CBanner%2CThumb&StartIndex=0&ParentId=f137a2dd21bbc1b99aa5c0f6bf02a805&Limit=100 - returns [Item
]
+// - /Users/User.Id/Items/Item.Id - FullItem
+// - /Items/Item.Id/Similar?userId=User.Id&limit=12&fields=PrimaryImageAspectRatio - returns similar items
+// - /Items/Item.Id/Images/Primary?fillHeight=713&fillWidth=500&quality=96&tag=Item.ImageTags.Primary - returns Primary Image
+// - /.../Images/Thumb?...&tag=Episode.ParentThumbImageTag
+// */
diff --git a/src/router/index.ts b/src/router/index.ts
index 3e49915..ca77e9d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,12 +10,12 @@ const router = createRouter({
component: HomeView,
},
{
- path: '/about',
- name: 'about',
- // route level code-splitting
- // this generates a separate chunk (About.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import('../views/AboutView.vue'),
+ path: '/login',
+ name: 'login',
+ component: () => import(/* webpackChunkName: 'login' */ '@/views/LoginView.vue'),
+ meta: {
+ hideNavbar: true,
+ },
},
],
})
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
- const count = ref(0)
- const doubleCount = computed(() => count.value * 2)
- function increment() {
- count.value++
- }
-
- return { count, doubleCount, increment }
-})
diff --git a/src/stores/data.ts b/src/stores/data.ts
new file mode 100644
index 0000000..119f4fb
--- /dev/null
+++ b/src/stores/data.ts
@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+type UserData = {
+ host?: string
+ id?: string
+ name?: string
+ views?: [View]
+}
+type View = {
+ name: string
+ mediaType: string
+ id: string
+}
+
+export const useDataStore = defineStore('data', () => {
+ const data = ref({})
+ function setServerHost(host: string) {
+ data.value.host = host
+ }
+ function setViews(views: [View]) {
+ data.value.views = views
+ }
+ function setUser(id: string, name: string) {
+ data.value.id = id
+ data.value.name = name
+ }
+ return { data, setServerHost, setViews, setUser }
+})
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 756ad2a..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
+ {{ props.tag }}
+
-
-
-
-
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3b2090f..5246f72 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,11 @@
@@ -14,7 +18,7 @@ import { ContinueWatching, LatestAnime, LatestMovies } from '@/feed'
This is an about page
-Movies
Shows
+
+
+
+
+
+ Username
+
+
+
+ Password
+
+
+
+
+