Skip to content

GitLab

Commit 84b72d96 authored by Яков's avatar Яков
Browse files

update fix issue

parent 92146eaf
Show whitespace changes
Inline Side-by-side
package.json
View file @ 84b72d96
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.1.71", "version": "1.1.72",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/QEditor.jsx
View file @ 84b72d96
...@@ -237,7 +237,9 @@ const QEditor = ({ ...@@ -237,7 +237,9 @@ const QEditor = ({
const [suggestedLoading, setSuggestedLoading] = useState(false) const [suggestedLoading, setSuggestedLoading] = useState(false)
const [suggestPage, setSuggestPage] = useState(1) const [suggestPage, setSuggestPage] = useState(1)
const [suggestTotal, setSuggestTotal] = useState(0) const [suggestTotal, setSuggestTotal] = useState(0)
const SUGGEST_LIMIT = 20 const SUGGEST_LIMIT = innerModalType === 'video' ? 8 : 20
const [playingAudio, setPlayingAudio] = useState(null)
const audioRefs = useRef({})
let formRef = useRef(null); let formRef = useRef(null);
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
...@@ -292,6 +294,9 @@ const QEditor = ({ ...@@ -292,6 +294,9 @@ const QEditor = ({
setSuggestPage(1) setSuggestPage(1)
setSuggestTotal(0) setSuggestTotal(0)
setSuggestedFiles([]) setSuggestedFiles([])
setPlayingAudio(null)
Object.values(audioRefs.current).forEach(el => { if (el) el.pause() })
audioRefs.current = {}
}, [innerModalType]) }, [innerModalType])
useEffect(() => { useEffect(() => {
...@@ -996,7 +1001,7 @@ const QEditor = ({ ...@@ -996,7 +1001,7 @@ const QEditor = ({
return ( return (
<div className='atma-editor-suggest'> <div className='atma-editor-suggest'>
<div className='atma-editor-suggest-title'>Ранее загруженные файлы</div> <div className='atma-editor-suggest-title'>Ранее загруженные файлы</div>
<div className='atma-editor-suggest-list'> <div className={'atma-editor-suggest-list' + (isVideo ? ' is-video' : '')}>
{suggestedFiles.map((file, i) => { {suggestedFiles.map((file, i) => {
const uid = 'suggest_' + file.path const uid = 'suggest_' + file.path
const isSelected = uploadedPaths.some(p => p.uid === uid) const isSelected = uploadedPaths.some(p => p.uid === uid)
...@@ -1023,15 +1028,62 @@ const QEditor = ({ ...@@ -1023,15 +1028,62 @@ const QEditor = ({
) )
} }
const thumbnail = !isAudio && !isFileType ? file.path : null if (isAudio) {
const isPlaying = playingAudio === uid
return (
<div
key={'suggest' + i}
className={'atma-editor-suggest-item is-audio' + (isSelected ? ' selected' : '')}
>
<audio
ref={el => { audioRefs.current[uid] = el }}
src={file.path}
onEnded={() => setPlayingAudio(null)}
onPause={() => {
if (playingAudio === uid) setPlayingAudio(null)
}}
/>
<button
type='button'
className={'atma-editor-suggest-audio-btn' + (isPlaying ? ' playing' : '')}
title={isPlaying ? 'Пауза' : 'Воспроизвести'}
onClick={(e) => {
e.stopPropagation()
const el = audioRefs.current[uid]
if (!el) return
if (isPlaying) {
el.pause()
} else {
Object.entries(audioRefs.current).forEach(([key, ref]) => {
if (key !== uid && ref) ref.pause()
})
el.play()
setPlayingAudio(uid)
}
}}
/>
<span
className='atma-editor-suggest-item-name'
onClick={() => toggleSelect(file, uid)}
>{file.name}</span>
<button
type='button'
className={'atma-editor-suggest-select-btn' + (isSelected ? ' selected-mark' : '')}
title={isSelected ? 'Снять выбор' : 'Выбрать'}
onClick={() => toggleSelect(file, uid)}
/>
</div>
)
}
const thumbnail = !isFileType ? file.path : null
return ( return (
<div <div
key={'suggest' + i} key={'suggest' + i}
className={ className={
'atma-editor-suggest-item' + 'atma-editor-suggest-item' +
(isSelected ? ' selected' : '') + (isSelected ? ' selected' : '') +
(isFileType ? ' is-file' : '') + (isFileType ? ' is-file' : '')
(isAudio ? ' is-audio' : '')
} }
style={thumbnail ? { backgroundImage: `url(${thumbnail})` } : {}} style={thumbnail ? { backgroundImage: `url(${thumbnail})` } : {}}
title={file.name} title={file.name}
......
src/index.scss
View file @ 84b72d96
...@@ -924,6 +924,11 @@ body{ ...@@ -924,6 +924,11 @@ body{
max-height: min(280px, calc(90dvh - 440px)); max-height: min(280px, calc(90dvh - 440px));
overflow-y: auto; overflow-y: auto;
padding-right: 4px; padding-right: 4px;
&.is-video{
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
max-height: min(400px, calc(90dvh - 440px));
}
} }
&-item{ &-item{
...@@ -962,7 +967,24 @@ body{ ...@@ -962,7 +967,24 @@ body{
} }
} }
&.is-audio, &.is-audio{
aspect-ratio: auto;
width: 100%;
height: auto;
background-image: none !important;
background-color: #F5F7FA;
display: flex;
align-items: center;
padding: 6px 8px;
gap: 8px;
grid-column: 1 / -1;
cursor: default;
&:hover{
box-shadow: none;
}
}
&.is-file{ &.is-file{
aspect-ratio: auto; aspect-ratio: auto;
width: 100%; width: 100%;
...@@ -1045,6 +1067,63 @@ body{ ...@@ -1045,6 +1067,63 @@ body{
} }
} }
&-audio-btn{
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background-color: #1790FF;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s;
&::after{
content: '';
display: block;
// play triangle
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #fff;
margin-left: 2px;
}
&.playing::after{
// pause bars
width: 9px;
height: 10px;
border: none;
margin-left: 0;
background: linear-gradient(to right, #fff 0, #fff 3px, transparent 3px, transparent 6px, #fff 6px, #fff 9px);
border-radius: 1px;
}
&:hover{
background-color: #0d7ee8;
}
}
.is-audio &-select-btn{
position: static;
flex-shrink: 0;
margin-left: auto;
background-color: #CCD1D9;
border-color: #fff;
&.selected-mark{
background-color: #1790FF;
border-color: #1790FF;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%203l2%202%204-4%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: center;
}
}
&-pagination{ &-pagination{
display: flex; display: flex;
align-items: center; align-items: center;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment