@@ -84,6 +84,7 @@ class Audio extends React.PureComponent { | |||||
if (this.wavesurfer) { | if (this.wavesurfer) { | ||||
this.wavesurfer.destroy(); | this.wavesurfer.destroy(); | ||||
this.loaded = false; | |||||
} | } | ||||
const wavesurfer = WaveSurfer.create({ | const wavesurfer = WaveSurfer.create({ | ||||
@@ -100,8 +101,10 @@ class Audio extends React.PureComponent { | |||||
if (preload) { | if (preload) { | ||||
wavesurfer.load(src); | wavesurfer.load(src); | ||||
this.loaded = true; | |||||
} else { | } else { | ||||
wavesurfer.load(src, arrayOf(1, 0.5), null, duration); | wavesurfer.load(src, arrayOf(1, 0.5), null, duration); | ||||
this.loaded = false; | |||||
} | } | ||||
wavesurfer.on('ready', () => this.setState({ duration: Math.floor(wavesurfer.getDuration()) })); | wavesurfer.on('ready', () => this.setState({ duration: Math.floor(wavesurfer.getDuration()) })); | ||||
@@ -116,15 +119,18 @@ class Audio extends React.PureComponent { | |||||
togglePlay = () => { | togglePlay = () => { | ||||
if (this.state.paused) { | if (this.state.paused) { | ||||
if (!this.props.preload) { | |||||
if (!this.props.preload && !this.loaded) { | |||||
this.wavesurfer.createBackend(); | this.wavesurfer.createBackend(); | ||||
this.wavesurfer.createPeakCache(); | this.wavesurfer.createPeakCache(); | ||||
this.wavesurfer.load(this.props.src); | this.wavesurfer.load(this.props.src); | ||||
this.loaded = true; | |||||
} | } | ||||
this.wavesurfer.play(); | this.wavesurfer.play(); | ||||
this.setState({ paused: false }); | |||||
} else { | } else { | ||||
this.wavesurfer.pause(); | this.wavesurfer.pause(); | ||||
this.setState({ paused: true }); | |||||
} | } | ||||
} | } | ||||
@@ -33,7 +33,7 @@ | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- elsif status.media_attachments.first.audio? | - elsif status.media_attachments.first.audio? | ||||
- audio = status.media_attachments.first | - audio = status.media_attachments.first | ||||
= react_component :audio, src: audio.file.url(:original), height: 130, alt: audio.description, preload: true, duration: audio.meta.dig(:original, :duration) do | |||||
= react_component :audio, src: audio.file.url(:original), height: 130, alt: audio.description, preload: true, duration: audio.file.meta.dig(:original, :duration) do | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- else | - else | ||||
= react_component :media_gallery, height: 380, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | = react_component :media_gallery, height: 380, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | ||||
@@ -37,7 +37,7 @@ | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- elsif status.media_attachments.first.audio? | - elsif status.media_attachments.first.audio? | ||||
- audio = status.media_attachments.first | - audio = status.media_attachments.first | ||||
= react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.meta.dig(:original, :duration) do | |||||
= react_component :audio, src: audio.file.url(:original), height: 110, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) do | |||||
= render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments } | ||||
- else | - else | ||||
= react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | = react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do | ||||