206 lines
3.4 KiB
Vue
206 lines
3.4 KiB
Vue
<template>
|
|
<div class="networks">
|
|
<div class="content-inner">
|
|
<SearchBar
|
|
:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
|
|
:eager="true"
|
|
/>
|
|
|
|
<span
|
|
v-if="done && entities.length === 0"
|
|
class="empty"
|
|
>No results for "{{ $route.query.query }}"</span>
|
|
|
|
<template v-else>
|
|
<h2 class="heading">Popular</h2>
|
|
|
|
<div
|
|
class="entity-tiles"
|
|
>
|
|
<Entity
|
|
v-for="entity in popularEntities"
|
|
:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
|
|
:entity="entity"
|
|
/>
|
|
</div>
|
|
|
|
<h2 class="heading">All networks</h2>
|
|
|
|
<div
|
|
class="entity-tiles"
|
|
>
|
|
<Entity
|
|
v-for="entity in entities"
|
|
:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
|
|
:entity="entity"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Entity from '../entities/tile.vue';
|
|
import SearchBar from '../search/bar.vue';
|
|
|
|
async function fetchEntities() {
|
|
if (this.$route.query.query) {
|
|
await this.searchEntities();
|
|
return;
|
|
}
|
|
|
|
this.done = false;
|
|
|
|
this.entities = await this.$store.dispatch('fetchEntities', {
|
|
type: 'network',
|
|
entitySlugs: [],
|
|
});
|
|
|
|
this.done = true;
|
|
}
|
|
|
|
async function searchEntities() {
|
|
this.done = false;
|
|
|
|
this.entities = await this.$store.dispatch('searchEntities', {
|
|
query: this.$route.query.query,
|
|
limit: 20,
|
|
});
|
|
|
|
this.done = true;
|
|
}
|
|
|
|
function popularEntities() {
|
|
const entitiesBySlug = Object.fromEntries(this.entities.map((entity) => [entity.slug, entity]));
|
|
|
|
return [
|
|
'21sextury',
|
|
'adulttime',
|
|
'amateurallure',
|
|
'analvids',
|
|
'bamvisions',
|
|
'bang',
|
|
'bangbros',
|
|
'blowpass',
|
|
'brazzers',
|
|
'burningangel',
|
|
'digitalplayground',
|
|
'dogfartnetwork',
|
|
'dorcel',
|
|
'elegantangel',
|
|
'evilangel',
|
|
'fakehub',
|
|
'girlsway',
|
|
'hookuphotshot',
|
|
'hussiepass',
|
|
'insex',
|
|
'julesjordan',
|
|
'kellymadison',
|
|
'kink',
|
|
'mofos',
|
|
'naughtyamerica',
|
|
'newsensations',
|
|
'pervcity',
|
|
'pornpros',
|
|
'private',
|
|
'realitykings',
|
|
'teamskeet',
|
|
'twistys',
|
|
'vixen',
|
|
'xempire',
|
|
].map((slug) => entitiesBySlug[slug]).filter(Boolean);
|
|
}
|
|
|
|
async function mounted() {
|
|
this.pageTitle = 'Channels';
|
|
|
|
await this.fetchEntities();
|
|
}
|
|
|
|
function channelCount() {
|
|
return this.entities.reduce((acc, entity) => acc + entity.childrenTotal, 0);
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
Entity,
|
|
SearchBar,
|
|
},
|
|
data() {
|
|
return {
|
|
done: false,
|
|
pageTitle: null,
|
|
entities: [],
|
|
};
|
|
},
|
|
computed: {
|
|
channelCount,
|
|
popularEntities,
|
|
},
|
|
watch: {
|
|
$route: fetchEntities,
|
|
},
|
|
mounted,
|
|
methods: {
|
|
fetchEntities,
|
|
searchEntities,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'theme';
|
|
|
|
.networks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.content-inner {
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.search {
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
|
|
.entity-tiles {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
|
|
grid-gap: .5rem;
|
|
padding: 1rem 0;
|
|
|
|
.tile {
|
|
height: 6rem;
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
display: block;
|
|
margin: 1rem 0;
|
|
color: var(--shadow);
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.heading {
|
|
margin: 1rem 0 0 0;
|
|
}
|
|
|
|
@media(max-width: $breakpoint2) {
|
|
.entity-tiles {
|
|
grid-gap: .5rem;
|
|
}
|
|
}
|
|
|
|
@media(max-width: $breakpoint0) {
|
|
.entity-tiles {
|
|
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
}
|
|
}
|
|
</style>
|