mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 10:53:34 +03:00
3231abd0ae
refs https://github.com/TryGhost/Team/issues/1229 - mostly mirrors image card functionality but rebuilt with more modern syntax - when uploading a video the size and duration is extracted along with a screen capture of the video from 0.5s in, the screen capture is uploaded once the video finishes because we need to use the uploaded video url as a reference to attach it as a thumbnail via the API - the captured screenshot is currently what's shown in the card To be implemented: - "incomplete" state when video has been uploaded but not a thumbnail - uploader in settings panel to change the video thumbnail - play button overlay _or_ switch to `<video>` so it can be previewed
119 lines
5.5 KiB
Handlebars
119 lines
5.5 KiB
Handlebars
<KoenigCard
|
|
@tagName="figure"
|
|
@class={{concat (kg-style (if (eq this.imageSelector.type "placeholder") "media-card-placeholder" "media-card")) " " (kg-style "breakout" size=this.payload.cardWidth) " flex flex-column"}}
|
|
@showSelectedOutline={{not-eq this.imageSelector.type "placeholder"}}
|
|
@isSelected={{this.isSelected}}
|
|
@isEditing={{this.isEditing}}
|
|
@selectCard={{action this.selectCard}}
|
|
@deselectCard={{action this.deselectCard}}
|
|
@editCard={{action this.editCard}}
|
|
@saveAsSnippet={{if this.payload.src this.saveAsSnippet}}
|
|
@toolbar={{this.toolbar}}
|
|
@hasEditMode={{false}}
|
|
@onDeselect={{action "onDeselect"}}
|
|
@addParagraphAfterCard={{this.addParagraphAfterCard}}
|
|
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
|
|
@moveCursorToNextSection={{this.moveCursorToNextSection}}
|
|
@editor={{this.editor}}
|
|
as |card|
|
|
>
|
|
{{#if (eq this.imageSelector.type "placeholder")}}
|
|
{{!-- image selector placeholder (eg, gif browser) --}}
|
|
{{component this.imageSelector.component
|
|
searchTerm=this.payload.searchTerm
|
|
select=(action "selectFromImageSelector")
|
|
close=(action "closeImageSelector")}}
|
|
{{else}}
|
|
{{!-- standard image upload placeholder --}}
|
|
<GhUploader
|
|
@files={{this.files}}
|
|
@accept={{this.imageMimeTypes}}
|
|
@extensions={{this.imageExtensions}}
|
|
@onStart={{action "setPreviewSrc"}}
|
|
@onComplete={{action "updateSrc"}}
|
|
@onFailed={{action "resetSrcs"}}
|
|
as |uploader|
|
|
>
|
|
<div class="relative{{unless (or this.previewSrc this.payload.src) " bg-whitegrey-l2"}}">
|
|
{{#if (or this.previewSrc this.payload.src)}}
|
|
<img src={{or this.previewSrc this.payload.src}} class="{{kg-style this.kgImgStyle sidebar=this.ui.hasSideNav}}" alt={{this.payload.alt}}>
|
|
{{#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 image
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if (or uploader.errors uploader.isUploading (not this.payload.src))}}
|
|
<div class="relative miw-100 flex items-center {{if (not this.previewSrc this.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.previewSrc this.payload.src)}}
|
|
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" onclick={{action "triggerFileDialog"}}>
|
|
{{svg-jar this.placeholder class="kg-placeholder-image"}}
|
|
<span class="mt2 midgrey">Click to select an image</span>
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div style="display:none">
|
|
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} />
|
|
</div>
|
|
</GhUploader>
|
|
|
|
{{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
|
|
{{#if this.isEditingAlt}}
|
|
<card.AltInput
|
|
@alt={{this.payload.alt}}
|
|
@update={{this.updateAlt}}
|
|
@placeholder="Type alt text for image (optional)" />
|
|
{{else}}
|
|
<card.CaptionInput
|
|
@caption={{this.payload.caption}}
|
|
@update={{this.updateCaption}}
|
|
@placeholder="Type caption for image (optional)" />
|
|
{{/if}}
|
|
|
|
{{#if this.isSelected}}
|
|
<button
|
|
title="Toggle between editing alt text and caption"
|
|
class="absolute right-0 bottom-0 ma2 pl1 pr1 ba br3 f8 sans-serif fw4 lh-title tracked-2 {{if this.isEditingAlt "bg-green b--green white" "bg-white b--midlightgrey midlightgrey"}}"
|
|
{{on "click" this.toggleAltEditing passive=true}}
|
|
>
|
|
Alt
|
|
</button>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if (eq this.imageSelector.type "modal")}}
|
|
{{component this.imageSelector.component
|
|
searchTerm=this.payload.searchTerm
|
|
select=(action "selectFromImageSelector")
|
|
close=(action "closeImageSelector")}}
|
|
{{/if}}
|
|
</KoenigCard>
|
|
|
|
{{#if this.isEditingLink}}
|
|
<KoenigLinkInput
|
|
@source="direct"
|
|
@href={{this.payload.href}}
|
|
@linkRect={{this.linkRect}}
|
|
@update={{action "updateHref"}}
|
|
@cancel={{action "cancelEditLink"}}
|
|
/>
|
|
{{/if}} |