diff --git a/client/shared/src/components/VideoBlock.tsx b/client/shared/src/components/VideoBlock.tsx new file mode 100644 index 0000000..864940b --- /dev/null +++ b/client/shared/src/components/VideoBlock.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; +import { Image } from 'react-native'; +import * as BlockThemes from '../../../shared/src/util/BlockThemes'; + +export class VideoBlock extends React.Component{ + constructor(props: any) { + super(props); + } + render() { + let { + style, + theme, + width, + height, + visualPurpose, + isFlex, + imagesource, + videosource, + ...other + } = this.props; + + let viewStyles: any = []; + + // if there is a theme, then grab the correct + // style from the theme, otherwise use the default + // theme, whatever that is + if (visualPurpose != 'none') { + let themeBlock: BlockThemes.BlockTheme; + if (theme) { + themeBlock = BlockThemes.getThemeByName(theme); + } else { + themeBlock = BlockThemes.getDefaultTheme(); + } + if (themeBlock) + viewStyles.push(themeBlock['image_' + visualPurpose]); + } + + // some of the properties apply indirectly to styles + // if any of these properties are present, then create + // a style block just for them + if (isFlex || width || height) { + let propStyle: React.CSSProperties = {}; + if (isFlex) { + propStyle.flex = 1; + } + if (width) { + propStyle.width = width; + } + if (height) { + propStyle.height = height; + } + viewStyles.push(propStyle); + } + // finally, if the user defined their own style block + // that trumps everything else + if (style) { + viewStyles.push(style); + } + return ( + + ) + + } +} \ No newline at end of file diff --git a/client/shared/src/util/CodegenRuntime.ts b/client/shared/src/util/CodegenRuntime.ts index 60f9d1a..db3e219 100644 --- a/client/shared/src/util/CodegenRuntime.ts +++ b/client/shared/src/util/CodegenRuntime.ts @@ -21,6 +21,7 @@ import { ScrollerBlock } from '../components/ScrollerBlock'; import { ButtonBlock } from '../components/ButtonBlock'; import { TextBlock } from '../components/TextBlock'; import { ImageBlock } from '../components/ImageBlock'; +import { VideoBlock } from '../components/VideoBlock'; import { TextInputBlock } from '../components/TextInputBlock'; import { DividerBlock } from '../components/DividerBlock'; import { SpriteBlock } from '../components/SpriteBlock'; @@ -34,6 +35,8 @@ export interface CodegenHost { createRefCollection():any; } +// have a stub + export type EdgeKind = 'none' | 'left' | 'top' | 'right' | 'bottom'; export type EdgeKinds = 'none' | 'left' | 'top' | 'right' | 'bottom' | 'horizontal' | 'vertical' | 'any'; @@ -614,6 +617,7 @@ export namespace CodegenRuntime { export var ButtonBlockf = ButtonBlock; export var TextBlockf = TextBlock; export var ImageBlockf = ImageBlock; + export var VideoBlockf = VideoBlock; export var TextInputBlockf = TextInputBlock; export var DividerBlockf = DividerBlock; diff --git a/client/shared/src/util/uiApi.ts b/client/shared/src/util/uiApi.ts index dbf6fd4..0bad249 100644 --- a/client/shared/src/util/uiApi.ts +++ b/client/shared/src/util/uiApi.ts @@ -300,6 +300,25 @@ export namespace pxsimui { CodegenRuntime.createElement(CodegenRuntime.ImageBlockf, props)); } + export function videoElementImpl( + flex: boolean, + width: number, + height: number, + style: pxsim.RefCollection, + imageurl: string, + videourl: string): void { + CodegenRuntime.beginProps(); + genFlexProp(flex); + genStyleProp(style); + CodegenRuntime.addProp('width', width); + CodegenRuntime.addProp('height', height); + CodegenRuntime.addProp('imagesource', { uri: imageurl ? imageurl : '' }); + CodegenRuntime.addProp('videosource', { uri: videourl ? videourl : '' }); + let props = CodegenRuntime.getProps(); + CodegenRuntime.pushElem( + CodegenRuntime.createElement(CodegenRuntime.VideoBlockf, props)); + } + export function dividerElementImpl( className: UIDividerClass, style: pxsim.RefCollection): void { diff --git a/libs/core/ui.ts b/libs/core/ui.ts index 3a440cb..d2fd0ae 100644 --- a/libs/core/ui.ts +++ b/libs/core/ui.ts @@ -162,6 +162,26 @@ namespace UI { updateUIImpl(); } + /** + * A block for making a video element + * @param width the width of the image, eg. 80 + * @param height the height of the image, eg. 60 + */ + //% weight=60 + //% color=#8080FF + //% blockId=video_element + //% block="VIDEO flex %flex|width %width|height %height|style %style=lists_create_emptyt|image URL %imageurl|video URL %videourl" + //% acceptArrays=true + export function videoElement( + flex: boolean, + width: number, + height: number, + style: string[], + imageurl: string, + videourl: string): void { + videoElementImpl(flex, width, height, style, imageurl, videourl); + } + /** * Action Icon * @param size the size of the icon, eg: 24 @@ -369,5 +389,4 @@ namespace UI { export function toggleIcon(name: ToggleIconCategory, size: number, type: IconType, style: string[]) { iconElementImpl('toggle', name, type, size, style); } - } diff --git a/sim/api.ts b/sim/api.ts index db2c4d2..13d092c 100644 --- a/sim/api.ts +++ b/sim/api.ts @@ -69,6 +69,17 @@ namespace pxsim.UI { } + //% + export function videoElementImpl( + flex: boolean, + width: number, + height: number, + style: string[], + imageurl: string, + videourl: string): void { + + } + //% export function dividerElementImpl( className: UIDividerClass,