mirror of
https://github.com/Arrowar/StreamingCommunity.git
synced 2025-06-07 12:05:35 +00:00
92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import axios from 'axios';
|
|
import type {MediaItem} from "@/api/interfaces";
|
|
import {useRouter} from "vue-router";
|
|
import router from "@/router";
|
|
|
|
const props = defineProps<{
|
|
item: MediaItem;
|
|
mediaType: string;
|
|
}>();
|
|
|
|
const imageUrl = ref('');
|
|
const movieApiUrl = 'https://api.themoviedb.org/3/search/movie?api_key=15d2ea6d0dc1d476efbca3eba2b9bbfb&query=';
|
|
const animeApiUrl = 'https://kitsu.io/api/edge/anime?filter[text]=';
|
|
|
|
const navigateToDetails = () => {
|
|
router.push({ name: 'details', params: { item: JSON.stringify(props.item), imageUrl: imageUrl.value } });
|
|
};
|
|
|
|
onMounted(async () => {
|
|
imageUrl.value = "https://eapp.org/wp-content/uploads/2018/05/poster_placeholder.jpg";
|
|
if (props.item.images && props.item.images.length > 0) {
|
|
for (const image of props.item.images) {
|
|
if (image.type === "poster") {
|
|
imageUrl.value = "https://cdn.streamingcommunity.marketing/images/" + image.filename;
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
if (props.mediaType == "film") {
|
|
try {
|
|
const response = await axios.get(movieApiUrl + props.item.name);
|
|
if (response.data.results.length === 0) {
|
|
return;
|
|
}
|
|
imageUrl.value = "http://image.tmdb.org/t/p/w500/" + response.data.results[0].poster_path;
|
|
} catch (error) {
|
|
console.error('Error fetching movie image:', error);
|
|
}
|
|
} else {
|
|
try {
|
|
const response = await axios.get(animeApiUrl + props.item.name);
|
|
if (response.data.data && response.data.data.length === 0) {
|
|
return;
|
|
}
|
|
imageUrl.value = response.data.data[0].attributes.posterImage.small;
|
|
} catch (error) {
|
|
console.error('Error fetching anime image:', error);
|
|
}
|
|
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card" @click="navigateToDetails">
|
|
<img :src="imageUrl" :alt="item.name" class="card-image" />
|
|
<div class="card-title">
|
|
{{ item.name.slice(0, 25) + (item.name.length > 24 ? '...' : '') }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background-color: #313131;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-2px) scale(1.02);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.card-image {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.card-title {
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
</style> |