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

<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"
                    @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"}}
                                {{!-- <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 true}}
                                <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}}
                        {{/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>