traxxx/assets/components/releases/release.vue

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

        <div class="details">
            <div class="column">
                <a
                    v-if="release.date"
                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
                    :title="release.url && `View scene on ${release.site.name}`"
                    :href="release.url"
                    :class="{ link: release.url }"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="tidbit date"
                >
                    <Icon
                        v-if="isAfter(new Date(), release.date)"
                        icon="calendar2"
                    />

                    <Icon
                        v-else
                        v-tooltip.bottom="'To be released'"
                        icon="sun3"
                    />

                    <span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
                    <span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
                </a>

                <span
                    v-if="release.shootId"
                    v-tooltip.bottom="`Shoot #`"
                    class="tidbit shoot hideable"
                >
                    <Icon icon="clapboard-play" />
                    {{ release.shootId }}
                </span>

                <span
                    v-if="release.duration"
                    v-tooltip.bottom="`Duration`"
                    class="tidbit duration hideable"
                >
                    <Icon icon="stopwatch" />

                    <span
                        v-if="release.duration >= 3600"
                        class="duration-segment"
                    >{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</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>
                </span>

                <span class="tidbit site">
                    <a
                        v-if="release.site.independent"
                        :href="`/network/${release.network.slug}`"
                    >
                        <img
                            :src="`/img/logos/${release.network.slug}/network.png`"
                            :title="release.network.name"
                            class="logo logo-site"
                        >
                    </a>

                    <template v-else>
                        <a :href="`/network/${release.network.slug}`">
                            <img
                                :src="`/img/logos/${release.network.slug}/network.png`"
                                :title="release.network.name"
                                :alt="release.network.name"
                                class="logo logo-network"
                            >
                        </a>

                        <span class="chain">presents</span>

                        <a
                            :href="`/site/${release.site.slug}`"
                        >
                            <img
                                :src="`/img/logos/${release.network.slug}/${release.site.slug}.png`"
                                :title="release.site.name"
                                class="logo logo-site"
                            >
                        </a>
                    </template>

                </span>
            </div>
        </div>

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

            <div class="row">
                <ul class="actors nolist">
                    <li
                        v-for="actor in release.actors"
                        :key="actor.id"
                    >
                        <Actor :actor="actor" />
                    </li>
                </ul>
            </div>

            <div v-if="release.scenes && release.scenes.length > 0">
                <h3>Scenes</h3>

                <Releases
                    v-if="release.scenes && release.scenes.length > 0"
                    :releases="release.scenes"
                    class="row"
                />
            </div>

            <div v-if="release.movie">
                <h3>Movie</h3>

                <Release :release="release.movie" />
            </div>

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

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

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

                <span
                    v-if="release.duration >= 3600"
                    class="duration-segment"
                >{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</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>
            </div>

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

            <div
                v-if="release.studio"
                class="row"
            >
                <Icon icon="video-camera2" />

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

            <div
                v-if="release.shootId"
                class="row showable"
            >
                <Icon icon="clapboard-play" />

                <a
                    :href="release.url"
                    :title="`release.shootId`"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="link shoot"
                >{{ release.shootId }}</a>
            </div>

            <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="link added"
                >{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
            </span>
        </div>
    </div>
</template>

<script>
import Banner from './banner.vue';
import Actor from '../tile/actor.vue';
import Release from '../tile/release.vue';
import Releases from './releases.vue';

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

async function mounted() {
    this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
}

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

<style lang="scss" scoped>
@import 'theme';
.column {
    width: 1200px;
    max-width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
    box-sizing: border-box;
}

.info {
    padding: 1rem;
    border-left: solid 1px $shadow-hint;
    border-right: solid 1px $shadow-hint;
    flex-grow: 1;
}

.row {
    display: flex;
    align-items: center;
    margin: 0 0 1rem 0;

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

.details {
    background: $profile;
    color: $text-contrast;
    box-shadow: 0 0 3px $shadow-weak;
    cursor: default;

    .column {
        display: flex;
        align-items: center;
        padding: 0 1rem;
    }

    .link {
        color: $text-contrast;
    }
}

.tidbit {
    display: inline-block;
    height: 100%;

    &:not(:last-child) {
        border-right: solid 1px $highlight-hint;
    }

    .icon {
        fill: $highlight-weak;
        margin: 0 .25rem 0 0;
    }

    &.date,
    &.duration,
    &.shoot {
        flex-shrink: 0;
        padding: 1.25rem 1rem 1.25rem 0;
        margin: 0 1rem 0 0;
    }
}

.site {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    padding: .25rem 0;
    font-size: 0;
}

.logo {
    display: inline-block;
    filter: $logo-highlight;
}

.logo-site {
    height: 3rem;
    max-width: 15rem;
    object-fit: contain;
    object-position: 100% 50%;
}

.logo-network {
    height: 1.5rem;
    max-width: 10rem;
    object-fit: contain;
    object-position: 100% 50%;
}

.chain {
    color: $highlight;
    padding: 0 .5rem;
    font-weight: bold;
    font-size: .8rem;
}

.title {
    margin: 0 0 1.5rem 0;
}

.description {
    line-height: 1.25;
}

.duration {
    font-size: 0;
}

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

.actors {
    display: flex;
    flex-wrap: wrap;
}

.actor {
    width: 10rem;
    margin: 0 1rem .5rem 0;
}

.link {
    display: inline-block;
    color: $link;
    text-decoration: none;

    &:hover {
        color: $primary;

        .icon {
            fill: $primary;
        }
    }
}

.tag .link {
    background: $background;
    display: inline-block;
    padding: .5rem;
    margin: 0 .25rem .25rem 0;
    box-shadow: 0 0 2px $shadow-weak;
    text-decoration: none;
    text-transform: capitalize;

    &:hover {
        color: $primary;
    }
}

.showable {
    display: none;
}

@media(max-width: $breakpoint3) {
    .logo-network,
    .chain {
        display: none;
    }
}

@media(max-width: $breakpoint) {
    .hideable {
        display: none;
    }

    .row .showable {
        display: block;
    }

    .tidbit .showable {
        display: inline-block;
    }

    .logo-site {
        width: 15rem;
        max-width: 100%;
    }
}
</style>