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

<KoenigCard
    @env={{@env}}
    @class={{concat (kg-style "container-card") " kg-video-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 style="display:flex">
        <div style="width: 150px;">
            {{#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|
                >
                    <div class="relative{{unless @payload.src " bg-whitegrey-l2"}}">
                        {{#if (or uploader.errors uploader.isUploading)}}
                            <div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder ba b--whitegrey" "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="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
                                {{#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="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerAudioFileDialog}}>
                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
                                    </button>
                                {{/if}}
                            </div>
                        {{/if}}
                    </div>

                    <div style="display:none">
                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.audioMimeTypes}} @onInsert={{this.registerAudioFileInput}} />
                    </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{{unless @payload.thumbnailSrc " bg-whitegrey-l2"}}">

                        {{#if (or uploader.errors uploader.isUploading)}}
                            <div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder ba b--whitegrey" "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="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
                                        {{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
                                    </button>
                                {{else}}
                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-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="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
                                {{#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="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
                                        <img src={{@payload.thumbnailSrc}} style="width: 150px" />
                                    </button>
                                {{else}}
                                    <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
                                        {{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
                                    </button>
                                {{/if}}
                            </div>
                        {{/if}}
                    </div>
                    <div style="display:none">
                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} @onInsert={{this.registerAudioThumbnailFileInput}} />
                    </div>
                </GhUploader>

            {{/if}}
        </div>
        {{#if @payload.src}}
            <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>
        {{else}}
            <div style="flex-grow: 1;display: flex;align-items: center;margin-left: 12px;line-height:3rem">
                Click to upload an audio file
            </div>
        {{/if}}
    </div>

    {{#if (and @isEditing @payload.src)}}
        <KoenigSettingsPanel>
            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                <label class="kg-settings-panel-control-label" for="loop-toggle">Loop</label>
                <div class="kg-settings-panel-control-input">
                    <div class="for-switch x-small">
                        <label class="switch">
                            <input type="checkbox" class="gh-input" id="loop-toggle" checked={{@payload.loop}} {{on "input" this.toggleLoop}}>
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
        </KoenigSettingsPanel>
    {{/if}}
</KoenigCard>