extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-02-14 17:29:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update:Media item share modal UI/UX and localization #1768

Browse Source
This commit is contained in:
advplyr 2024-06-29 16:15:55 -05:00
parent 31146082f0
commit c309856f74
5 changed files with 76 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
client/components/modals/ShareModal.vue
View File

@ -2,44 +2,45 @@
<modals-modal ref="modal" v-model="show" name="share" :width="600" :height="'unset'" :processing="processing">
<template #outer>
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
<p class="text-3xl text-white truncate">Share media item</p>
<p class="text-3xl text-white truncate">{{ $strings.LabelShare }}</p>
</div>
</template>
<div class="px-6 py-8 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
<template v-if="currentShare">
<div class="w-full py-2">
<label class="px-1 text-sm font-semibold block">Share URL</label>
<ui-text-input v-model="currentShareUrl" readonly class="text-base h-10" />
<label class="px-1 text-sm font-semibold block">{{ $strings.LabelShareURL }}</label>
<ui-text-input v-model="currentShareUrl" show-copy readonly class="text-base h-10" />
</div>
<div class="w-full py-2 px-1">
<p v-if="currentShare.expiresAt" class="text-base">Expires in {{ currentShareTimeRemaining }}</p>
<p v-else>Permanent</p>
<p v-if="currentShare.expiresAt" class="text-base">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
<p v-else>{{ $strings.LabelPermanent }}</p>
</div>
</template>
<template v-else>
<div class="flex items-center justify-between space-x-4">
<div class="w-40">
<label class="px-1 text-sm font-semibold block">Slug</label>
<div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
<div class="w-full sm:w-48">
<label class="px-1 text-sm font-semibold block">{{ $strings.LabelSlug }}</label>
<ui-text-input v-model="newShareSlug" class="text-base h-10" />
</div>
<div class="flex-grow" />
<div class="w-80">
<label class="px-1 text-sm font-semibold block">Share Duration</label>
<div class="w-full sm:w-80">
<label class="px-1 text-sm font-semibold block">{{ $strings.LabelDuration }}</label>
<div class="inline-flex items-center space-x-2">
<div>
<ui-icon-btn icon="remove" :size="10" @click="clickMinus" />
</div>
<ui-text-input v-model="newShareDuration" type="number" text-center no-spinner class="text-center w-28 h-10 text-base" />
<ui-text-input v-model="newShareDuration" type="number" text-center no-spinner class="text-center max-w-12 min-w-12 h-10 text-base" />
<div>
<ui-icon-btn icon="add" :size="10" @click="clickPlus" />
</div>
<ui-dropdown v-model="shareDurationUnit" :items="durationUnits" />
<div class="w-28">
<ui-dropdown v-model="shareDurationUnit" :items="durationUnits" />
</div>
</div>
</div>
</div>
<p class="text-sm text-gray-300 py-4 px-1">
Share URL will be: <span class="">{{ demoShareUrl }}</span>
</p>
<p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareURLWillBe', [demoShareUrl])" />
<p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareExpirationWillBe', [expirationDateString])" />
</template>
<div class="flex items-center pt-6">
<div class="flex-grow" />
@ -72,15 +73,15 @@ export default {
shareDurationUnit: 'minutes',
durationUnits: [
{
text: 'Minutes',
text: this.$strings.LabelMinutes,
value: 'minutes'
},
{
text: 'Hours',
text: this.$strings.LabelHours,
value: 'hours'
},
{
text: 'Days',
text: this.$strings.LabelDays,
value: 'days'
}
]
@ -116,15 +117,20 @@ export default {
},
currentShareTimeRemaining() {
if (!this.currentShare) return 'Error'
if (!this.currentShare.expiresAt) return 'Permanent'
if (!this.currentShare.expiresAt) return this.$strings.LabelPermanent
const msRemaining = new Date(this.currentShare.expiresAt).valueOf() - Date.now()
if (msRemaining <= 0) return 'Expired'
return this.$elapsedPretty(msRemaining / 1000, true)
return this.$elapsedPrettyExtended(msRemaining / 1000, true, false)
},
expireDurationSeconds() {
let shareDuration = Number(this.newShareDuration)
if (!shareDuration || isNaN(shareDuration)) return 0
return this.newShareDuration * (this.shareDurationUnit === 'minutes' ? 60 : this.shareDurationUnit === 'hours' ? 3600 : 86400)
},
expirationDateString() {
if (!this.expireDurationSeconds) return this.$strings.LabelPermanent
const dateMs = Date.now() + this.expireDurationSeconds * 1000
return this.$formatDatetime(dateMs, this.$store.state.serverSettings.dateFormat, this.$store.state.serverSettings.timeFormat)
}
},
methods: {

36
client/components/ui/TextInput.vue
View File

@ -1,12 +1,33 @@
<template>
<div ref="wrapper" class="relative">
<input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
<input
:id="inputId"
:name="inputName"
ref="input"
v-model="inputValue"
:type="actualType"
:step="step"
:min="min"
:readonly="readonly"
:disabled="disabled"
:placeholder="placeholder"
dir="auto"
class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
:class="classList"
@keyup="keyup"
@change="change"
@focus="focused"
@blur="blurred"
/>
<div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
<span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
</div>
<div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
<span class="material-icons-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
</div>
<div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
<span class="material-icons-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
</div>
</div>
</template>
@ -34,6 +55,7 @@ export default {
clearable: Boolean,
inputId: String,
inputName: String,
showCopy: Boolean,
step: [String, Number],
min: [String, Number]
},
@ -41,7 +63,8 @@ export default {
return {
showPassword: false,
isHovering: false,
isFocused: false
isFocused: false,
hasCopied: false
}
},
computed: {
@ -67,6 +90,15 @@ export default {
}
},
methods: {
copyToClipboard() {
if (this.hasCopied) return
this.$copyToClipboard(this.inputValue).then((success) => {
this.hasCopied = success
setTimeout(() => {
this.hasCopied = false
}, 2000)
})
},
clear() {
this.inputValue = ''
this.$emit('clear')

2
client/pages/item/_id/index.vue
View File

@ -442,7 +442,7 @@ export default {
if (this.userIsAdminOrUp && !this.isPodcast) {
items.push({
text: 'Share',
text: this.$strings.LabelShare,
action: 'share'
})
}

9
client/pages/share/_slug.vue
View File

@ -2,11 +2,11 @@
<div id="page-wrapper" class="w-full h-screen max-h-screen overflow-hidden">
<div class="w-full h-full flex items-center justify-center">
<div class="w-full p-2 sm:p-4 md:p-8">
<div :style="{ width: coverWidth + 'px', height: coverHeight + 'px' }" class="mx-auto overflow-hidden rounded-xl my-2">
<div v-if="!isMobileLandscape" :style="{ width: coverWidth + 'px', height: coverHeight + 'px' }" class="mx-auto overflow-hidden rounded-xl my-2">
<img :src="coverUrl" class="object-contain w-full h-full" />
</div>
<p class="text-2xl md:text-3xl font-semibold text-center mb-1">{{ mediaItemShare.playbackSession.displayTitle || 'No title' }}</p>
<p v-if="mediaItemShare.playbackSession.displayAuthor" class="text-xl text-slate-400 font-semibold text-center mb-1">{{ mediaItemShare.playbackSession.displayAuthor }}</p>
<p class="text-2xl lg:text-3xl font-semibold text-center mb-1 line-clamp-2">{{ mediaItemShare.playbackSession.displayTitle || 'No title' }}</p>
<p v-if="mediaItemShare.playbackSession.displayAuthor" class="text-lg lg:text-xl text-slate-400 font-semibold text-center mb-1 truncate">{{ mediaItemShare.playbackSession.displayAuthor }}</p>
<div class="w-full pt-16">
<player-ui ref="audioPlayer" :chapters="chapters" :paused="isPaused" :loading="!hasLoaded" :is-podcast="false" hide-bookmarks hide-sleep-timer @playPause="playPause" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setVolume="setVolume" @setPlaybackRate="setPlaybackRate" @seek="seek" />
@ -79,6 +79,9 @@ export default {
const coverAspectRatio = this.playbackSession.coverAspectRatio
return coverAspectRatio === this.$constants.BookCoverAspectRatio.STANDARD ? 1.6 : 1
},
isMobileLandscape() {
return this.windowWidth > this.windowHeight && this.windowHeight < 450
},
coverWidth() {
const availableCoverWidth = Math.min(450, this.windowWidth - 32)
const availableCoverHeight = Math.min(450, this.windowHeight - 250)

9
client/strings/en-us.json
View File

@ -258,6 +258,7 @@
"LabelCurrently": "Currently:",
"LabelCustomCronExpression": "Custom Cron Expression:",
"LabelDatetime": "Datetime",
"LabelDays": "Days",
"LabelDeleteFromFileSystemCheckbox": "Delete from file system (uncheck to only remove from database)",
"LabelDescription": "Description",
"LabelDeselectAll": "Deselect All",
@ -321,6 +322,7 @@
"LabelHighestPriority": "Highest priority",
"LabelHost": "Host",
"LabelHour": "Hour",
"LabelHours": "Hours",
"LabelIcon": "Icon",
"LabelImageURLFromTheWeb": "Image URL from the web",
"LabelInProgress": "In Progress",
@ -371,6 +373,7 @@
"LabelMetadataOrderOfPrecedenceDescription": "Higher priority metadata sources will override lower priority metadata sources",
"LabelMetadataProvider": "Metadata Provider",
"LabelMinute": "Minute",
"LabelMinutes": "Minutes",
"LabelMissing": "Missing",
"LabelMissingEbook": "Has no ebook",
"LabelMissingSupplementaryEbook": "Has no supplementary ebook",
@ -410,6 +413,7 @@
"LabelOverwrite": "Overwrite",
"LabelPassword": "Password",
"LabelPath": "Path",
"LabelPermanent": "Permanent",
"LabelPermissionsAccessAllLibraries": "Can Access All Libraries",
"LabelPermissionsAccessAllTags": "Can Access All Tags",
"LabelPermissionsAccessExplicitContent": "Can Access Explicit Content",
@ -507,6 +511,8 @@
"LabelSettingsStoreMetadataWithItem": "Store metadata with item",
"LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders",
"LabelSettingsTimeFormat": "Time Format",
"LabelShare": "Share",
"LabelShareURL": "Share URL",
"LabelShowAll": "Show All",
"LabelShowSeconds": "Show seconds",
"LabelSize": "Size",
@ -716,6 +722,9 @@
"MessageSelected": "{0} selected",
"MessageServerCouldNotBeReached": "Server could not be reached",
"MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
"MessageShareExpirationWillBe": "Expiration will be <strong>{0}</strong>",
"MessageShareExpiresIn": "Expires in {0}",
"MessageShareURLWillBe": "Share URL will be <strong>{0}</strong>",
"MessageStartPlaybackAtTime": "Start playback for \"{0}\" at {1}?",
"MessageThinking": "Thinking...",
"MessageUploaderItemFailed": "Failed to upload",