Fix public page crash due to audio player, fix unpause in audio player (#11652)
This commit is contained in:
parent
aa6b5b42df
commit
e72bac7576
3 changed files with 9 additions and 3 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue