initial implementation of attachmentsetting

This commit is contained in:
Henry Jameson 2023-04-13 01:11:20 +03:00
parent d8ed541d12
commit 9aaa8a86f5
6 changed files with 134 additions and 7 deletions

View File

@ -3,6 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
import IntegerSetting from '../helpers/integer_setting.vue'
import StringSetting from '../helpers/string_setting.vue'
import GroupSetting from '../helpers/group_setting.vue'
import AttachmentSetting from '../helpers/attachment_setting.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -26,6 +27,7 @@ const InstanceTab = {
ChoiceSetting,
IntegerSetting,
StringSetting,
AttachmentSetting,
GroupSetting
},
computed: {

View File

@ -24,14 +24,14 @@
</StringSetting>
</li>
<li>
<StringSetting path=":pleroma.:instance.:instance_thumbnail">
<AttachmentSetting path=":pleroma.:instance.:instance_thumbnail">
INSTANCE THUMBNAIL
</StringSetting>
</AttachmentSetting>
</li>
<li>
<StringSetting path=":pleroma.:instance.:background_image">
<AttachmentSetting path=":pleroma.:instance.:background_image">
BACKGROUND IMAGE
</StringSetting>
</AttachmentSetting>
</li>
</ul>
</div>

View File

@ -0,0 +1,42 @@
import Setting from './setting.js'
import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
import MediaUpload from 'src/components/media_upload/media_upload.vue'
import Attachment from 'src/components/attachment/attachment.vue'
export default {
...Setting,
props: {
...Setting.props,
type: {
type: Array,
required: false,
default: []
}
},
components: {
...Setting.components,
MediaUpload,
Attachment
},
computed: {
...Setting.computed,
attachment () {
const path = this.realDraftMode ? this.draft : this.state
const url = path.includes('://') ? path : this.$store.state.instance.server + path
return {
mimetype: fileTypeExt(url),
url
}
}
},
methods: {
...Setting.methods,
setMediaFile (fileInfo) {
if (this.realDraftMode) {
this.draft = fileInfo.url
} else {
this.configSink(this.path, fileInfo.url)
}
}
}
}

View File

@ -0,0 +1,70 @@
<template>
<span
v-if="matchesExpertLevel"
class="AttachmentSetting"
>
<label :for="path" :class="{ 'faint': shouldBeDisabled }">
<template v-if="backendDescriptionLabel">
{{ backendDescriptionLabel + ' ' }}
</template>
<template v-else>
<slot />
</template>
</label>
<p
v-if="backendDescriptionDescription"
class="setting-description"
:class="{ 'faint': shouldBeDisabled }"
>
{{ backendDescriptionDescription + ' ' }}
</p>
<div class="attachment-input">
<Attachment
class="attachment"
:compact="compact"
:attachment="attachment"
size="small"
hide-description
@setMedia="onMedia"
@naturalSizeLoad="onNaturalSizeLoad"
/>
<div class="controls">
<media-upload
normal-button
ref="mediaUpload"
class="media-upload-icon"
:drop-files="dropFiles"
@uploaded="setMediaFile"
@upload-failed="uploadFailed"
/>
<input
:id="path"
class="string-input"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"
>
{{ ' ' }}
<ModifiedIndicator
:changed="isChanged"
:onclick="reset"
/>
<ProfileSettingIndicator :is-profile="isProfileSetting" />
</div>
</div>
<DraftButtons />
</span>
</template>
<script src="./attachment_setting.js"></script>
<style lang="scss">
.AttachmentSetting {
.attachment {
display: block;
width: 20em;
height: 15em;
}
}
</style>

View File

@ -14,7 +14,6 @@
<input
:id="path"
class="string-input"
step="1"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"

View File

@ -1,7 +1,7 @@
// TODO this func might as well take the entire file and use its mimetype
// or the entire service could be just mimetype service that only operates
// on mimetypes and not files. Currently the naming is confusing.
const fileType = mimetype => {
export const fileType = mimetype => {
if (mimetype.match(/flash/)) {
return 'flash'
}
@ -25,11 +25,25 @@ const fileType = mimetype => {
return 'unknown'
}
const fileMatchesSomeType = (types, file) =>
export const fileTypeExt = url => {
if (url.match(/\.(png|jpe?g|gif|webp|avif)$/)) {
return 'image'
}
if (url.match(/\.(ogv|mp4|webm|mov)$/)) {
return 'video'
}
if (url.match(/\.(it|s3m|mod|umx|mp3|aac|m4a|flac|alac|ogg|oga|opus|wav|ape|midi?)$/)) {
return 'audio'
}
return 'unknown'
}
export const fileMatchesSomeType = (types, file) =>
types.some(type => fileType(file.mimetype) === type)
const fileTypeService = {
fileType,
fileTypeExt,
fileMatchesSomeType
}