Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs

187 lines
8.9 KiB
Handlebars
Raw Normal View History

<KoenigCard
@env={{@env}}
@class={{"ba b--transparent relative kg-card-hover 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|
>
{{#if @payload.src}}
<div class="kg-audio-container">
<div class="kg-media-container">
<GhUploader
@uploadUrl="/media/thumbnail/upload/"
@resourceName="media"
@files={{this.thumbnailFiles}}
@requestMethod="put"
@accept={{this.imageMimeTypes}}
@extensions={{this.imageExtensions}}
@onStart={{this.audioThumbnailUploadStarted}}
@onComplete={{this.audioThumbnailUploadCompleted}}
@onFailed={{this.audioThumbnailUploadFailed}}
@paramsHash={{hash url=@payload.src}}
as |uploader|
>
{{#if (or uploader.errors uploader.isUploading)}}
{{#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="fw6 f7 white lh-1">
Drop it 🔥
</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"}}
</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>
{{!-- <div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
<span class="fw6 f7 white">
Drop to replace thumbnail
</span>
</div> --}}
{{/if}}
{{else}}
{{#if this.isDraggedOver}}
<span class="fw6 f7 white lh-1">
Drop it 🔥
</span>
{{else if uploader.isUploading}}
{{uploader.progressBar}}
{{else if @payload.thumbnailSrc}}
<div class="kg-audio-button">
<img src={{@payload.thumbnailSrc}} />
<div class="image-overlay">
<div class="flex flex-row-reverse">
<button class="bg-white-90 br3 pe-auto" {{on "click" this.triggerThumbnailFileDialog}}>
{{svg-jar "koenig/kg-replace" class="koenig-audio-replace-icon fill-darkgrey"}}
</button>
</div>
</div>
</div>
{{else}}
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
{{svg-jar "audio-file" class="kg-audio-icon"}}
<div class="image-overlay">
<div class="flex flex-row-reverse">
<button class="bg-white-90 br3 pe-auto" {{on "click" this.triggerThumbnailFileDialog}}>
{{svg-jar "upload" class="koenig-audio-upload-icon"}}
</button>
</div>
</div>
</button>
{{/if}}
{{/if}}
<div style="display:none">
<GhFileInput
@multiple={{false}}
@action={{uploader.setFiles}}
@accept={{this.imageMimeTypes}}
@onInsert={{uploader.registerFileInput}}
/>
</div>
</GhUploader>
</div>
<div class="kg-player-container">
<GhTextInput
@value={{@payload.fileName}}
@input={{action "setAudioTitle" value="target.value"}}
@class="kg-audio-title"
/>
<div class="kg-player">
<button class="kg-audio-play-icon">{{svg-jar "play"}}</button>
<button class="kg-audio-pause-icon kg-audio-hide">{{svg-jar "pause"}}</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&#215;</button>
<button class="kg-audio-unmute-icon">{{svg-jar "unmute"}}</button>
<button class="kg-audio-mute-icon kg-audio-hide">{{svg-jar "mute"}}</button>
<input type="range" class="kg-audio-volume-slider" max="100" value="70">
</div>
</div>
</div>
{{else}}
<div class="kg-audio-container kg-audio-container-empty" {{on "click" this.triggerAudioFileDialog}}>
<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)}}
{{#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}}
{{else}}
{{#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}}
{{svg-jar "audio-upload"}}
<span class="kg-placeholder-text">
Click to upload an audio file
</span>
{{/if}}
{{/if}}
<div style="display:none">
<GhFileInput
@multiple={{false}}
@action={{uploader.setFiles}}
@accept={{this.audioMimeTypes}}
@onInsert={{uploader.registerFileInput}}
/>
</div>
</GhUploader>
</div>
{{/if}}
</KoenigCard>