added start of video block

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<any, any>{
+    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 (
+                <Image source={imagesource} style={viewStyles} />
+        )
+
+    }
+}   

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;
 

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 {

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);
     }
-
 }

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,