-
-
Notifications
You must be signed in to change notification settings - Fork 121
Embed Video missing HTML definition for block with type placeholder #220
Comments
Hi , please add the error trace & hopefully an application example to test (codepen , stackblitz) |
Hi @michelson , In this URL codesandbox you can find the error when you click to add a Video thanks |
Also is the code of this page public I would like to give a look https://michelson.github.io/dante2/#/ |
I get this file as starting point image.js I want to create video uploader, my question is how can I allow to select video files ex mp4 thanks |
You have to enable the add button which is the element which triggers the upload search.-
you have to add |
@michelson I have one button for Image and other for Video, is it possible to tell video select button to use video/mp4 and the image button to keep with Image files |
yes |
@michelson How can I do it, I'm trying to figure out
And video.js I have
I tried to. have |
in widgetOptions try `insertion: "upload",` instead of `insertion:
"insertion",`
…On Mon, Apr 20, 2020 at 10:12 AM indigofa ***@***.***> wrote:
@michelson <https://github.com/michelson> How can I do it, I'm trying to
figure out
Now I have in Dante Component
widgets={[
ImageBlockConfig({
options: {
upload_handler: handleUploadContentMediaHander,
},
}),
VideoBlockConfig(),
]}
And video.js I have
import React from "react"
import { addNewBlockAt } from "./model"
export default class VideoBlock extends React.Component {
constructor(props) {
super(props)
this.state = {
enabled: false,
data: this.props.blockProps.data.toJS(),
}
}
componentDidMount() {}
render() {
return <div>DEMO</div>
}
}
export function customIcon() {
return (
<svg
className="icon-signature"
width="20px"
height="20px"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#494B56"
fillRule="nonzero"
d="M9.9347554,11.8295455 C9.795059,11.8295455 9.68330189,11.7113637 9.68330189,11.5636364 L9.68330189,10.3522727 C9.68330189,10.3375 9.68330189,10.3227273 9.68330189,10.3079546 C10.2839964,9.7909091 10.6611767,9.00795455 10.6611767,8.13636364 L10.6611767,6.80681819 C10.6611767,5.25568182 9.47375729,4 8.00694511,4 C6.54013294,4 5.35271355,5.25568182 5.35271355,6.80681819 L5.35271355,8.13636364 C5.35271355,9.00795455 5.72989382,9.7909091 6.33058833,10.3079546 C6.33058833,10.3227273 6.33058833,10.3375 6.33058833,10.3522727 L6.33058833,11.5636364 C6.33058833,11.7113637 6.21883121,11.8295455 6.07913482,11.8295455 C3.83002281,11.8295455 2,13.7647727 2,16.1431819 C2,16.6159091 2.36321064,17 2.81023911,17 L13.1896814,17 C13.6367099,17 13.9999205,16.6159091 13.9999205,16.1431819 C14.0138902,13.7647727 12.1838674,11.8295455 9.9347554,11.8295455 Z M6.19089194,8.13636364 L6.19089194,6.80681819 C6.19089194,5.74318183 7.00113105,4.88636364 8.00694511,4.88636364 C9.01275918,4.88636364 9.82299828,5.74318183 9.82299828,6.80681819 L9.82299828,8.13636364 C9.82299828,9.20000001 9.01275918,10.0568182 8.00694511,10.0568182 C7.00113105,10.0568182 6.19089194,9.20000001 6.19089194,8.13636364 Z M2.83817839,16.1136363 C2.85214803,14.2375 4.29102093,12.7159091 6.07913482,12.7159091 C6.67982933,12.7159091 7.16876672,12.1988637 7.16876672,11.5636364 L7.16876672,10.7954546 C7.43418988,10.8840909 7.71358268,10.9431818 8.00694511,10.9431818 C8.30030755,10.9431818 8.57970034,10.8840909 8.8451235,10.7954546 L8.8451235,11.5488637 C8.8451235,12.1840909 9.33406089,12.7011364 9.9347554,12.7011364 C11.7228693,12.7159091 13.1617422,14.2375 13.1757119,16.1136363 L2.83817839,16.1136363 Z"
></path>
<rect
fill="#494B56"
fillRule="nonzero"
x="13"
y="6"
width="6"
height="1"
></rect>
<rect
fill="#494B56"
fillRule="nonzero"
x="13"
y="8"
width="6"
height="1"
></rect>
<rect
fill="#494B56"
fillRule="nonzero"
x="13"
y="10"
width="6"
height="1"
></rect>
</svg>
)
}
export const VideoBlockConfig = (options = {}) => {
let config = {
title: "add a video",
type: "video",
icon: customIcon,
block: VideoBlock,
editable: false,
renderable: true,
breakOnContinuous: true,
wrapper_class: "graf graf--figure",
selected_class: "is-selected is-mediaFocused",
handleEnterWithoutText(ctx, block) {
const { editorState } = ctx.state
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
},
handleEnterWithText(ctx, block) {
const { editorState } = ctx.state
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
},
widget_options: {
displayOnInlineTooltip: true,
insertion: "insertion",
insert_block: "video",
},
options: {},
}
return Object.assign(config, options)
}
I tried to. have <input type="file" /> instead of icon, but this way is
not working, as soon as i click the icon its rendering return
<div>DEMO</div>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#220 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAAC5SCTLVO36KIEP7OFFI3RNRJ5NANCNFSM4MKYR6FA>
.
|
@michelson If I change insertion: "insertion" to insertion: "upload", the component automatically is rendering the Image ( it became as it is Image Uploder ), I don't know how can I use something like addButton.js just for video file, I want to be able to select the video file formats and render it. If I modify this line
Then in image select it will be allowed to select video/mp4 formats, is it possible if I click on button to select video I want to be able to select video/mp4 formats, and If I click to select image, I want to keep it as it is allow to select only images. Thanks |
@indigofa I think you need to fork the project and modify the addButton, check also in addButton you have to add a new insertion to handle video select file and modify input to accept="image/, video/"
@michelson can you confirm is this the only way to do it |
Hi,
I'm getting this error when i click the icon to embed a video, image upload is working fine
This is what I'm importing exactly how it's used in Dante site example
This is the component
What the issue can be!
Thank you
The text was updated successfully, but these errors were encountered: