commit: 9aaa8a86f52bc97838c768a8859919a3ad6fd54f
parent d8ed541d12382ec58ea1ab75acb1ca153e22f2e4
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Apr 2023 01:11:20 +0300
initial implementation of attachmentsetting
Diffstat:
6 files changed, 134 insertions(+), 7 deletions(-)
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -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: {
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -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>
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
@@ -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)
+ }
+ }
+ }
+}
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -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>
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
@@ -14,7 +14,6 @@
<input
:id="path"
class="string-input"
- step="1"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"
diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
@@ -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
}
