Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-23 14:03:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

move the search results into a ContentItem component

Browse Source
This commit is contained in:
Bnyro 2022-11-01 11:32:53 +01:00
parent 3620a9ad5c
commit 8006f3a199
2 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ContentItem.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<VideoItem v-if="shouldUseVideoItem(contentItem)" :video="contentItem" height="94" width="168" />
<div v-else>
<router-link :to="contentItem.url">
<div class="relative">
<img class="w-full" :src="contentItem.thumbnail" loading="lazy" />
</div>
<p>
<span v-text="contentItem.name" />
<font-awesome-icon class="ml-1.5" v-if="contentItem.verified" icon="check" />
</p>
</router-link>
<p v-if="contentItem.description" v-text="contentItem.description" />
<router-link v-if="contentItem.uploaderUrl" class="link" :to="contentItem.uploaderUrl">
<p>
<span v-text="contentItem.uploader" />
<font-awesome-icon class="ml-1.5" v-if="contentItem.uploaderVerified" icon="check" />
</p>
</router-link>
<a v-if="contentItem.uploaderName" class="link" v-text="contentItem.uploaderName" />
<template v-if="contentItem.videos >= 0">
<br v-if="contentItem.uploaderName" />
<strong v-text="`${contentItem.videos} ${$t('video.videos')}`" />
</template>
<br />
</div>
</template>
<script>
import VideoItem from "./VideoItem.vue";
export default {
components: {
VideoItem,
},
props: {
contentItem: {
type: Object,
default: () => {
return {};
},
},
},
methods: {
shouldUseVideoItem(item) {
return item.title;
},
},
};
</script>

35
src/components/SearchResults.vue
View File

@ -20,43 +20,17 @@
<div v-if="results" class="video-grid">
<template v-for="result in results.items" :key="result.url">
<VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
<div v-if="!shouldUseVideoItem(result)">
<router-link :to="result.url">
<div class="relative">
<img class="w-full" :src="result.thumbnail" loading="lazy" />
</div>
<p>
<span v-text="result.name" />
<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check" />
</p>
</router-link>
<p v-if="result.description" v-text="result.description" />
<router-link v-if="result.uploaderUrl" class="link" :to="result.uploaderUrl">
<p>
<span v-text="result.uploader" />
<font-awesome-icon class="ml-1.5" v-if="result.uploaderVerified" icon="check" />
</p>
</router-link>
<a v-if="result.uploaderName" class="link" v-text="result.uploaderName" />
<template v-if="result.videos >= 0">
<br v-if="result.uploaderName" />
<strong v-text="`${result.videos} ${$t('video.videos')}`" />
</template>
<br />
</div>
<ContentItem :content-item="result" />
</template>
</div>
</template>
<script>
import VideoItem from "./VideoItem.vue";
import ContentItem from "./ContentItem.vue";
export default {
components: {
VideoItem,
ContentItem,
},
data() {
return {
@ -124,9 +98,6 @@ export default {
});
}
},
shouldUseVideoItem(item) {
return item.title;
},
handleRedirect() {
const query = this.$route.query.search_query;
const url =