mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 02:41:50 +03:00
2b2edf48ef
refs https://github.com/TryGhost/Team/issues/1230 - updates player ui in audio card to use same html as theme - removes setting panel for audio card
211 lines
12 KiB
Handlebars
211 lines
12 KiB
Handlebars
<KoenigCard
|
|
@env={{@env}}
|
|
@class={{concat (kg-style "media-card") " kg-card kg-audio-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
|
|
@headerOffset={{@headerOffset}}
|
|
@toolbar={{this.toolbar}}
|
|
@payload={{@payload}}
|
|
@isSelected={{@isSelected}}
|
|
@isEditing={{@isEditing}}
|
|
@selectCard={{@selectCard}}
|
|
@deselectCard={{@deselectCard}}
|
|
@editCard={{@editCard}}
|
|
@hasEditMode={{not this.isEmpty}}
|
|
@saveCard={{@saveCard}}
|
|
@saveAsSnippet={{@saveAsSnippet}}
|
|
@addParagraphAfterCard={{@addParagraphAfterCard}}
|
|
@moveCursorToPrevSection={{@moveCursorToPrevSection}}
|
|
@moveCursorToNextSection={{@moveCursorToNextSection}}
|
|
@editor={{@editor}}
|
|
{{did-insert this.didInsert}}
|
|
{{on "dragover" this.dragOver}}
|
|
{{on "dragleave" this.dragLeave}}
|
|
{{on "drop" this.drop}}
|
|
as |card|
|
|
>
|
|
<div class="kg-audio-container">
|
|
<div class="kg-media-container">
|
|
{{#if (not @payload.src)}}
|
|
<GhUploader
|
|
@uploadUrl="/media/upload/"
|
|
@resourceName="media"
|
|
@files={{this.files}}
|
|
@accept={{this.audioMimeTypes}}
|
|
@extensions={{this.audioExtensions}}
|
|
@onStart={{this.audioUploadStarted}}
|
|
@onComplete={{this.audioUploadCompleted}}
|
|
@onFailed={{this.audioUploadFailed}}
|
|
as |uploader|
|
|
>
|
|
{{#if (or uploader.errors uploader.isUploading)}}
|
|
<div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder" "absolute absolute--fill bg-white-50"}}">
|
|
{{#if uploader.errors}}
|
|
<span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
|
|
{{uploader.errors.firstObject.message}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
<div class="kg-media-placeholder">
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else}}
|
|
<button class="kg-audio-button" {{on "click" this.triggerAudioFileDialog}}>
|
|
{{svg-jar "audio-upload" class="kg-placeholder-audio"}}
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.audioMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
/>
|
|
</div>
|
|
</GhUploader>
|
|
|
|
{{else}}
|
|
<GhUploader
|
|
@uploadUrl="/media/thumbnail/upload/"
|
|
@resourceName="media"
|
|
@requestMethod="put"
|
|
@accept={{this.imageMimeTypes}}
|
|
@extensions={{this.imageExtensions}}
|
|
@onStart={{this.audioThumbnailUploadStarted}}
|
|
@onComplete={{this.audioThumbnailUploadCompleted}}
|
|
@onFailed={{this.audioThumbnailUploadFailed}}
|
|
@paramsHash={{hash url=@payload.src}}
|
|
as |uploader|
|
|
>
|
|
<div class="relative">
|
|
|
|
{{#if (or uploader.errors uploader.isUploading)}}
|
|
<div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder" "absolute absolute--fill bg-white-50"}}">
|
|
{{#if uploader.errors}}
|
|
<span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
|
|
{{uploader.errors.firstObject.message}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else if (not @payload.thumbnailSrc)}}
|
|
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
{{svg-jar "audio-upload" class="kg-placeholder-audio"}}
|
|
{{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
|
|
</button>
|
|
{{else}}
|
|
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
<img src={{@payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
|
|
{{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
|
|
</button>
|
|
{{#if this.isDraggedOver}}
|
|
<div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
|
|
<span class="db center sans-serif fw7 f7 white">
|
|
Drop to replace thumbnail
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
<div class="kg-media-placeholder">
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else if @payload.thumbnailSrc}}
|
|
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
<img src={{@payload.thumbnailSrc}} style="width: 150px" />
|
|
</button>
|
|
{{else}}
|
|
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
{{svg-jar "audio-upload" class="kg-placeholder-audio"}}
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.imageMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
/>
|
|
</div>
|
|
</GhUploader>
|
|
|
|
{{/if}}
|
|
</div>
|
|
{{#if @payload.src}}
|
|
<div style="flex-grow: 1;">
|
|
<div style="flex-grow: 1;display: flex;justify-content: center;margin-left: 12px;line-height:3rem">
|
|
<GhTextInput
|
|
@value={{@payload.fileName}}
|
|
@input={{action "setAudioTitle" value="target.value"}}
|
|
@class="w-100 fw4 bn bg-transparent bw0"
|
|
style="border-width: 0"
|
|
/>
|
|
</div>
|
|
<div class="kg-player-container">
|
|
<div class="kg-player">
|
|
<button class="kg-audio-play-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="kg-audio-pause-icon kg-audio-hide">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
|
|
<rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
|
|
</svg>
|
|
</button>
|
|
<span class="kg-audio-current-time">0:10</span>
|
|
<div class="kg-audio-time">
|
|
/<span class="kg-audio-duration">3:20</span>
|
|
</div>
|
|
<input type="range" class="kg-audio-seek-slider" max="100" value="10">
|
|
<button class="kg-audio-playback-rate">1×</button>
|
|
<button class="kg-audio-unmute-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="kg-audio-mute-icon kg-audio-hide">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"/>
|
|
</svg>
|
|
</button>
|
|
<input type="range" class="kg-audio-volume-slider" max="100" value="70">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="kg-placeholder-text">
|
|
Click to upload an audio file
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</KoenigCard>
|