traxxx/assets/components/release/release.vue

<template>
    <div
        v-if="release"
        class="content"
    >
        <Banner :release="release" />

        <h2 class="row title">{{ release.title }}</h2>

        <ul class="row actors">
            <Icon icon="star" />

            <li
                v-for="actor in release.actors"
                :key="actor.id"
                class="actor"
            >
                <a
                    :href="`/actor/${actor.slug}`"
                    class="actor-link"
                >{{ actor.name }}</a>
            </li>
        </ul>

        <span
            v-if="release.date"
            class="row"
        >
            <Icon icon="calendar2" />

            <a
                :href="release.url"
                :title="`Released on ${formatDate(release.date, 'MMMM D, YYYY')}`"
                target="_blank"
                rel="noopener noreferrer"
                class="date date-link"
            >{{ formatDate(release.date, 'MMMM D, YYYY') }}</a>
        </span>

        <span class="row site">
            <Icon icon="clapboard-play" />

            <template v-if="release.studio">
                <a
                    v-if="release.studio"
                    :href="release.studio.url"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="site-link"
                >{{ release.studio.name }}</a>,
            </template>

            <a
                :href="`/network/${release.network.slug}`"
                class="network-link"
            >{{ release.network.name }}:</a>

            <a
                :href="`/site/${release.site.slug}`"
                class="site-link"
            >{{ release.site.name }}</a>
        </span>

        <p
            v-if="release.duration"
            class="row duration"
        >
            <Icon icon="stopwatch" />

            <span
                v-if="release.duration >= 3600"
                class="duration-segment"
            >{{ Math.floor(release.duration / 3600) }}:</span>
            <span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
            <span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
        </p>

        <p
            v-if="release.description"
            class="row description"
        >
            <Icon icon="info2" />
            {{ release.description }}
        </p>

        <ul
            v-if="release.tags.length > 0"
            class="row tags"
        >
            <Icon icon="price-tags" />

            <li
                v-for="tag in release.tags"
                :key="`tag-${tag.slug}`"
                class="tag"
            >
                <a
                    :href="`/tag/${tag.slug}`"
                    class="tag-link"
                >{{ tag.name }}</a>
            </li>
        </ul>

        <span class="row">
            <Icon icon="drawer-in" />

            <a
                :href="`/added/${formatDate(release.dateAdded, 'YYYY-MM-DD')}`"
                :title="`Added on ${formatDate(release.dateAdded, 'MMMM D, YYYY')}`"
                target="_blank"
                rel="noopener noreferrer"
                class="date date-link"
            >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
        </span>
    </div>
</template>

<script>
import Banner from './banner.vue';

function pageTitle() {
    return this.release && this.release.title;
}

async function mounted() {
    [this.release] = await this.$store.dispatch('fetchReleases', { id: this.$route.params.releaseId });
}

export default {
    components: {
        Banner,
    },
    data() {
        return {
            release: null,
        };
    },
    computed: {
        pageTitle,
    },
    mounted,
};
</script>

<style lang="scss" scoped>
@import 'theme';
.row {
    display: block;
    padding: 0 1rem;
    margin: 0 0 .5rem 0;

    .icon {
        width: 1rem;
        fill: $shadow-strong;
        margin: 0 .5rem 0 0;
    }
}

.actors,
.tags {
    list-style: none;
}

.actor,
.tag {
    display: inline-block;
    text-transform: capitalize;

    &:not(:last-child)::after {
        content: ',';
        display: inline-block;
        width: .6rem;
    }
}

.duration {
    font-size: 0;
}

.duration-segment {
    font-size: 1rem;
}

.date-link,
.site-link,
.network-link,
.actor-link,
.tag-link {
    color: $link;
    text-decoration: none;

    &:hover {
        color: $primary;
    }
}
</style>