mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 11:55:38 +00:00
Feat: Discover page (#108)
* Add discover page components with category showcase * Add section page component for browsing discover categories * Add icons for discover page categories (spotlights, theater, compass, calendar, star) * Add discover icon (compass navigation) for main navigation * Update navigation to use IconDiscover for discover route * Add discover and section page routes with interfaces * Update home page and components to integrate with discover navigation * Remove deprecated ListPage component
This commit is contained in:
GitHub
277
src/components/DiscoverMinimal.vue
Normal file
277
src/components/DiscoverMinimal.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<section class="discover-minimal">
|
||||
<div class="discover-minimal-header">
|
||||
<div class="header-content">
|
||||
<h2 class="discover-title">Explore Collections</h2>
|
||||
<p class="discover-description">
|
||||
Curated selections organized by genre, mood, and decade
|
||||
</p>
|
||||
</div>
|
||||
<router-link to="/discover" class="view-all-link">
|
||||
<span class="desktop-only">View All Categories →</span>
|
||||
<span class="mobile-only">View All →</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<DiscoverShowcase @select="navigateToDiscover" />
|
||||
|
||||
<div class="featured-collections-wrapper">
|
||||
<div class="featured-collections-header">
|
||||
<div class="header-decorator"></div>
|
||||
<h3 class="featured-title">Featured Picks</h3>
|
||||
<div class="header-decorator"></div>
|
||||
</div>
|
||||
<div class="featured-collections">
|
||||
<ResultsSection
|
||||
v-for="list in featuredLists"
|
||||
:key="list.id"
|
||||
:api-function="list.apiFunction"
|
||||
:title="list.title"
|
||||
:short-list="true"
|
||||
section-type="discover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import ResultsSection from "@/components/ResultsSection.vue";
|
||||
import DiscoverShowcase from "@/components/DiscoverShowcase.vue";
|
||||
import { getTmdbMovieDiscoverByName } from "../api";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const featuredLists = [
|
||||
{
|
||||
id: "feel_good",
|
||||
title: "Feel Good",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("feel_good")
|
||||
},
|
||||
{
|
||||
id: "2000s_classics",
|
||||
title: "2000s Classics",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("2000s_classics")
|
||||
},
|
||||
{
|
||||
id: "horror_hits",
|
||||
title: "Horror Hits",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("horror_hits")
|
||||
}
|
||||
];
|
||||
|
||||
function navigateToDiscover(categoryId?: string) {
|
||||
router.push(`/discover${categoryId ? `?category=${categoryId}` : ""}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.discover-minimal {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.01) 0%,
|
||||
rgba(255, 255, 255, 0.03) 50%,
|
||||
rgba(255, 255, 255, 0.01) 100%
|
||||
);
|
||||
padding: 3rem 0;
|
||||
position: relative;
|
||||
margin: 2rem 0;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.15) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 1rem 0 0.5rem;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discover-minimal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem 2rem;
|
||||
gap: 1rem;
|
||||
|
||||
@include mobile {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem 0.6rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex: 1;
|
||||
|
||||
@include mobile {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.discover-title {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@include mobile {
|
||||
font-size: 1.75rem;
|
||||
margin: 0 0 0.15rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.discover-description {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
color: $text-color-70;
|
||||
font-weight: 300;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.view-all-link {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 25px;
|
||||
color: $text-color-70;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
@include mobile {
|
||||
padding: 0.45rem 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: var(--text-color);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-collections-wrapper {
|
||||
padding-top: 2rem;
|
||||
position: relative;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 0;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-collections-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mobile {
|
||||
padding: 0 1rem 0.4rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.header-decorator {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
rgba(255, 255, 255, 0.3) 100%
|
||||
);
|
||||
|
||||
&:last-child {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9rem;
|
||||
color: $text-color-70;
|
||||
|
||||
@include mobile {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-collections {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 20px;
|
||||
max-width: calc(100% - 4rem);
|
||||
margin: 0 auto;
|
||||
|
||||
@include mobile {
|
||||
border-radius: 12px;
|
||||
padding: 0.25rem 0;
|
||||
max-width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
360
src/components/DiscoverShowcase.vue
Normal file
360
src/components/DiscoverShowcase.vue
Normal file
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<div class="category-showcase">
|
||||
<div class="categories-grid">
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="category-card"
|
||||
:class="[
|
||||
`category-${category.id}`,
|
||||
{ active: activeCategory === category.id }
|
||||
]"
|
||||
@click="$emit('select', category.id)"
|
||||
>
|
||||
<component :is="category.icon" class="category-icon" />
|
||||
<div class="category-info">
|
||||
<h3 class="category-name">{{ category.label }}</h3>
|
||||
<p class="category-count">
|
||||
<span class="desktop-only">{{ category.count }} collections</span>
|
||||
<span class="mobile-only">{{ category.count }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="category-arrow">→</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
import IconPopular from "@/icons/IconPopular.vue";
|
||||
import IconSpotlights from "@/icons/IconSpotlights.vue";
|
||||
import IconTheater from "@/icons/IconTheater.vue";
|
||||
import IconCalendar from "@/icons/IconCalendar.vue";
|
||||
import IconStar from "@/icons/IconStar.vue";
|
||||
|
||||
interface Props {
|
||||
activeCategory?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
activeCategory: ""
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
select: [categoryId: string];
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const categories = [
|
||||
{ id: "popular", label: "Popular", icon: IconPopular, count: 5 },
|
||||
{ id: "genres", label: "Genres", icon: IconSpotlights, count: 13 },
|
||||
{ id: "moods", label: "Moods & Themes", icon: IconTheater, count: 7 },
|
||||
{ id: "decades", label: "By Decade", icon: IconCalendar, count: 4 },
|
||||
{ id: "special", label: "Special Collections", icon: IconStar, count: 11 }
|
||||
];
|
||||
|
||||
function navigateToDiscover(categoryId?: string) {
|
||||
router.push(`/discover${categoryId ? `?category=${categoryId}` : ""}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.category-showcase {
|
||||
padding: 1.5rem;
|
||||
padding-top: 0;
|
||||
|
||||
@include mobile {
|
||||
padding: 0 1rem 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.categories-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
|
||||
@include mobile {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category-card {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@include mobile {
|
||||
padding: 0.45rem 0.7rem;
|
||||
gap: 0.4rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&.category-popular {
|
||||
background: rgba(255, 80, 80, 0.15);
|
||||
border-color: rgba(255, 80, 80, 0.3);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(255, 120, 120, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-genres {
|
||||
background: rgba(80, 140, 255, 0.15);
|
||||
border-color: rgba(80, 140, 255, 0.3);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(120, 170, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-moods {
|
||||
background: rgba(160, 80, 255, 0.15);
|
||||
border-color: rgba(160, 80, 255, 0.3);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(180, 120, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-decades {
|
||||
background: rgba(80, 200, 200, 0.15);
|
||||
border-color: rgba(80, 200, 200, 0.3);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(100, 220, 220, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-special {
|
||||
background: rgba(255, 180, 80, 0.15);
|
||||
border-color: rgba(255, 180, 80, 0.3);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(255, 200, 120, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
transform: translateY(-3px) scale(1.03);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
transform: rotate(5deg) scale(1.15);
|
||||
}
|
||||
|
||||
.category-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&.category-popular {
|
||||
background: rgba(255, 80, 80, 0.3);
|
||||
border-color: rgba(255, 80, 80, 0.6);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(255, 160, 160, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-genres {
|
||||
background: rgba(80, 140, 255, 0.3);
|
||||
border-color: rgba(80, 140, 255, 0.6);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(160, 210, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-moods {
|
||||
background: rgba(160, 80, 255, 0.3);
|
||||
border-color: rgba(160, 80, 255, 0.6);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(220, 160, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-decades {
|
||||
background: rgba(80, 200, 200, 0.3);
|
||||
border-color: rgba(80, 200, 200, 0.6);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(140, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-special {
|
||||
background: rgba(255, 180, 80, 0.3);
|
||||
border-color: rgba(255, 180, 80, 0.6);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(255, 230, 160, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.15) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px) scale(1.03);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&.category-popular {
|
||||
background: rgba(255, 80, 80, 0.25);
|
||||
border-color: rgba(255, 80, 80, 0.5);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(255, 140, 140, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-genres {
|
||||
background: rgba(80, 140, 255, 0.25);
|
||||
border-color: rgba(80, 140, 255, 0.5);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(140, 190, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-moods {
|
||||
background: rgba(160, 80, 255, 0.25);
|
||||
border-color: rgba(160, 80, 255, 0.5);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(200, 140, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-decades {
|
||||
background: rgba(80, 200, 200, 0.25);
|
||||
border-color: rgba(80, 200, 200, 0.5);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(120, 240, 240, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.category-special {
|
||||
background: rgba(255, 180, 80, 0.25);
|
||||
border-color: rgba(255, 180, 80, 0.5);
|
||||
|
||||
.category-icon {
|
||||
fill: rgba(255, 220, 140, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
transform: rotate(5deg) scale(1.15);
|
||||
}
|
||||
|
||||
.category-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--text-color);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-shrink: 0;
|
||||
|
||||
@include mobile {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.category-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
line-height: 1;
|
||||
|
||||
@include mobile {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category-name {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
|
||||
@include mobile {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category-count {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include mobile {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.category-arrow {
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -31,12 +31,22 @@
|
||||
info?: string | Array<string>;
|
||||
link?: string;
|
||||
shortList?: boolean;
|
||||
sectionType?: "list" | "discover";
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
sectionType: "list"
|
||||
});
|
||||
|
||||
const urlify = computed(() => {
|
||||
return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
|
||||
const normalizedTitle = props.title
|
||||
.toLowerCase()
|
||||
.replace(/'s\b/g, "") // Remove possessive 's
|
||||
.replace(/[^\w\d\s-]/g, "") // Remove special characters (keep word chars, dashes, digits, spaces)
|
||||
.replace(/\s+/g, "_") // Replace spaces with underscores
|
||||
.replace(/-/g, "_") // Replace dash with underscore
|
||||
.replace(/_+/g, "_"); // Replace multiple underscores with single underscore
|
||||
return `/${props.sectionType}/${normalizedTitle}`;
|
||||
});
|
||||
|
||||
const prettify = computed(() => {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div ref="resultSection" class="resultSection">
|
||||
<page-header v-bind="{ title, info, shortList }" />
|
||||
<page-header
|
||||
v-bind="{ title, info, shortList, sectionType: props.sectionType }"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="!loadedPages.includes(1) && loading == false"
|
||||
@@ -40,9 +42,12 @@
|
||||
title: string;
|
||||
apiFunction: (page: number) => Promise<IList>;
|
||||
shortList?: boolean;
|
||||
sectionType?: "list" | "discover";
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
sectionType: "list"
|
||||
});
|
||||
|
||||
const results: Ref<ListResults> = ref([]);
|
||||
const page: Ref<number> = ref(1);
|
||||
|
||||
@@ -15,13 +15,14 @@
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import NavigationIcon from "@/components/header/NavigationIcon.vue";
|
||||
import IconInbox from "@/icons/IconInbox.vue";
|
||||
import IconMailboxFull from "@/icons/IconMailboxFull.vue";
|
||||
import IconNowPlaying from "@/icons/IconNowPlaying.vue";
|
||||
import IconPopular from "@/icons/IconPopular.vue";
|
||||
import IconUpcoming from "@/icons/IconUpcoming.vue";
|
||||
import IconSettings from "@/icons/IconSettings.vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
import IconBinoculars from "@/icons/IconBinoculars.vue";
|
||||
import IconHelm from "@/icons/IconHelm.vue";
|
||||
import IconDiscover from "@/icons/IconDiscover.vue";
|
||||
import type INavigationIcon from "../../interfaces/INavigationIcon";
|
||||
|
||||
const route = useRoute();
|
||||
@@ -30,13 +31,18 @@
|
||||
{
|
||||
title: "Requests",
|
||||
route: "/list/requests",
|
||||
icon: IconInbox
|
||||
icon: IconMailboxFull
|
||||
},
|
||||
{
|
||||
title: "Now Playing",
|
||||
route: "/list/now_playing",
|
||||
icon: IconNowPlaying
|
||||
},
|
||||
{
|
||||
title: "Discover",
|
||||
route: "/discover",
|
||||
icon: IconDiscover
|
||||
},
|
||||
{
|
||||
title: "Popular",
|
||||
route: "/list/popular",
|
||||
@@ -58,7 +64,7 @@
|
||||
title: "Torrents",
|
||||
route: "/torrents",
|
||||
requiresAuth: true,
|
||||
icon: IconBinoculars
|
||||
icon: IconHelm
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
|
||||
16
src/icons/IconCalendar.vue
Normal file
16
src/icons/IconCalendar.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
|
||||
<path d="M0 32h160v64h-160v-64z" />
|
||||
<path d="M288 32h192v64h-192v-64z" />
|
||||
<path d="M608 32h160v64h-160v-64z" />
|
||||
<path d="M192 0h64v224h-64v-224z" />
|
||||
<path d="M512 0h64v224h-64v-224z" />
|
||||
<path d="M288 128h192v64h-192v-64z" />
|
||||
<path
|
||||
d="M704 128h-96v64h96v512h-640v-512h96v-64h-96c-35.3 0-64 28.7-64 64v512c0 35.3 28.7 64 64 64h640c35.3 0 64-28.7 64-64v-512c0-35.3-28.7-64-64-64z"
|
||||
/>
|
||||
<path
|
||||
d="M128 304v320c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-320c0-8.8-7.2-16-16-16h-480c-8.8 0-16 7.2-16 16zM160 480h128v128h-128v-128zM448 480v128h-128v-128h128zM320 448v-128h128v128h-128zM480 608v-128h128v128h-128zM608 448h-128v-128h128v128zM288 320v128h-128v-128h128z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
13
src/icons/IconCompass.vue
Normal file
13
src/icons/IconCompass.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
|
||||
<path
|
||||
d="M737.8 234.5c-19.3-45.7-47-86.8-82.3-122-35.3-35.3-76.3-62.9-122-82.3-47.4-20-97.7-30.2-149.5-30.2s-102.1 10.2-149.5 30.2c-45.7 19.3-86.8 47-122 82.3-35.3 35.3-62.9 76.3-82.3 122-20 47.4-30.2 97.7-30.2 149.5s10.2 102.1 30.2 149.5c19.3 45.7 47 86.8 82.3 122 35.3 35.3 76.3 62.9 122 82.3 47.4 20 97.7 30.2 149.5 30.2s102.1-10.2 149.5-30.2c45.7-19.3 86.8-47 122-82.3 35.3-35.3 62.9-76.3 82.3-122 20-47.4 30.2-97.7 30.2-149.5s-10.2-102.1-30.2-149.5zM384 704c-176.4 0-320-143.6-320-320s143.6-320 320-320c176.4 0 320 143.6 320 320s-143.6 320-320 320z"
|
||||
/>
|
||||
<path
|
||||
d="M384 96c-76.9 0-149.3 30-203.6 84.4s-84.4 126.7-84.4 203.6 30 149.3 84.4 203.6c54.3 54.4 126.7 84.4 203.6 84.4s149.3-30 203.6-84.4c54.4-54.3 84.4-126.7 84.4-203.6s-30-149.3-84.4-203.6c-54.3-54.4-126.7-84.4-203.6-84.4zM384 640c-141.2 0-256-114.8-256-256s114.8-256 256-256c141.2 0 256 114.8 256 256s-114.8 256-256 256z"
|
||||
/>
|
||||
<path
|
||||
d="M520.8 225.7l-192 96c-3.1 1.5-5.6 4.1-7.2 7.2l-96 192c-3.1 6.2-1.9 13.6 3 18.5 3.1 3.1 7.2 4.7 11.3 4.7 2.4 0 4.9-0.6 7.2-1.7l192-96c3.1-1.5 5.6-4.1 7.2-7.2l96-192c3.1-6.2 1.9-13.6-3-18.5s-12.3-6.1-18.5-3zM340.4 363l64.6 64.6-129.2 64.6 64.6-129.2zM427.6 405l-64.6-64.6 129.2-64.6-64.6 129.2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
19
src/icons/IconDiscover.vue
Normal file
19
src/icons/IconDiscover.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M23.0562 7.3281C22.4531 5.9 21.5875 4.6156 20.4844 3.5156 19.3812 2.4125 18.1 1.55 16.6719 0.9438 15.1906 0.3187 13.6187 0 12 0S8.8094 0.3187 7.3281 0.9438C5.9 1.5469 4.6156 2.4125 3.5156 3.5156 2.4125 4.6188 1.55 5.9 0.9438 7.3281 0.3188 8.8094 0 10.3813 0 12s0.3188 3.1906 0.9438 4.6719c0.6031 1.4281 1.4687 2.7125 2.5718 3.8125C4.6188 21.5875 5.9 22.45 7.3281 23.0562 8.8094 23.6813 10.3813 24 12 24s3.1906-0.3187 4.6719-0.9438c1.4281-0.6031 2.7125-1.4687 3.8125-2.5718 1.1031-1.1032 1.9656-2.3844 2.5718-3.8125C23.6813 15.1906 24 13.6187 24 12s-0.3187-3.1906-0.9438-4.6719zM12 22C6.4875 22 2 17.5125 2 12S6.4875 2 12 2 22 6.4875 22 12 17.5125 22 12 22z"
|
||||
/>
|
||||
<path
|
||||
d="M12 3C9.5969 3 7.3344 3.9375 5.6375 5.6375S3 9.5969 3 12s0.9375 4.6656 2.6375 6.3625C7.3344 20.0625 9.5969 21 12 21s4.6656-0.9375 6.3625-2.6375C20.0625 16.6656 21 14.4031 21 12s-0.9375-4.6656-2.6375-6.3625C16.6656 3.9375 14.4031 3 12 3zM12 20c-4.4125 0-8-3.5875-8-8s3.5875-8 8-8 8 3.5875 8 8-3.5875 8-8 8z"
|
||||
/>
|
||||
<path
|
||||
d="M16.275 7.0531l-6 3c-0.0969 0.0469-0.175 0.1281-0.225 0.225l-3 6c-0.0969 0.1938-0.0594 0.425 0.0937 0.5782 0.0969 0.0968 0.2251 0.1468 0.3532 0.1468 0.075 0 0.1531-0.0187 0.225-0.0531l6-3c0.0969-0.0469 0.175-0.1281 0.225-0.225l3-6c0.0969-0.1938 0.0594-0.425-0.0938-0.5781C16.7 6.9937 16.4688 6.9563 16.275 7.0531zM10.6375 11.3438l2.0188 2.0187-4.0376 2.0187zM13.3625 12.6563l-2.0187-2.0188 4.0375-2.0187z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
6
src/icons/IconSpotlights.vue
Normal file
6
src/icons/IconSpotlights.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<!-- generated by icomoon.io - licensed Lindua icon -->
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
|
||||
<path d="M23.4406 17.9219c-0.1812-0.2375-0.4-0.4563-0.6562-0.6563l-7.2781-6.1562 4.4031-9.6969c0.2031-0.4437 0.0531-0.9687-0.35-1.2437-0.4031-0.2719-0.9469-0.2157-1.2844 0.1375l-6.9375 7.275-8.6906-7.3438c-0.3781-0.3187-0.9313-0.3156-1.3031 94e-4-0.3719 0.325-0.4532 0.8719-0.1875 1.2906l6.3718 10.0469-6.6874 7.0125c-0.1032 0.1031-0.1969 0.2125-0.2844 0.325C0.1938 19.4 0 19.9469 0 20.5c0 0.5532 0.1938 1.1 0.5594 1.5781 0.3094 0.4094 0.7407 0.7657 1.275 1.0625C2.8282 23.6938 4.1313 24 5.5001 24c1.3687 0 2.6718-0.3062 3.6687-0.8594 0.5344-0.2968 0.9625-0.6562 1.275-1.0625 0.1281-0.1687 0.2375-0.3499 0.3219-0.5343v0l1.2843-2.8282 1.3063 2.0625c0.0593 0.1032 0.1281 0.2032 0.2 0.3 0.3093 0.4094 0.7406 0.7657 1.275 1.0625C15.8281 22.6938 17.1313 23 18.5 23c1.3688 0 2.6719-0.3062 3.6688-0.8594 0.5343-0.2969 0.9625-0.6562 1.275-1.0625 0.3656-0.4781 0.5593-1.025 0.5593-1.5781s-0.1968-1.1-0.5625-1.5781zM9.9844 18.4313C9.75 18.2219 9.475 18.0312 9.1688 17.8594 8.1719 17.3063 6.8688 17 5.5 17c-0.1281 0-0.2562 31e-4-0.3812 94e-4l3.5125-3.6844 2.1406 3.375zM11.2656 15.6125 9.3438 12.5813l2.8343-2.975 1.3125 1.1093zM13.9188 9.7688l-1.05-0.8876 2.775-2.9125zM6.3438 5.9812 9.9562 9.0375 8.95 10.0938zM5.5 22C3.3969 22 2 21.0969 2 20.5c0-0.1375 0.075-0.2906 0.2125-0.4469v0l0.0719-0.075C2.7938 19.4844 3.9563 19 5.5 19 7.6031 19 9 19.9031 9 20.5c0 0.0594-0.0125 0.1188-0.0406 0.1813l-0.0156 0.0375C8.6656 21.2937 7.3594 22 5.5 22zM14.6469 13.0031 18.2 16.0062c-1.2563 0.0407-2.4438 0.3407-3.3656 0.8532-0.4282 0.2375-0.7875 0.5125-1.0719 0.8219l-0.7219-1.1375zM18.5 21c-1.7094 0-2.9531-0.5969-3.3594-1.1406l-0.0781-0.1219c-0.0437-0.0813-0.0656-0.1625-0.0656-0.2375 0-0.5969 1.3969-1.5 3.5-1.5s3.5 0.9031 3.5 1.5S20.6031 21 18.5 21z" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/icons/IconStar.vue
Normal file
7
src/icons/IconStar.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
|
||||
<path
|
||||
d="M767 312c-3.1-12-12.8-21.1-25-23.4l-231.1-44.3-97.5-225c-5.1-11.7-16.6-19.3-29.4-19.3s-24.3 7.6-29.4 19.3l-97.5 225-231.1 44.3c-12.2 2.3-21.9 11.4-25 23.4s1 24.7 10.5 32.6l176.6 147.1-59.1 236.5c-3.1 12.4 1.5 25.5 11.7 33.3 10.2 7.7 24.1 8.6 35.2 2.3l208.1-118.9 208.1 118.9c4.9 2.8 10.4 4.2 15.9 4.2 6.8 0 13.6-2.2 19.3-6.5 10.2-7.7 14.8-20.8 11.7-33.3l-59.1-236.5 176.6-147.1c9.5-7.9 13.6-20.6 10.5-32.6zM523.5 455.4c-9.4 7.9-13.5 20.4-10.6 32.3l45.9 183.3-158.9-90.8c-4.9-2.8-10.4-4.2-15.9-4.2s-11 1.4-15.9 4.2l-158.9 90.8 45.8-183.2c3-11.9-1.1-24.5-10.6-32.3l-140-116.8 181.3-34.8c10.4-2 19.1-9 23.3-18.7l75-172.7 74.9 172.8c4.2 9.7 12.9 16.7 23.3 18.7l181.3 34.8-140 116.6z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
10
src/icons/IconTheater.vue
Normal file
10
src/icons/IconTheater.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<!-- generated by icomoon.io - licensed Lindua icon -->
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
|
||||
<path d="M22.6031 5.2031c-0.25-0.1875-0.575-0.25-0.8781-0.1625-2.8625 0.8188-5.3187 1.1125-7.8875 0.8875 0.0969-1.0625 0.15-2.2062 0.1625-3.4187 31e-4-0.1625-0.075-0.3156-0.2063-0.4094-0.1312-0.0937-0.3-0.1219-0.4531-0.0687-3.875 1.2906-7.8062 1.2906-11.6843 0-0.1532-0.05-0.3219-0.025-0.4532 0.0687C1.0719 2.1937 0.9969 2.3438 1 2.5062c0.0469 4.4063 0.6375 7.8 1.7594 10.0875 0.5594 1.1407 1.2531 2.0094 2.0625 2.5782C5.6031 15.7219 6.5063 16 7.5 16c0.5313 0 1.0375-0.0813 1.5125-0.2375 0.2344 0.8531 0.5125 1.6156 0.8344 2.2906 0.6219 1.3156 1.425 2.3156 2.3844 2.975C13.1719 21.6719 14.2719 22 15.5 22s2.3281-0.3281 3.2688-0.9719c0.9593-0.6594 1.7625-1.6594 2.3843-2.975C22.3969 15.4312 23 11.4875 23 6c0-0.3125-0.1469-0.6094-0.3969-0.7969zM7.5 15c-0.7844 0-1.4937-0.2187-2.1031-0.6469-0.6719-0.4718-1.2563-1.2125-1.7406-2.2-0.9969-2.0344-1.5469-5.0468-1.6438-8.9656C3.8375 3.725 5.6781 4 7.5 4s3.6625-0.275 5.4875-0.8156c-0.0219 0.9219-0.0719 1.8-0.1437 2.625-1.1407-0.1563-2.3157-0.4156-3.5688-0.7719C8.9719 4.95 8.65 5.0125 8.3969 5.2 8.1469 5.3875 8 5.6844 8 5.9969 8 7.4656 8.0438 8.825 8.1312 10.0781 7.9313 10.025 7.7187 9.9969 7.5 9.9969c-1.3781 0-2.5 1.1219-2.5 2.5 0 0.275 0.225 0.5 0.5 0.5h2.9406c0.0938 0.6312 0.2032 1.225 0.3281 1.7875C8.375 14.9281 7.95 15 7.5 15zM8.3094 12H6.0875c0.2062-0.5812 0.7625-1 1.4156-1 0.2625 0 0.5063 0.0687 0.7219 0.1844 0.0219 0.2781 0.0531 0.55 0.0844 0.8156zM19.3469 17.1969C18.4406 19.1094 17.2188 20 15.5 20c-1.7187 0-2.9406-0.8906-3.8469-2.8031-1.0031-2.1157-1.5531-5.4407-1.6406-9.8938C11.9656 7.775 13.7375 8 15.5 8s3.5344-0.225 5.4875-0.6969c-0.0875 4.4532-0.6406 7.7782-1.6406 9.8938z" />
|
||||
<path d="M17.5 15h-4c-0.275 0-0.5 0.225-0.5 0.5 0 1.3781 1.1219 2.5 2.5 2.5s2.5-1.1219 2.5-2.5c0-0.275-0.225-0.5-0.5-0.5zM15.5 17c-0.6531 0-1.2094-0.4188-1.4156-1h2.8281c-0.2031 0.5812-0.7594 1-1.4125 1z" />
|
||||
<path d="M14.5 12.2062 15.2063 11.5l-1.3532-1.3531c-0.1937-0.1938-0.5125-0.1938-0.7062 0L11.7938 11.5 12.5 12.2062l1-1z" />
|
||||
<path d="M17.5 11.2062l1 1 0.7063-0.7062-1.3532-1.3531c-0.1937-0.1938-0.5125-0.1938-0.7062 0L15.7938 11.5 16.5 12.2062z" />
|
||||
<path d="M5.5 8c0.1281 0 0.2563-0.05 0.3531-0.1469L7.2063 6.5 6.5 5.7938l-1 1-1-1L3.7938 6.5 5.1469 7.8531C5.2437 7.95 5.3719 8 5.5 8z" />
|
||||
</svg>
|
||||
</template>
|
||||
@@ -3,4 +3,5 @@ import type { IList } from "./IList";
|
||||
export default interface ISection {
|
||||
title: string;
|
||||
apiFunction: (page: number) => Promise<IList>;
|
||||
sectionType?: "list" | "discover";
|
||||
}
|
||||
|
||||
514
src/pages/DiscoverPage.vue
Normal file
514
src/pages/DiscoverPage.vue
Normal file
@@ -0,0 +1,514 @@
|
||||
<template>
|
||||
<section class="discover-page">
|
||||
<div class="hero-section">
|
||||
<div class="hero-collage">
|
||||
<div
|
||||
v-for="(poster, index) in heroPosters"
|
||||
:key="index"
|
||||
class="poster-tile"
|
||||
:style="{ backgroundImage: `url(${poster})` }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="hero-content-wrapper">
|
||||
<div class="discover-header">
|
||||
<h1>Discover Movies</h1>
|
||||
<p class="discover-subtitle">
|
||||
Explore curated collections across genres, eras, and moods
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<DiscoverShowcase
|
||||
:active-category="activeCategory"
|
||||
@select="updateCategory"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="discover-content">
|
||||
<ResultsSection
|
||||
v-for="list in activeLists"
|
||||
:key="list.id"
|
||||
:api-function="list.apiFunction"
|
||||
:title="list.title"
|
||||
:short-list="true"
|
||||
section-type="discover"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import ResultsSection from "@/components/ResultsSection.vue";
|
||||
import DiscoverShowcase from "@/components/DiscoverShowcase.vue";
|
||||
import { getTmdbMovieDiscoverByName } from "../api";
|
||||
import type { Ref } from "vue";
|
||||
|
||||
interface DiscoverList {
|
||||
id: string;
|
||||
title: string;
|
||||
apiFunction: (page: number) => Promise<any>;
|
||||
category: string;
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const activeCategory: Ref<string> = ref(
|
||||
(route.query.category as string) || "popular"
|
||||
);
|
||||
const heroPosters: Ref<string[]> = ref([]);
|
||||
|
||||
// Update URL when category changes
|
||||
function updateCategory(categoryId: string) {
|
||||
activeCategory.value = categoryId;
|
||||
router.push({ query: { category: categoryId } });
|
||||
}
|
||||
|
||||
// Watch for query parameter changes (e.g., browser back/forward)
|
||||
watch(
|
||||
() => route.query.category,
|
||||
newCategory => {
|
||||
if (newCategory && newCategory !== activeCategory.value) {
|
||||
activeCategory.value = newCategory as string;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Fetch popular movies for hero collage
|
||||
onMounted(async () => {
|
||||
// Scroll to top when component mounts - Safari compatible
|
||||
// Use requestAnimationFrame to ensure it runs after render
|
||||
requestAnimationFrame(() => {
|
||||
return;
|
||||
window.scrollTo(0, 0);
|
||||
// Also try scrolling the body element for Safari compatibility
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await getTmdbMovieDiscoverByName("recent_releases");
|
||||
const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
|
||||
|
||||
// Take first 12 movies and shuffle them for variety
|
||||
const posters = response.results
|
||||
.slice(0, 12)
|
||||
.map((movie: any) =>
|
||||
movie.poster ? IMAGE_BASE_URL + movie.poster : null
|
||||
)
|
||||
.filter((poster: string | null) => poster !== null);
|
||||
|
||||
heroPosters.value = posters;
|
||||
} catch (error) {
|
||||
console.error("Failed to load hero posters:", error);
|
||||
}
|
||||
});
|
||||
|
||||
const discoverLists: DiscoverList[] = [
|
||||
// Popular
|
||||
{
|
||||
id: "popular_now",
|
||||
title: "Popular Now",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("popular_now"),
|
||||
category: "popular"
|
||||
},
|
||||
{
|
||||
id: "top_rated",
|
||||
title: "Top Rated",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("top_rated"),
|
||||
category: "popular"
|
||||
},
|
||||
{
|
||||
id: "critics_choice",
|
||||
title: "Critics' Choice",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("critics_choice"),
|
||||
category: "popular"
|
||||
},
|
||||
{
|
||||
id: "recent_releases",
|
||||
title: "Recent Releases",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("recent_releases"),
|
||||
category: "popular"
|
||||
},
|
||||
{
|
||||
id: "crowd_pleasers",
|
||||
title: "Crowd Pleasers",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("crowd_pleasers"),
|
||||
category: "popular"
|
||||
},
|
||||
|
||||
// Genres
|
||||
{
|
||||
id: "action_packed",
|
||||
title: "Action Packed",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("action_packed"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "sci_fi_wonders",
|
||||
title: "Sci-Fi Wonders",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("sci_fi_wonders"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "horror_hits",
|
||||
title: "Horror Hits",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("horror_hits"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "romantic_favorites",
|
||||
title: "Romantic Favorites",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("romantic_favorites"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "laugh_out_loud",
|
||||
title: "Laugh Out Loud",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("laugh_out_loud"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "animated_magic",
|
||||
title: "Animated Magic",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("animated_magic"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "fantasy_worlds",
|
||||
title: "Fantasy Worlds",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("fantasy_worlds"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "thriller_edge",
|
||||
title: "Thriller's Edge",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("thriller_edge"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "crime_dramas",
|
||||
title: "Crime Dramas",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("crime_dramas"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "westerns",
|
||||
title: "Westerns",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("westerns"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "war_epics",
|
||||
title: "War Epics",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("war_epics"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "dark_comedy",
|
||||
title: "Dark Comedy",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("dark_comedy"),
|
||||
category: "genres"
|
||||
},
|
||||
{
|
||||
id: "musical_magic",
|
||||
title: "Musical Magic",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("musical_magic"),
|
||||
category: "genres"
|
||||
},
|
||||
|
||||
// Moods & Themes
|
||||
{
|
||||
id: "feel_good",
|
||||
title: "Feel Good",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("feel_good"),
|
||||
category: "moods"
|
||||
},
|
||||
{
|
||||
id: "mind_benders",
|
||||
title: "Mind Benders",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("mind_benders"),
|
||||
category: "moods"
|
||||
},
|
||||
{
|
||||
id: "epic_movies",
|
||||
title: "Epic Movies",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("epic_movies"),
|
||||
category: "moods"
|
||||
},
|
||||
{
|
||||
id: "quick_picks",
|
||||
title: "Quick Picks",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("quick_picks"),
|
||||
category: "moods"
|
||||
},
|
||||
{
|
||||
id: "family_night",
|
||||
title: "Family Night",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("family_night"),
|
||||
category: "moods"
|
||||
},
|
||||
{
|
||||
id: "true_stories",
|
||||
title: "True Stories",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("true_stories"),
|
||||
category: "moods"
|
||||
},
|
||||
{
|
||||
id: "coming_of_age",
|
||||
title: "Coming of Age",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("coming_of_age"),
|
||||
category: "moods"
|
||||
},
|
||||
|
||||
// Decades
|
||||
{
|
||||
id: "golden_age",
|
||||
title: "Golden Age",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("golden_age"),
|
||||
category: "decades"
|
||||
},
|
||||
{
|
||||
id: "90s_nostalgia",
|
||||
title: "90s Nostalgia",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("90s_nostalgia"),
|
||||
category: "decades"
|
||||
},
|
||||
{
|
||||
id: "2000s_classics",
|
||||
title: "2000s Classics",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("2000s_classics"),
|
||||
category: "decades"
|
||||
},
|
||||
{
|
||||
id: "2010s_best",
|
||||
title: "2010s Best",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("2010s_best"),
|
||||
category: "decades"
|
||||
},
|
||||
|
||||
// Special Collections
|
||||
{
|
||||
id: "blockbusters",
|
||||
title: "Blockbusters",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("blockbusters"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "hidden_gems",
|
||||
title: "Hidden Gems",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("hidden_gems"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "modern_classics",
|
||||
title: "Modern Classics",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("modern_classics"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "indie_darlings",
|
||||
title: "Indie Darlings",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("indie_darlings"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "international_cinema",
|
||||
title: "International Cinema",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("international_cinema"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "oscar_winners",
|
||||
title: "Oscar Winners",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("oscar_winners"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "space_odyssey",
|
||||
title: "Space Odyssey",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("space_odyssey"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "superhero_saga",
|
||||
title: "Superhero Saga",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("superhero_saga"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "heist_films",
|
||||
title: "Heist Films",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("heist_films"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "zombies_apocalypse",
|
||||
title: "Zombies & Apocalypse",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("zombies_apocalypse"),
|
||||
category: "special"
|
||||
},
|
||||
{
|
||||
id: "time_travel",
|
||||
title: "Time Travel",
|
||||
apiFunction: () => getTmdbMovieDiscoverByName("time_travel"),
|
||||
category: "special"
|
||||
}
|
||||
];
|
||||
|
||||
const activeLists = computed(() => {
|
||||
return discoverLists.filter(list => list.category === activeCategory.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.discover-page {
|
||||
background-color: var(--background-color);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
|
||||
@include mobile {
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-content-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.discover-header {
|
||||
padding: 4rem 1.5rem 2rem;
|
||||
text-align: center;
|
||||
|
||||
@include mobile {
|
||||
padding: 3rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 3px 15px rgba(0, 0, 0, 0.8),
|
||||
0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
@include mobile {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.discover-subtitle {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-weight: 300;
|
||||
text-shadow:
|
||||
0 2px 10px rgba(0, 0, 0, 0.8),
|
||||
0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
|
||||
@include mobile {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-collage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
opacity: 0.4;
|
||||
filter: blur(0px);
|
||||
|
||||
@include mobile {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-tile {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 6px;
|
||||
animation: fadeIn 0.8s ease-in-out;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
|
||||
&:nth-child(even) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(var(--background-color-rgb, 18, 18, 18), 0.6) 0%,
|
||||
rgba(var(--background-color-rgb, 18, 18, 18), 0.7) 50%,
|
||||
rgba(var(--background-color-rgb, 18, 18, 18), 0.6) 100%
|
||||
);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
|
||||
.discover-content {
|
||||
padding: 0;
|
||||
background-color: var(--background-color);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,38 +2,40 @@
|
||||
<section>
|
||||
<LandingBanner />
|
||||
|
||||
<div v-for="list in lists" :key="list.title">
|
||||
<ResultsSection
|
||||
:api-function="list.apiFunction"
|
||||
:title="list.title"
|
||||
:short-list="true"
|
||||
/>
|
||||
</div>
|
||||
<ResultsSection
|
||||
:api-function="getRequests"
|
||||
title="Requests"
|
||||
:short-list="true"
|
||||
/>
|
||||
|
||||
<ResultsSection
|
||||
:api-function="() => getTmdbMovieListByName('now_playing')"
|
||||
title="Now playing"
|
||||
:short-list="true"
|
||||
section-type="list"
|
||||
/>
|
||||
|
||||
<DiscoverMinimal />
|
||||
|
||||
<ResultsSection
|
||||
:api-function="() => getTmdbMovieListByName('upcoming')"
|
||||
title="Upcoming"
|
||||
:short-list="true"
|
||||
section-type="list"
|
||||
/>
|
||||
|
||||
<ResultsSection
|
||||
:api-function="() => getTmdbMovieListByName('popular')"
|
||||
title="Popular"
|
||||
:short-list="true"
|
||||
section-type="list"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LandingBanner from "@/components/LandingBanner.vue";
|
||||
import ResultsSection from "@/components/ResultsSection.vue";
|
||||
import DiscoverMinimal from "@/components/DiscoverMinimal.vue";
|
||||
import { getRequests, getTmdbMovieListByName } from "../api";
|
||||
import type ISection from "../interfaces/ISection";
|
||||
|
||||
const lists: ISection[] = [
|
||||
{
|
||||
title: "Requests",
|
||||
apiFunction: getRequests
|
||||
},
|
||||
{
|
||||
title: "Now playing",
|
||||
apiFunction: () => getTmdbMovieListByName("now_playing")
|
||||
},
|
||||
{
|
||||
title: "Upcoming",
|
||||
apiFunction: () => getTmdbMovieListByName("upcoming")
|
||||
},
|
||||
{
|
||||
title: "Popular",
|
||||
apiFunction: () => getTmdbMovieListByName("popular")
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<ResultsSection :title="listName" :api-function="_getTmdbMovieListByName" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import ResultsSection from "@/components/ResultsSection.vue";
|
||||
import { getTmdbMovieListByName } from "../api";
|
||||
|
||||
const route = useRoute();
|
||||
const listName: Ref<string | string[]> = ref(
|
||||
route?.params?.name || "List page"
|
||||
);
|
||||
|
||||
function _getTmdbMovieListByName(page: number) {
|
||||
return getTmdbMovieListByName(listName.value?.toString(), page);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullwidth-button {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
40
src/pages/SectionPage.vue
Normal file
40
src/pages/SectionPage.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<ResultsSection :title="sectionName" :api-function="_getSectionData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import ResultsSection from "@/components/ResultsSection.vue";
|
||||
import { getTmdbMovieListByName, getTmdbMovieDiscoverByName } from "../api";
|
||||
|
||||
const route = useRoute();
|
||||
const sectionName: Ref<string | string[]> = ref(
|
||||
route?.params?.name || "Section page"
|
||||
);
|
||||
|
||||
// Determine if this is a discover section or a list based on the route path
|
||||
const isDiscoverSection = route.path.startsWith("/discover/");
|
||||
|
||||
function _getSectionData(page: number) {
|
||||
const name = sectionName.value?.toString();
|
||||
|
||||
// Use the appropriate API function based on the route type
|
||||
if (isDiscoverSection) {
|
||||
return getTmdbMovieDiscoverByName(name, page);
|
||||
} else {
|
||||
return getTmdbMovieListByName(name, page);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullwidth-button {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -39,7 +39,17 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
name: "list",
|
||||
path: "/list/:name",
|
||||
component: () => import("./pages/ListPage.vue")
|
||||
component: () => import("./pages/SectionPage.vue")
|
||||
},
|
||||
{
|
||||
name: "discover-section",
|
||||
path: "/discover/:name",
|
||||
component: () => import("./pages/SectionPage.vue")
|
||||
},
|
||||
{
|
||||
name: "discover",
|
||||
path: "/discover",
|
||||
component: () => import("./pages/DiscoverPage.vue")
|
||||
},
|
||||
{
|
||||
name: "search",
|
||||
@@ -104,7 +114,13 @@ const router = createRouter({
|
||||
history: createWebHistory("/"),
|
||||
// base: "/",
|
||||
routes,
|
||||
linkActiveClass: "is-active"
|
||||
linkActiveClass: "is-active",
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (to.name !== "discover") return;
|
||||
|
||||
console.log("scrolling top");
|
||||
return { top: 0 };
|
||||
}
|
||||
});
|
||||
|
||||
const loggedIn = () => store.getters["user/loggedIn"];
|
||||
|
||||
Reference in New Issue
Block a user