Upgraded dependencies, bumped to Node 24.
This commit is contained in:
@@ -1,458 +1,23 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<Banner
|
||||
:release="scene"
|
||||
/>
|
||||
|
||||
<div class="meta">
|
||||
<div class="entity">
|
||||
<Link
|
||||
v-if="scene.channel"
|
||||
:href="`/${scene.channel.type}/${scene.channel.slug}`"
|
||||
class="channel-link entity-link nolink"
|
||||
>
|
||||
<img
|
||||
v-if="scene.channel.hasLogo"
|
||||
:src="scene.channel.isIndependent
|
||||
|| scene.channel.type === 'network'
|
||||
|| !scene.network
|
||||
? `/logos/${scene.channel.slug}/thumbs/network.png`
|
||||
: `/logos/${scene.network.slug}/thumbs/${scene.channel.slug}.png`"
|
||||
class="channel-logo entity-logo"
|
||||
>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="name"
|
||||
>{{ scene.channel.name }}</span>
|
||||
</Link>
|
||||
|
||||
<span
|
||||
v-if="!scene.channel.isIndependent && scene.channel.type !== 'network' && scene.network"
|
||||
class="network-container"
|
||||
>
|
||||
by
|
||||
<Link
|
||||
:href="`/${scene.network.type}/${scene.network.slug}`"
|
||||
class="network-link entity-link nolink"
|
||||
>
|
||||
<img
|
||||
v-if="scene.network.hasLogo"
|
||||
:src="`/logos/${scene.network.slug}/thumbs/network.png`"
|
||||
class="network-logo entity-logo"
|
||||
>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="name"
|
||||
>{{ scene.network.name }}</span>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
:href="verifyAbility(user, 'plainUrls') ? scene.url : scene.watchUrl"
|
||||
:title="scene.date ? formatDate(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${formatDate(scene.createdAt, 'y-MM-dd')}`"
|
||||
target="_blank"
|
||||
class="date nolink"
|
||||
:class="{ nodate: !scene.date }"
|
||||
:data-umami-event="scene.affiliate ? 'scene-date-click-aff' : 'scene-date-click'"
|
||||
:data-umami-event-aff-id="scene.affiliate?.id"
|
||||
:data-umami-event-scene-id="scene.id"
|
||||
>
|
||||
<time
|
||||
:datetime="scene.effectiveDate.toISOString()"
|
||||
class="ellipsis compact-hide"
|
||||
>{{ formatDate(scene.effectiveDate, {
|
||||
month: 'MMMM y',
|
||||
year: 'y',
|
||||
}[scene.datePrecision] || 'MMMM d, y') }}</time>
|
||||
|
||||
<time
|
||||
:datetime="scene.effectiveDate.toISOString()"
|
||||
class="ellipsis compact-show"
|
||||
>{{ formatDate(scene.effectiveDate, {
|
||||
month: 'MMM y',
|
||||
year: 'y',
|
||||
}[scene.datePrecision] || 'MMM d, y') }}</time>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<h2
|
||||
v-if="scene.title"
|
||||
:title="scene.title"
|
||||
class="title"
|
||||
>{{ scene.title }}</h2>
|
||||
|
||||
<h2
|
||||
v-else-if="scene.actors.length > 0"
|
||||
class="title notitle"
|
||||
>Scene featuring {{ scene.actors.map((actor) => actor.name).join(', ') }}</h2>
|
||||
|
||||
<h2
|
||||
v-else
|
||||
class="title notitle"
|
||||
>No title</h2>
|
||||
|
||||
<div class="actions">
|
||||
<Heart
|
||||
domain="scenes"
|
||||
:item="scene"
|
||||
/>
|
||||
|
||||
<div class="view">
|
||||
<!--
|
||||
<button
|
||||
v-if="scene.photos.length > 0"
|
||||
class="button view nolink"
|
||||
>View photos</button>
|
||||
-->
|
||||
|
||||
<a
|
||||
v-if="scene.watchUrl"
|
||||
:href="scene.watchUrl"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="button button-primary watch nolink"
|
||||
:data-umami-event="scene.affiliate ? 'watch-click-aff' : 'watch-click'"
|
||||
:data-umami-event-scene-id="`${(scene.channel || scene.network).slug}:scene:${scene.id}`"
|
||||
:data-umami-event-aff-id="scene.affiliate && `aff:${scene.affiliate.id}`"
|
||||
:data-umami-event-channel="scene.channel?.slug"
|
||||
:data-umami-event-network="scene.network?.slug"
|
||||
>Watch full video</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<ul
|
||||
v-if="scene.actors.length > 0"
|
||||
class="actors nolist nobar"
|
||||
>
|
||||
<li
|
||||
v-for="actor in scene.actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
class="actor"
|
||||
>
|
||||
<ActorTile :actor="actor" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in tags"
|
||||
:key="`tag-${tag.id}`"
|
||||
class="tag"
|
||||
:class="{ 'has-actors': tag.actors.length > 0 }"
|
||||
>
|
||||
<Link
|
||||
:href="`/tag/${tag.slug}`"
|
||||
class="tag-name nolink"
|
||||
>{{ tag.name }}</Link>
|
||||
|
||||
<span
|
||||
v-if="tag.actors.length > 0"
|
||||
v-tooltip="{
|
||||
content: `${tag.name} for ${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(tag.actors.map((actor) => actor.name))}`,
|
||||
triggers: ['hover', 'click'],
|
||||
}"
|
||||
class="tag-actors"
|
||||
>
|
||||
<template
|
||||
v-for="tagActor in tag.actors"
|
||||
>
|
||||
<div
|
||||
v-if="tagActor.avatar"
|
||||
:key="`tagactor-${tagActor.id}`"
|
||||
class="tag-avatar"
|
||||
:style="tagActor.avatarStyle"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
:key="`tagactor-${tagActor.id}`"
|
||||
icon="star-full"
|
||||
class="tag-star"
|
||||
/>
|
||||
</template>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div
|
||||
v-if="scene.movies.length > 0 || scene.series.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Part of</h3>
|
||||
|
||||
<div class="movies">
|
||||
<MovieTile
|
||||
v-for="movie in scene.movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
:movie="movie"
|
||||
:show-details="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="series">
|
||||
<SerieTile
|
||||
v-for="serie in scene.series"
|
||||
:key="`serie-${serie.id}`"
|
||||
:serie="serie"
|
||||
:details="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0"
|
||||
class="section details"
|
||||
>
|
||||
<div
|
||||
v-if="scene.directors.length > 0"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Director</h3>
|
||||
{{ scene.directors.map((director) => director.name).join(', ') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.duration"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Duration</h3>
|
||||
{{ formatDuration(scene.duration) }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.shootId"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Shoot</h3>
|
||||
{{ scene.shootId }}
|
||||
</div>
|
||||
|
||||
<time
|
||||
v-if="scene.productionDate"
|
||||
:datetime="formatDate(scene.productionDate, 'yyyy-MM-dd')"
|
||||
:title="formatDate(scene.productionDate, 'yyyy-MM-dd')"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Shoot date</h3>
|
||||
{{ formatDate(scene.productionDate, 'MMMM d, yyyy') }}
|
||||
</time>
|
||||
|
||||
<div
|
||||
v-if="scene.studio"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Studio</h3>
|
||||
|
||||
<a
|
||||
:href="`/studio/${scene.studio.slug}`"
|
||||
class="link"
|
||||
>{{ scene.studio.name }}</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.qualities.length > 0"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Quality</h3>
|
||||
|
||||
<template v-if="qualities[scene.qualities[0]]">{{ qualities[scene.qualities[0]] }} ({{ scene.qualities[0] }}p)</template>
|
||||
<template v-else>{{ scene.qualities[0] }}p</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.photoCount"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Photos</h3>
|
||||
{{ scene.photoCount }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.description"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Description</h3>
|
||||
|
||||
<p class="description">{{ scene.description }}</p>
|
||||
</div>
|
||||
|
||||
<section
|
||||
v-if="scene.chapters.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Chapters</h3>
|
||||
|
||||
<Chapters
|
||||
:chapters="scene.chapters"
|
||||
class="section"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div
|
||||
v-if="campaigns?.scene"
|
||||
class="section"
|
||||
>
|
||||
<Campaign
|
||||
:campaign="campaigns.scene"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="section details">
|
||||
<div class="detail">
|
||||
<h3 class="heading">Added</h3>
|
||||
|
||||
<span>
|
||||
<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
|
||||
<span
|
||||
:title="`Batch ${scene.createdBatchId}`"
|
||||
class="added-batch"
|
||||
>#{{ scene.createdBatchId }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.comment"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Comment</h3>
|
||||
{{ scene.comment }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section summary">
|
||||
<h3 class="heading">Summary</h3>
|
||||
|
||||
<div class="detail">
|
||||
<input
|
||||
class="input"
|
||||
:value="summary"
|
||||
@focus="$event.target.select()"
|
||||
>
|
||||
|
||||
<a
|
||||
v-if="user"
|
||||
class="icon-link"
|
||||
target="_blank"
|
||||
:href="`/user/${user.username}/templates?t=${selectedTemplate}`"
|
||||
>
|
||||
<Icon
|
||||
v-tooltip="'Edit templates'"
|
||||
icon="pencil5"
|
||||
class="edit"
|
||||
@click="showSummaryDialog = true"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<Icon
|
||||
v-tooltip="'Copy to clipboard'"
|
||||
icon="copy"
|
||||
class="copy"
|
||||
@click="copySummary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="templates.length > 0"
|
||||
class="nolist templates"
|
||||
>
|
||||
<Icon icon="markup" />
|
||||
|
||||
<li
|
||||
v-for="userTemplate in templates"
|
||||
:key="`template-${userTemplate.id}`"
|
||||
class="template"
|
||||
:class="{ selected: userTemplate.id === selectedTemplate }"
|
||||
@click="selectTemplate(userTemplate.id)"
|
||||
>{{ userTemplate.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="user && scene.fingerprints.length > 0"
|
||||
class="section fingerprints"
|
||||
>
|
||||
<h3 class="heading">Fingerprints</h3>
|
||||
|
||||
<div class="fingerprints-container">
|
||||
<table class="fingerprints-table">
|
||||
<thead class="fingerprints-head">
|
||||
<tr class="fingerprints-header">
|
||||
<th class="fingerprints-heading">Hash</th>
|
||||
<th class="fingerprints-heading">Type</th>
|
||||
<th class="fingerprints-heading">Duration</th>
|
||||
<th class="fingerprints-heading">Submissions</th>
|
||||
<th class="fingerprints-heading">Source</th>
|
||||
<th class="fingerprints-heading">First added</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="fingerprints-body">
|
||||
<tr
|
||||
v-for="fingerprint in scene.fingerprints"
|
||||
:key="`fingerprint-${fingerprint.hash}`"
|
||||
class="fingerprint"
|
||||
>
|
||||
<td class="fingerprint-field fingerprint-hash">{{ fingerprint.hash }}</td>
|
||||
<td class="fingerprint-field fingerprint-type">{{ fingerprint.type.toUpperCase() }}</td>
|
||||
<td class="fingerprint-field fingerprint-duration">{{ formatDuration(fingerprint.duration) }}</td>
|
||||
<td class="fingerprint-field fingerprint-submission">{{ fingerprint.submissions }}</td>
|
||||
<td class="fingerprint-field fingerprint-source">{{ fingerprint.source || 'traxxx' }}</td>
|
||||
<td class="fingerprint-field fingerprint-date">{{ formatDate(fingerprint.createdAt, 'yyyy-MM-dd') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scene-actions section"
|
||||
>
|
||||
<a
|
||||
v-if="user && user.role !== 'user'"
|
||||
:href="`/scene/edit/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>Edit scene</a>
|
||||
|
||||
<a
|
||||
:href="`/scene/revs/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>Revisions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import Cookies from 'js-cookie';
|
||||
import { inject, ref, useId } from 'vue';
|
||||
|
||||
import { formatDate, formatDuration } from '#/utils/format.js';
|
||||
import events from '#/src/events.js';
|
||||
import processSummaryTemplate from '#/utils/process-summary-template.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
import verifyAbility from '#/utils/verify-ability.js';
|
||||
|
||||
import Banner from '#/components/media/banner.vue';
|
||||
import markdownTemplate from '#/assets/markdown.yaml?raw';
|
||||
import defaultTemplate from '#/assets/summary.yaml?raw';
|
||||
import ActorTile from '#/components/actors/tile.vue';
|
||||
import MovieTile from '#/components/movies/tile.vue';
|
||||
import SerieTile from '#/components/series/tile.vue';
|
||||
import Chapters from '#/components/scenes/chapters.vue';
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
import Campaign from '#/components/campaigns/campaign.vue';
|
||||
import Banner from '#/components/media/banner.vue';
|
||||
|
||||
import defaultTemplate from '#/assets/summary.yaml?raw'; // eslint-disable-line import/no-unresolved
|
||||
import markdownTemplate from '#/assets/markdown.yaml?raw'; // eslint-disable-line import/no-unresolved
|
||||
import MovieTile from '#/components/movies/tile.vue';
|
||||
import Chapters from '#/components/scenes/chapters.vue';
|
||||
import SerieTile from '#/components/series/tile.vue';
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
import events from '#/src/events.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
import { formatDate, formatDuration } from '#/utils/format.js';
|
||||
|
||||
import processSummaryTemplate from '#/utils/process-summary-template.js';
|
||||
import verifyAbility from '#/utils/verify-ability.js';
|
||||
|
||||
const cookies = Cookies.withConverter({
|
||||
write: (value) => value,
|
||||
@@ -472,6 +37,8 @@ const avatarFrameSize = 36;
|
||||
const avatarMargin = 2.75;
|
||||
const avatarVerticalOffset = 0.1; // fraction of crop size; positive shifts crop down (frames more chin, less forehead)
|
||||
const fallbackZoom = 2.25; // zoom level when no biometrics are available
|
||||
const editTemplatesTooltipId = useId();
|
||||
const copySummaryTooltipId = useId();
|
||||
|
||||
function clampCrop(crop) {
|
||||
const size = Math.min(crop.size, crop.imageWidth, crop.imageHeight);
|
||||
@@ -675,7 +242,8 @@ function selectTemplate(templateId, allowFallback = true) {
|
||||
selectedTemplate.value = template.id;
|
||||
|
||||
cookies.set('selectedTemplate', String(templateId));
|
||||
} catch (error) {
|
||||
}
|
||||
catch (error) {
|
||||
console.error(`Failed to process summary template: ${error.message}`);
|
||||
summary.value = null;
|
||||
}
|
||||
@@ -693,6 +261,442 @@ function copySummary() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<Banner
|
||||
:release="scene"
|
||||
/>
|
||||
|
||||
<div class="meta">
|
||||
<div class="entity">
|
||||
<Link
|
||||
v-if="scene.channel"
|
||||
:href="`/${scene.channel.type}/${scene.channel.slug}`"
|
||||
class="channel-link entity-link nolink"
|
||||
>
|
||||
<img
|
||||
v-if="scene.channel.hasLogo"
|
||||
:src="scene.channel.isIndependent
|
||||
|| scene.channel.type === 'network'
|
||||
|| !scene.network
|
||||
? `/logos/${scene.channel.slug}/thumbs/network.png`
|
||||
: `/logos/${scene.network.slug}/thumbs/${scene.channel.slug}.png`"
|
||||
class="channel-logo entity-logo"
|
||||
>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="name"
|
||||
>{{ scene.channel.name }}</span>
|
||||
</Link>
|
||||
|
||||
<span
|
||||
v-if="!scene.channel.isIndependent && scene.channel.type !== 'network' && scene.network"
|
||||
class="network-container"
|
||||
>
|
||||
on
|
||||
<Link
|
||||
:href="`/${scene.network.type}/${scene.network.slug}`"
|
||||
class="network-link entity-link nolink"
|
||||
>
|
||||
<img
|
||||
v-if="scene.network.hasLogo"
|
||||
:src="`/logos/${scene.network.slug}/thumbs/network.png`"
|
||||
class="network-logo entity-logo"
|
||||
>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="name"
|
||||
>{{ scene.network.name }}</span>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
:href="verifyAbility(user, 'plainUrls') ? scene.url : scene.watchUrl"
|
||||
:title="scene.date ? formatDate(scene.date.toISOString(), 'y-MM-dd hh:mm') : `Release date unknown, added ${formatDate(scene.createdAt, 'y-MM-dd')}`"
|
||||
target="_blank"
|
||||
class="date nolink"
|
||||
:class="{ nodate: !scene.date }"
|
||||
:data-umami-event="scene.affiliate ? 'scene-date-click-aff' : 'scene-date-click'"
|
||||
:data-umami-event-aff-id="scene.affiliate?.id"
|
||||
:data-umami-event-scene-id="scene.id"
|
||||
>
|
||||
<time
|
||||
:datetime="scene.effectiveDate.toISOString()"
|
||||
class="ellipsis compact-hide"
|
||||
>{{ formatDate(scene.effectiveDate, {
|
||||
month: 'MMMM y',
|
||||
year: 'y',
|
||||
}[scene.datePrecision] || 'MMMM d, y') }}</time>
|
||||
|
||||
<time
|
||||
:datetime="scene.effectiveDate.toISOString()"
|
||||
class="ellipsis compact-show"
|
||||
>{{ formatDate(scene.effectiveDate, {
|
||||
month: 'MMM y',
|
||||
year: 'y',
|
||||
}[scene.datePrecision] || 'MMM d, y') }}</time>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<h2
|
||||
v-if="scene.title"
|
||||
:title="scene.title"
|
||||
class="title"
|
||||
>{{ scene.title }}</h2>
|
||||
|
||||
<h2
|
||||
v-else-if="scene.actors.length > 0"
|
||||
class="title notitle"
|
||||
>Scene featuring {{ scene.actors.map((actor) => actor.name).join(', ') }}</h2>
|
||||
|
||||
<h2
|
||||
v-else
|
||||
class="title notitle"
|
||||
>No title</h2>
|
||||
|
||||
<div class="actions">
|
||||
<Heart
|
||||
domain="scenes"
|
||||
:item="scene"
|
||||
/>
|
||||
|
||||
<div class="view">
|
||||
<!--
|
||||
<button
|
||||
v-if="scene.photos.length > 0"
|
||||
class="button view nolink"
|
||||
>View photos</button>
|
||||
-->
|
||||
|
||||
<a
|
||||
v-if="scene.watchUrl"
|
||||
:href="scene.watchUrl"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="button button-primary watch nolink"
|
||||
:data-umami-event="scene.affiliate ? 'watch-click-aff' : 'watch-click'"
|
||||
:data-umami-event-scene-id="`${(scene.channel || scene.network).slug}:scene:${scene.id}`"
|
||||
:data-umami-event-aff-id="scene.affiliate && `aff:${scene.affiliate.id}`"
|
||||
:data-umami-event-channel="scene.channel?.slug"
|
||||
:data-umami-event-network="scene.network?.slug"
|
||||
>Watch full video</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<ul
|
||||
v-if="scene.actors.length > 0"
|
||||
class="actors nolist nobar"
|
||||
>
|
||||
<li
|
||||
v-for="actor in scene.actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
class="actor"
|
||||
>
|
||||
<ActorTile :actor="actor" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in tags"
|
||||
:key="`tag-${tag.id}`"
|
||||
class="tag"
|
||||
:class="{ 'has-actors': tag.actors.length > 0 }"
|
||||
>
|
||||
<Link
|
||||
:href="`/tag/${tag.slug}`"
|
||||
class="tag-name nolink"
|
||||
>{{ tag.name }}</Link>
|
||||
|
||||
<span
|
||||
v-if="tag.actors.length > 0"
|
||||
v-tooltip="{
|
||||
content: `${tag.name} for ${new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(tag.actors.map((actor) => actor.name))}`,
|
||||
triggers: ['hover', 'click'],
|
||||
ariaId: `tag-actors-${tag.id}`,
|
||||
}"
|
||||
class="tag-actors"
|
||||
>
|
||||
<template
|
||||
v-for="tagActor in tag.actors"
|
||||
>
|
||||
<div
|
||||
v-if="tagActor.avatar"
|
||||
:key="`tagactor-${tagActor.id}`"
|
||||
class="tag-avatar"
|
||||
:style="tagActor.avatarStyle"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else
|
||||
:key="`tagactor-${tagActor.id}`"
|
||||
icon="star-full"
|
||||
class="tag-star"
|
||||
/>
|
||||
</template>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div
|
||||
v-if="scene.movies.length > 0 || scene.series.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Part of</h3>
|
||||
|
||||
<div class="movies">
|
||||
<MovieTile
|
||||
v-for="movie in scene.movies"
|
||||
:key="`movie-${movie.id}`"
|
||||
:movie="movie"
|
||||
:show-details="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="series">
|
||||
<SerieTile
|
||||
v-for="serie in scene.series"
|
||||
:key="`serie-${serie.id}`"
|
||||
:serie="serie"
|
||||
:details="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.duration || scene.directors.length > 0 || scene.shootId || scene.qualities.length > 0"
|
||||
class="section details"
|
||||
>
|
||||
<div
|
||||
v-if="scene.directors.length > 0"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Director</h3>
|
||||
{{ scene.directors.map((director) => director.name).join(', ') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.duration"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Duration</h3>
|
||||
{{ formatDuration(scene.duration) }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.shootId"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Shoot</h3>
|
||||
{{ scene.shootId }}
|
||||
</div>
|
||||
|
||||
<time
|
||||
v-if="scene.productionDate"
|
||||
:datetime="formatDate(scene.productionDate, 'yyyy-MM-dd')"
|
||||
:title="formatDate(scene.productionDate, 'yyyy-MM-dd')"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Shoot date</h3>
|
||||
{{ formatDate(scene.productionDate, 'MMMM d, yyyy') }}
|
||||
</time>
|
||||
|
||||
<div
|
||||
v-if="scene.studio"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Studio</h3>
|
||||
|
||||
<a
|
||||
:href="`/studio/${scene.studio.slug}`"
|
||||
class="link"
|
||||
>{{ scene.studio.name }}</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.qualities.length > 0"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Quality</h3>
|
||||
|
||||
<template v-if="qualities[scene.qualities[0]]">{{ qualities[scene.qualities[0]] }} ({{ scene.qualities[0] }}p)</template>
|
||||
<template v-else>{{ scene.qualities[0] }}p</template>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.photoCount"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Photos</h3>
|
||||
{{ scene.photoCount }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.description"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Description</h3>
|
||||
|
||||
<p class="description">{{ scene.description }}</p>
|
||||
</div>
|
||||
|
||||
<section
|
||||
v-if="scene.chapters.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Chapters</h3>
|
||||
|
||||
<Chapters
|
||||
:chapters="scene.chapters"
|
||||
class="section"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div
|
||||
v-if="campaigns?.scene"
|
||||
class="section"
|
||||
>
|
||||
<Campaign
|
||||
:campaign="campaigns.scene"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="section details">
|
||||
<div class="detail">
|
||||
<h3 class="heading">Added</h3>
|
||||
|
||||
<span>
|
||||
<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
|
||||
<span
|
||||
:title="`Batch ${scene.createdBatchId}`"
|
||||
class="added-batch"
|
||||
>#{{ scene.createdBatchId }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.comment"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Comment</h3>
|
||||
{{ scene.comment }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section summary">
|
||||
<h3 class="heading">Summary</h3>
|
||||
|
||||
<div class="detail">
|
||||
<input
|
||||
class="input"
|
||||
:value="summary"
|
||||
@focus="$event.target.select()"
|
||||
>
|
||||
|
||||
<a
|
||||
v-if="user"
|
||||
class="icon-link"
|
||||
target="_blank"
|
||||
:href="`/user/${user.username}/templates?t=${selectedTemplate}`"
|
||||
>
|
||||
<Icon
|
||||
v-tooltip="{ content: 'Edit templates', ariaId: editTemplatesTooltipId }"
|
||||
icon="pencil5"
|
||||
class="edit"
|
||||
@click="showSummaryDialog = true"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<Icon
|
||||
v-tooltip="{ content: 'Copy to clipboard', ariaId: copySummaryTooltipId }"
|
||||
icon="copy"
|
||||
class="copy"
|
||||
@click="copySummary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="templates.length > 0"
|
||||
class="nolist templates"
|
||||
>
|
||||
<Icon icon="markup" />
|
||||
|
||||
<li
|
||||
v-for="userTemplate in templates"
|
||||
:key="`template-${userTemplate.id}`"
|
||||
class="template"
|
||||
:class="{ selected: userTemplate.id === selectedTemplate }"
|
||||
@click="selectTemplate(userTemplate.id)"
|
||||
>{{ userTemplate.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="user && scene.fingerprints.length > 0"
|
||||
class="section fingerprints"
|
||||
>
|
||||
<h3 class="heading">Fingerprints</h3>
|
||||
|
||||
<div class="fingerprints-container">
|
||||
<table class="fingerprints-table">
|
||||
<thead class="fingerprints-head">
|
||||
<tr class="fingerprints-header">
|
||||
<th class="fingerprints-heading">Hash</th>
|
||||
<th class="fingerprints-heading">Type</th>
|
||||
<th class="fingerprints-heading">Duration</th>
|
||||
<th class="fingerprints-heading">Submissions</th>
|
||||
<th class="fingerprints-heading">Source</th>
|
||||
<th class="fingerprints-heading">First added</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="fingerprints-body">
|
||||
<tr
|
||||
v-for="fingerprint in scene.fingerprints"
|
||||
:key="`fingerprint-${fingerprint.hash}`"
|
||||
class="fingerprint"
|
||||
>
|
||||
<td class="fingerprint-field fingerprint-hash">{{ fingerprint.hash }}</td>
|
||||
<td class="fingerprint-field fingerprint-type">{{ fingerprint.type.toUpperCase() }}</td>
|
||||
<td class="fingerprint-field fingerprint-duration">{{ formatDuration(fingerprint.duration) }}</td>
|
||||
<td class="fingerprint-field fingerprint-submission">{{ fingerprint.submissions }}</td>
|
||||
<td class="fingerprint-field fingerprint-source">{{ fingerprint.source || 'traxxx' }}</td>
|
||||
<td class="fingerprint-field fingerprint-date">{{ formatDate(fingerprint.createdAt, 'yyyy-MM-dd') }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="scene-actions section"
|
||||
>
|
||||
<a
|
||||
v-if="user && user.role !== 'user'"
|
||||
:href="`/scene/edit/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>Edit scene</a>
|
||||
|
||||
<a
|
||||
:href="`/scene/revs/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>Revisions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { render, redirect } from 'vike/abort'; /* eslint-disable-line import/extensions */
|
||||
import { fetchScenesById } from '#/src/scenes.js';
|
||||
import { getRandomCampaigns } from '#/src/campaigns.js';
|
||||
import { redirect, render } from 'vike/abort';
|
||||
import { getIdsBySlug } from '#/src/cache.js';
|
||||
import { getRandomCampaigns } from '#/src/campaigns.js';
|
||||
import { fetchScenesById } from '#/src/scenes.js';
|
||||
|
||||
function getTitle(scene) {
|
||||
if (scene.title) {
|
||||
|
||||
@@ -1,255 +1,10 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<p
|
||||
v-if="submitted"
|
||||
class="submitted"
|
||||
>
|
||||
<template v-if="apply">Your revision has been submitted. Thank you for your contribution!</template>
|
||||
<template v-else>Your revision has been submitted for review. Thank you for your contribution!</template>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Return to scene</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/edit/${scene.id}`"
|
||||
class="link"
|
||||
>Make another edit</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/revs/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Go to scene revisions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/user/${user.username}/revisions/scenes`"
|
||||
class="link"
|
||||
>Go to user revisions</a>
|
||||
</li>
|
||||
|
||||
<li v-if="user.role !== 'user'">
|
||||
<a
|
||||
href="/admin/revisions/scenes"
|
||||
class="link"
|
||||
>Go to revisions admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<form
|
||||
v-else
|
||||
@submit.prevent
|
||||
>
|
||||
<div class="editor-header">
|
||||
<h2 class="heading ellipsis">Edit scene #{{ scene.id }} - {{ scene.title }}</h2>
|
||||
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link noshrink"
|
||||
>Go to scene</a>
|
||||
</div>
|
||||
|
||||
<ul class="nolist">
|
||||
<li
|
||||
v-for="item in fields"
|
||||
:key="`item-${item.key}`"
|
||||
class="row"
|
||||
>
|
||||
<div class="item-header">
|
||||
<div class="key">
|
||||
{{ item.label || item.key }}
|
||||
|
||||
<Icon
|
||||
v-if="item.note"
|
||||
v-tooltip="item.note"
|
||||
icon="info2"
|
||||
class="item-note noselect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<Icon
|
||||
v-if="!item.forced"
|
||||
icon="pencil5"
|
||||
class="noselect"
|
||||
:class="{ active: editing.has(item.key) }"
|
||||
@click="toggleField(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="value"
|
||||
:class="{ disabled: !editing.has(item.key) }"
|
||||
>
|
||||
<EditActors
|
||||
v-if="item.type === 'actors'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@actors="(actors) => { edits.actors = actors; }"
|
||||
/>
|
||||
|
||||
<EditTags
|
||||
v-if="item.type === 'tags'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@tags="(tags) => { edits.tags = tags; }"
|
||||
/>
|
||||
|
||||
<EditMovies
|
||||
v-if="item.type === 'movies'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@movies="(movies) => { edits.movies = movies; }"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-if="item.type === 'string'"
|
||||
v-model="edits[item.key]"
|
||||
class="string input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<textarea
|
||||
v-if="item.type === 'text'"
|
||||
v-model="edits[item.key]"
|
||||
:placeholder="item.placeholder"
|
||||
rows="3"
|
||||
class="text input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
v-if="item.type === 'checkbox'"
|
||||
:label="item.checkboxLabel"
|
||||
:checked="edits[item.key]"
|
||||
:disabled="!editing.has(item.key)"
|
||||
class="checkbox delete"
|
||||
@change="(checked) => setDelete(checked)"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'date'"
|
||||
class="date"
|
||||
>
|
||||
<input
|
||||
v-model="edits[item.key].date"
|
||||
type="datetime-local"
|
||||
class="date input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<select
|
||||
v-if="item.value.precision"
|
||||
v-model="edits[item.key].precision"
|
||||
class="input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
<option value="minute">Minute</option>
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'duration'"
|
||||
class="duration"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[0] ?? item.value[0]"
|
||||
min="0"
|
||||
max="100"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('h', $event)"
|
||||
>H
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[1] ?? item.value[1]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('m', $event)"
|
||||
>M
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[2] ?? item.value[2]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('s', $event)"
|
||||
>S
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="editor-footer">
|
||||
<div class="comment">
|
||||
<textarea
|
||||
v-model="comment"
|
||||
rows="3"
|
||||
placeholder="Please provide verifiable information supporting your edits."
|
||||
class="text input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="editor-actions">
|
||||
<Checkbox
|
||||
v-if="user.role !== 'user'"
|
||||
v-tooltip="isApplyDisabled && editing.has('delete') ? 'Delete must be approved by an admin' : null"
|
||||
label="Approve and apply immediately"
|
||||
:checked="apply"
|
||||
:disabled="isApplyDisabled"
|
||||
@change="(checked) => apply = checked"
|
||||
/>
|
||||
|
||||
<!-- we don't want the return key to submit the form -->
|
||||
<button
|
||||
class="button button-primary"
|
||||
type="button"
|
||||
:disabled="editing.size === 0"
|
||||
@click="submit"
|
||||
>
|
||||
<template v-if="apply">Submit</template>
|
||||
<template v-else>Submit for review</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
import { computed, inject, ref, useId } from 'vue';
|
||||
|
||||
import EditActors from '#/components/edit/actors.vue';
|
||||
import EditTags from '#/components/edit/tags.vue';
|
||||
import EditMovies from '#/components/edit/movies.vue';
|
||||
import EditTags from '#/components/edit/tags.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
|
||||
import { post } from '#/src/api.js';
|
||||
@@ -259,6 +14,7 @@ const pageContext = inject('pageContext');
|
||||
|
||||
const user = pageContext.user;
|
||||
const scene = ref(pageContext.pageProps.scene);
|
||||
const applyTooltipId = useId();
|
||||
|
||||
const fields = computed(() => [
|
||||
{
|
||||
@@ -423,12 +179,258 @@ async function submit() {
|
||||
submitted.value = true;
|
||||
|
||||
// scene.value = await get(`/scenes/${scene.value.id}`);
|
||||
} catch (error) {
|
||||
}
|
||||
catch (error) {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor">
|
||||
<p
|
||||
v-if="submitted"
|
||||
class="submitted"
|
||||
>
|
||||
<template v-if="apply">Your revision has been submitted. Thank you for your contribution!</template>
|
||||
<template v-else>Your revision has been submitted for review. Thank you for your contribution!</template>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Return to scene</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/edit/${scene.id}`"
|
||||
class="link"
|
||||
>Make another edit</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/scene/revs/${scene.id}/${scene.slug}`"
|
||||
class="link"
|
||||
>Go to scene revisions</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
:href="`/user/${user.username}/revisions/scenes`"
|
||||
class="link"
|
||||
>Go to user revisions</a>
|
||||
</li>
|
||||
|
||||
<li v-if="user.role !== 'user'">
|
||||
<a
|
||||
href="/admin/revisions/scenes"
|
||||
class="link"
|
||||
>Go to revisions admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<form
|
||||
v-else
|
||||
@submit.prevent
|
||||
>
|
||||
<div class="editor-header">
|
||||
<h2 class="heading ellipsis">Edit scene #{{ scene.id }} - {{ scene.title }}</h2>
|
||||
|
||||
<a
|
||||
:href="`/scene/${scene.id}/${scene.slug}`"
|
||||
target="_blank"
|
||||
class="link noshrink"
|
||||
>Go to scene</a>
|
||||
</div>
|
||||
|
||||
<ul class="nolist">
|
||||
<li
|
||||
v-for="item in fields"
|
||||
:key="`item-${item.key}`"
|
||||
class="row"
|
||||
>
|
||||
<div class="item-header">
|
||||
<div class="key">
|
||||
{{ item.label || item.key }}
|
||||
|
||||
<Icon
|
||||
v-if="item.note"
|
||||
v-tooltip="{ content: item.note, ariaId: `field-note-${item.key}` }"
|
||||
icon="info2"
|
||||
class="item-note noselect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<Icon
|
||||
v-if="!item.forced"
|
||||
icon="pencil5"
|
||||
class="noselect"
|
||||
:class="{ active: editing.has(item.key) }"
|
||||
@click="toggleField(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="value"
|
||||
:class="{ disabled: !editing.has(item.key) }"
|
||||
>
|
||||
<EditActors
|
||||
v-if="item.type === 'actors'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@actors="(actors) => { edits.actors = actors; }"
|
||||
/>
|
||||
|
||||
<EditTags
|
||||
v-if="item.type === 'tags'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@tags="(tags) => { edits.tags = tags; }"
|
||||
/>
|
||||
|
||||
<EditMovies
|
||||
v-if="item.type === 'movies'"
|
||||
:scene="scene"
|
||||
:item="item"
|
||||
:edits="edits"
|
||||
:editing="editing"
|
||||
@movies="(movies) => { edits.movies = movies; }"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-if="item.type === 'string'"
|
||||
v-model="edits[item.key]"
|
||||
class="string input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<textarea
|
||||
v-if="item.type === 'text'"
|
||||
v-model="edits[item.key]"
|
||||
:placeholder="item.placeholder"
|
||||
rows="3"
|
||||
class="text input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
v-if="item.type === 'checkbox'"
|
||||
:label="item.checkboxLabel"
|
||||
:checked="edits[item.key]"
|
||||
:disabled="!editing.has(item.key)"
|
||||
class="checkbox delete"
|
||||
@change="(checked) => setDelete(checked)"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'date'"
|
||||
class="date"
|
||||
>
|
||||
<input
|
||||
v-model="edits[item.key].date"
|
||||
type="datetime-local"
|
||||
class="date input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
|
||||
<select
|
||||
v-if="item.value.precision"
|
||||
v-model="edits[item.key].precision"
|
||||
class="input"
|
||||
:disabled="!editing.has(item.key)"
|
||||
>
|
||||
<option value="minute">Minute</option>
|
||||
<option value="hour">Hour</option>
|
||||
<option value="day">Day</option>
|
||||
<option value="month">Month</option>
|
||||
<option value="year">Year</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.type === 'duration'"
|
||||
class="duration"
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[0] ?? item.value[0]"
|
||||
min="0"
|
||||
max="100"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('h', $event)"
|
||||
>H
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[1] ?? item.value[1]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('m', $event)"
|
||||
>M
|
||||
|
||||
<input
|
||||
type="number"
|
||||
class="input"
|
||||
:value="edits[item.key]?.[2] ?? item.value[2]"
|
||||
min="0"
|
||||
max="59"
|
||||
:disabled="!editing.has(item.key)"
|
||||
@change="setDuration('s', $event)"
|
||||
>S
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="editor-footer">
|
||||
<div class="comment">
|
||||
<textarea
|
||||
v-model="comment"
|
||||
rows="3"
|
||||
placeholder="Please provide verifiable information supporting your edits."
|
||||
class="text input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="editor-actions">
|
||||
<Checkbox
|
||||
v-if="user.role !== 'user'"
|
||||
v-tooltip="isApplyDisabled && editing.has('delete') ? { content: 'Delete must be approved by an admin', ariaId: applyTooltipId } : null"
|
||||
label="Approve and apply immediately"
|
||||
:checked="apply"
|
||||
:disabled="isApplyDisabled"
|
||||
@change="(checked) => apply = checked"
|
||||
/>
|
||||
|
||||
<!-- we don't want the return key to submit the form -->
|
||||
<button
|
||||
class="button button-primary"
|
||||
type="button"
|
||||
:disabled="editing.size === 0"
|
||||
@click="submit"
|
||||
>
|
||||
<template v-if="apply">Submit</template>
|
||||
<template v-else>Submit for review</template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import Revisions from '#/components/edit/revisions.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const scene = pageContext.pageProps.scene;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="revs-header">
|
||||
@@ -21,15 +30,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import Revisions from '#/components/edit/revisions.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const scene = pageContext.pageProps.scene;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
padding: 1rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { fetchScenesById, fetchSceneRevisions } from '#/src/scenes.js';
|
||||
import { fetchSceneRevisions, fetchScenesById } from '#/src/scenes.js';
|
||||
|
||||
export async function onBeforeRender(pageContext) {
|
||||
const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], {
|
||||
|
||||
Reference in New Issue
Block a user