Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs
2021-12-08 17:29:22 +00:00

119 lines
6.0 KiB
Handlebars

<KoenigCard
@env={{@env}}
@class={{concat (kg-style "media-card") " kg-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|
>
<GhUploader
@uploadUrl="/media/upload/"
@resourceName="media"
@files={{this.files}}
@accept={{this.videoMimeTypes}}
@extensions={{this.videoExtensions}}
@onStart={{this.videoUploadStarted}}
@onComplete={{this.videoUploadCompleted}}
@onFailed={{this.videoUploadFailed}}
as |uploader|
>
<div class="relative{{unless (or this.previewThumbnailSrc @payload.thumbnailSrc) " bg-whitegrey-l2"}}">
{{#if (or this.previewThumbnailSrc @payload.thumbnailSrc)}}
<img src={{or this.previewThumbnailSrc @payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
{{#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 video
</span>
</div>
{{/if}}
{{/if}}
{{#if (or uploader.errors uploader.isUploading (not @payload.src))}}
<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}}
{{else if (not this.previewThumbnailSrc @payload.src)}}
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" {{on "click" this.triggerVideoFileDialog}}>
{{svg-jar "film-camera" class="kg-placeholder-video"}}
<span class="mt4 kg-placeholder-text">Click to select a video</span>
</button>
{{/if}}
</div>
{{/if}}
</div>
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.videoMimeTypes}} @onInsert={{this.registerVideoFileInput}} />
</div>
</GhUploader>
{{#if (or @isSelected (clean-basic-html @payload.caption))}}
<card.CaptionInput
@caption={{@payload.caption}}
@update={{fn this.updatePayloadAttr "caption"}}
@placeholder="Type caption for video (optional)" />
{{/if}}
</KoenigCard>
{{#if (and @isEditing @payload.src)}}
<KoenigSettingsPanel>
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
<div class="kg-settings-panel-control-label">Video width</div>
<div class="kg-settings-panel-control-input">
<div class="gh-btn-group icons">
<button type="button" title="Regular" class="gh-btn gh-btn-icon {{if (not @payload.cardWidth) "gh-btn-group-selected"}}" {{on "click" (fn this.updatePayloadAttr "cardWidth" null)}}><span>{{svg-jar "koenig/kg-img-regular" class="fill-darkgrey"}}</span></button>
<button type="button" title="Wide" class="gh-btn gh-btn-icon {{if (eq @payload.cardWidth "wide") "gh-btn-group-selected"}}" {{on "click" (fn this.updatePayloadAttr "cardWidth" "wide")}}><span>{{svg-jar "koenig/kg-img-wide" class="fill-darkgrey"}}</span></button>
<button type="button" title="Full" class="gh-btn gh-btn-icon {{if (eq @payload.cardWidth "full") "gh-btn-group-selected"}}" {{on "click" (fn this.updatePayloadAttr "cardWidth" "full")}}><span>{{svg-jar "koenig/kg-img-full" class="fill-darkgrey"}}</span></button>
</div>
</div>
</div>
<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>
<div class="kg-settings-panel-control-info video">Autoplay your video on a loop without sound.</div>
<div class="kg-settings-panel-control">
<label class="kg-settings-panel-control-label" for="button-url-input">Poster image</label>
<div class="kg-settings-panel-control-input">
</div>
</div>
</KoenigSettingsPanel>
{{/if}}