diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 54e95c52..00658000 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -167,6 +167,8 @@ "More": "More", "Most commented": "Commented", "Most read": "Readable", + "Move down": "Move down", + "Move up": "Move up", "My feed": "My feed", "My subscriptions": "Subscriptions", "Name": "Name", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 5a871945..7790f35e 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -177,6 +177,8 @@ "More": "Ещё", "Most commented": "Комментируемое", "Most read": "Читаемое", + "Move down": "Переместить вниз", + "Move up": "Переместить вверх", "My feed": "Моя лента", "My subscriptions": "Подписки", "Name": "Имя", diff --git a/src/components/Article/AudioPlayer/AudioPlayer.module.scss b/src/components/Article/AudioPlayer/AudioPlayer.module.scss index 775b72b8..b1fd29d1 100644 --- a/src/components/Article/AudioPlayer/AudioPlayer.module.scss +++ b/src/components/Article/AudioPlayer/AudioPlayer.module.scss @@ -309,8 +309,25 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum .actions { margin-left: auto; display: flex; + align-items: center; flex-direction: row; gap: 16px; + + .action { + border: 1px solid transparent; + + &:not([disabled]):hover { + border-color: var(--background-color-invert); + background: var(--background-color-invert); + img { + filter: var(--icon-filter-hover); + } + } + } + + .moveIconDown { + transform: rotate(180deg); + } } .descriptionBlock { diff --git a/src/components/Article/AudioPlayer/AudioPlayer.tsx b/src/components/Article/AudioPlayer/AudioPlayer.tsx index 10ff45b3..3954965d 100644 --- a/src/components/Article/AudioPlayer/AudioPlayer.tsx +++ b/src/components/Article/AudioPlayer/AudioPlayer.tsx @@ -11,6 +11,7 @@ type Props = { body?: string editorMode?: boolean onMediaItemFieldChange?: (index: number, field: keyof MediaItem, value: string) => void + onChangeMediaIndex?: (direction: 'up' | 'down', index) => void } const getFormattedTime = (point) => new Date(point * 1000).toISOString().slice(14, -5) @@ -159,6 +160,7 @@ export const AudioPlayer = (props: Props) => { props.onChangeMediaIndex(direction, index)} isPlaying={isPlaying()} media={props.media} currentTrackIndex={currentTrackIndex()} diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx index 5c5bb9cc..46e2a4bf 100644 --- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx +++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx @@ -18,6 +18,7 @@ type Props = { body?: string editorMode?: boolean onMediaItemFieldChange?: (index: number, field: keyof MediaItem, value: string) => void + onChangeMediaIndex?: (direction: 'up' | 'down', index) => void } export const PlayerPlaylist = (props: Props) => { @@ -72,6 +73,34 @@ export const PlayerPlaylist = (props: Props) => {
+ + + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} + + {(triggerRef: (el) => void) => ( diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index a74c9484..5531cd31 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -190,12 +190,6 @@ export const FullArticle = (props: ArticleProps) => {
- 0 && props.article.layout === 'audio'}> -
- -
-
-
}> diff --git a/src/components/Editor/AudioUploader/AudioUploader.tsx b/src/components/Editor/AudioUploader/AudioUploader.tsx index ed0e4c07..b7a136c0 100644 --- a/src/components/Editor/AudioUploader/AudioUploader.tsx +++ b/src/components/Editor/AudioUploader/AudioUploader.tsx @@ -2,8 +2,8 @@ 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, UploadedFile } from '../../../pages/types' +import { Show } from 'solid-js' +import { MediaItem } from '../../../pages/types' import { composeMediaItems } from '../../../utils/composeMediaItems' import { AudioPlayer } from '../../Article/AudioPlayer' import { Buffer } from 'buffer' @@ -20,6 +20,7 @@ type Props = { } onAudioChange: (index: number, value: MediaItem) => void onAudioAdd: (value: MediaItem[]) => void + onAudioSorted: (value: MediaItem[]) => void } export const AudioUploader = (props: Props) => { @@ -29,6 +30,18 @@ export const AudioUploader = (props: Props) => { props.onAudioChange(index, { ...props.audio[index], [field]: value }) } + const handleChangeIndex = (direction: 'up' | 'down', index: number) => { + const media = [...props.audio] + if (direction === 'up' && index > 0) { + const copy = media.splice(index, 1)[0] + media.splice(index - 1, 0, copy) + } else if (direction === 'down' && index < media.length - 1) { + const copy = media.splice(index, 1)[0] + media.splice(index + 1, 0, copy) + } + props.onAudioSorted(media) + } + return (
0}> @@ -36,6 +49,7 @@ export const AudioUploader = (props: Props) => { editorMode={true} media={props.audio} onMediaItemFieldChange={handleMediaItemFieldChange} + onChangeMediaIndex={handleChangeIndex} /> { const newMedia = [...mediaItems(), ...data] setForm('media', JSON.stringify(newMedia)) } - const handleSortedImages = (data) => { + const handleSortedMedia = (data) => { setForm('media', JSON.stringify(data)) } @@ -244,6 +244,10 @@ export const EditView = (props: Props) => { onChange={(event) => handleBaseFieldsChange('artist', event.target.value)} /> { onImageChange={handleMediaChange} onImageDelete={(index) => handleImageDelete(index)} onImagesAdd={(value) => handleAddMedia(value)} - onImagesSorted={(value) => handleSortedImages(value)} + onImagesSorted={(value) => handleSortedMedia(value)} /> @@ -341,6 +345,7 @@ export const EditView = (props: Props) => { baseFields={baseAudioFields()} onAudioAdd={(value) => handleAddMedia(value)} onAudioChange={handleMediaChange} + onAudioSorted={(value) => handleSortedMedia(value)} /> @@ -387,7 +392,7 @@ export const EditView = (props: Props) => { {/* />*/} {/*
*/} -

Темы

+

{t('Topics')}

{/*

*/} {/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/} {/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/} diff --git a/src/components/_shared/SolidSwiper/SolidSwiper.tsx b/src/components/_shared/SolidSwiper/SolidSwiper.tsx index 97e3be50..28e4ddb0 100644 --- a/src/components/_shared/SolidSwiper/SolidSwiper.tsx +++ b/src/components/_shared/SolidSwiper/SolidSwiper.tsx @@ -295,7 +295,7 @@ export const SolidSwiper = (props: Props) => {

handleChangeIndex('right', index())} >