-
-
-
- {mainTopic().title}
-
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
- {props.article.title}
+{capitalize(props.article.subtitle, false)}
+
+
+ {(a: Author, index) => (
+ <>
+ 0}>,
+ {a.name}
+
+ )}
+
+
+ {props.article.title}
-{capitalize(props.article.subtitle, false)}
-
-
- {(a: Author, index) => (
- <>
- 0}>,
- {a.name}
-
- )}
-
-
-
+
+
+
diff --git a/src/components/Editor/AudioUploader/AudioUploader.module.scss b/src/components/Editor/AudioUploader/AudioUploader.module.scss
new file mode 100644
index 00000000..1a15ec91
--- /dev/null
+++ b/src/components/Editor/AudioUploader/AudioUploader.module.scss
@@ -0,0 +1,17 @@
+.AudioUploader {
+ display: block;
+ margin-top: 2rem;
+
+ .draggable {
+ margin: 8px 0;
+ padding: 8px 0;
+ &:hover {
+ background: var(--placeholder-color-semi);
+ }
+ }
+}
+
+.sortable {
+ background: red;
+ padding: 8px 0;
+}
diff --git a/src/components/Editor/AudioUploader/AudioUploader.tsx b/src/components/Editor/AudioUploader/AudioUploader.tsx
new file mode 100644
index 00000000..c1f9114c
--- /dev/null
+++ b/src/components/Editor/AudioUploader/AudioUploader.tsx
@@ -0,0 +1,41 @@
+import { clsx } from 'clsx'
+import styles from './AudioUploader.module.scss'
+import { DropArea } from '../../_shared/DropArea'
+import { useLocalize } from '../../../context/localize'
+import { createEffect, createSignal, on, Show } from 'solid-js'
+import { MediaItem } from '../../../pages/types'
+import { composeMediaItems } from '../../../utils/composeMediaItems'
+import { AudioPlayer } from '../../Article/AudioPlayer'
+import { Buffer } from 'buffer'
+
+window.Buffer = Buffer
+
+type Props = {
+ class?: string
+ audio: MediaItem[]
+ onAudioChange: (index: number, value: MediaItem) => void
+ onAudioAdd: (value: MediaItem[]) => void
+}
+
+export const AudioUploader = (props: Props) => {
+ const { t } = useLocalize()
+
+ const handleAudioDescriptionChange = (index: number, field: string, value) => {
+ props.onAudioChange(index, { ...props.audio[index], [field]: value })
+ }
+
+ return (
+ = createMemo(() => {
return JSON.parse(form.media || '[]')
})
@@ -125,9 +128,9 @@ export const EditView = (props: Props) => {
setForm('selectedTopics', newSelectedTopics)
}
- const handleAddImages = (data) => {
- const newImages = [...mediaItems(), ...data]
- setForm('media', JSON.stringify(newImages))
+ const handleAddMedia = (data) => {
+ const newMedia = [...mediaItems(), ...data]
+ setForm('media', JSON.stringify(newMedia))
}
const handleSortedImages = (data) => {
setForm('media', JSON.stringify(data))
@@ -139,15 +142,54 @@ export const EditView = (props: Props) => {
setForm('media', JSON.stringify(copy))
}
- const handleImageChange = (index, value) => {
+ const handleMediaChange = (index, value) => {
const updated = mediaItems().map((item, idx) => (idx === index ? value : item))
setForm('media', JSON.stringify(updated))
}
+ const handleBaseFieldsChange = (key, value) => {
+ const updated = mediaItems().map((media) => ({ ...media, [key]: value }))
+ setForm('media', JSON.stringify(updated))
+ }
+
+ const articleTitle = () => {
+ switch (props.shout.layout as LayoutType) {
+ case 'audio': {
+ return t('Album name')
+ }
+ case 'image': {
+ return t('Gallery name')
+ }
+ default: {
+ return t('Header')
+ }
+ }
+ }
+
+ const pageTitle = () => {
+ switch (props.shout.layout as LayoutType) {
+ case 'audio': {
+ return t('Publish Album')
+ }
+ case 'image': {
+ return t('Create gallery')
+ }
+ case 'video': {
+ return t('Create video')
+ }
+ case 'literature': {
+ return t('New literary work')
+ }
+ default: {
+ return t('Write an article')
+ }
+ }
+ }
+
return (
<>
+ 0}>
+
+ props.onAudioAdd(composeMediaItems(value))}
+ />
+
+ )
+}
diff --git a/src/components/Editor/AudioUploader/index.ts b/src/components/Editor/AudioUploader/index.ts
new file mode 100644
index 00000000..ee94d29c
--- /dev/null
+++ b/src/components/Editor/AudioUploader/index.ts
@@ -0,0 +1 @@
+export { AudioUploader } from './AudioUploader'
diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss
index 62bc4333..e1be9830 100644
--- a/src/components/Views/Edit.module.scss
+++ b/src/components/Views/Edit.module.scss
@@ -90,6 +90,34 @@
.titleInput {
font-weight: 700;
}
+ .additional {
+ margin-top: auto;
+
+ .additionalInput {
+ @include font-size(1.4rem);
+
+ font-weight: 600;
+ padding: 0;
+ margin: 14px 0 0;
+ border: none;
+ outline: none;
+
+ &::placeholder {
+ color: var(--secondary-color);
+ }
+ }
+
+ .datepicker {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ margin: 14px 0 0;
+
+ .additionalInput {
+ margin-top: 0;
+ }
+ }
+ }
}
// Grow input
@@ -215,13 +243,36 @@
.inputContainer {
position: relative;
+ flex: 1;
+ display: flex;
+ flex-flow: column;
.validationError {
position: absolute;
z-index: 1;
- top: 100%;
+ top: calc(100% + 4px);
font-size: small;
- color: #f00;
+ color: var(--danger-color);
+ }
+}
+
+.audioHeader {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 24px;
+
+ .inputContainer {
+ flex: 1;
+ }
+
+ .cover {
+ width: 228px;
+ height: 228px;
+ flex-basis: 228px;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
}
}
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index 6a5bcb78..2eec8189 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -1,4 +1,4 @@
-import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+import { Accessor, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
import { useLocalize } from '../../context/localize'
import { clsx } from 'clsx'
import { Title } from '@solidjs/meta'
@@ -16,9 +16,12 @@ import { hideModal, showModal } from '../../stores/ui'
import { imageProxy } from '../../utils/imageProxy'
import { GrowingTextarea } from '../_shared/GrowingTextarea'
import { VideoUploader } from '../Editor/VideoUploader'
+import { AudioUploader } from '../Editor/AudioUploader'
import { VideoPlayer } from '../_shared/VideoPlayer'
import { slugify } from '../../utils/slugify'
import { SolidSwiper } from '../_shared/SolidSwiper'
+import { DropArea } from '../_shared/DropArea'
+import { LayoutType, MediaItem } from '../../pages/types'
type Props = {
shout: Shout
@@ -66,7 +69,7 @@ export const EditView = (props: Props) => {
layout: props.shout.layout
})
- const mediaItems = createMemo(() => {
+ const mediaItems: Accessor
- {t('Write an article')}
+ {pageTitle()}