@imposium-hub/components 1.43.4 → 1.44.0

package/components/compositions/StaticCompositionEditor.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-
-import StaticCompositionConfig from './StaticCompositionConfig';
-import StaticCompositionRenderer from './StaticCompositionRenderer';
-import { IStaticComposition, VARIABLE_TYPES } from '../../constants/compositions';
-
-interface IStaticCompositionEditorProps {
-    composition : IStaticComposition;
-    variables : any;
-    onUpdate(c) : void;
-    storyId : string;
-    api : any;
-}
-
-interface IStaticCompositionEditorState {
-    selectedLayer : string;
-}
-
-class StaticCompositionEditor extends React.PureComponent<IStaticCompositionEditorProps, IStaticCompositionEditorState> {
-
-    private eventHandlers : any;
-
-    constructor(props) {
-
-        super(props);
-
-        this.state = {
-            selectedLayer : null,
-        };
-
-        this.eventHandlers = {
-            updateSelectedLayer : (l) => this.updateSelectedLayer(l)
-        };
-    }
-
-    private updateSelectedLayer(layerId) {
-
-        this.setState({
-            selectedLayer: layerId
-        });
-    }
-
-    private variablesToInventory() {
-
-        const { variables } = this.props;
-        const inv = {};
-
-        for (const key in variables) {
-            if (variables.hasOwnProperty(key)) {
-                const {type, previewItem} = variables[key];
-                if (previewItem) {
-                    if (type === VARIABLE_TYPES.IMAGE || type === VARIABLE_TYPES.VIDEO || type === VARIABLE_TYPES.AUDIO) {
-                        inv[key] = previewItem.url;
-                    } else {
-                        inv[key] = previewItem.src;
-                    }
-                }
-            }
-        }
-        return inv;
-    }
-
-    public render() {
-
-        const {selectedLayer} = this.state;
-        const { storyId, api, composition } = this.props;
-
-        if (composition) {
-            return (
-                <div className = 'static-composition-editor'>
-                    <div className = 'composition-config'>
-                        <StaticCompositionConfig
-                            storyId = {storyId}
-                            api = {api}
-                            composition = {composition}
-                            onSelectLayer = {this.eventHandlers.updateSelectedLayer}
-                            selectedLayer = {selectedLayer}
-                            onUpdate = {this.props.onUpdate}/>
-                    </div>
-                    <div className = 'composition-preview'>
-                        <StaticCompositionRenderer
-                            inventory = {this.variablesToInventory()}
-                            composition = {composition}
-                            onSelectLayer = {this.eventHandlers.updateSelectedLayer}
-                            selectedLayer = {selectedLayer}
-                            onUpdate = {this.props.onUpdate}/>
-                    </div>
-                </div>
-            );
-        } else {
-            return null;
-        }
-    }
-}
-
-export default StaticCompositionEditor;

package/components/compositions/StaticCompositionRenderer.tsx

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { IStaticComposition } from '../../constants/compositions';
-import CompositionRendererLayer from './CompositionRendererLayer';
-
-interface IStaticCompositionRendererProps {
-    inventory : any;
-    composition : IStaticComposition;
-    selectedLayer? : string;
-    onReady?() : void;
-    onUpdate?(c : IStaticComposition) : void;
-    onSelectLayer?(l : string) : void;
-}
-
-class StaticCompositionRenderer extends React.PureComponent<IStaticCompositionRendererProps, undefined> {
-
-    private bgRef;
-
-    constructor(props) {
-
-        super(props);
-
-        this.bgRef = React.createRef();
-    }
-
-    private renderLayers() {
-
-        const {composition: {layers}, inventory, selectedLayer} = this.props;
-
-        const layerClicked = (id : string) => {
-            this.props.onSelectLayer(id);
-        };
-        const layerArray = [];
-
-        const layerReadyPromises = [];
-
-        if (layers) {
-            layers.map((layer, i) => {
-
-                const selected = layer.id && layer.id === selectedLayer;
-
-                let promiseResolve;
-                let promiseReject;
-
-                layerReadyPromises.push(new Promise((resolve, reject) => {
-                    promiseResolve = resolve;
-                    promiseReject = reject;
-                }));
-
-                layerArray.push(<CompositionRendererLayer
-                    onUpdate = {(c) => this.updateLayer(i, c)}
-                    onReady = {promiseResolve}
-                    onClick = {layerClicked}
-                    selected = {selected}
-                    layer = {layer}
-                    inventory = {inventory}
-                    key = {layer.id || i}/>
-                );
-            });
-        } else {
-            return null;
-        }
-
-        Promise.all(layerReadyPromises).then(([result]) => {
-            if (this.props.onReady) {
-                this.props.onReady();
-            }
-        });
-
-        return layerArray;
-    }
-
-    private updateLayer(index, config) {
-
-        const comp = {...this.props.composition};
-        const layers = [...comp.layers];
-        layers[index] = config;
-        comp.layers = layers;
-
-        this.props.onUpdate(comp);
-    }
-
-    private resetSelected(e) {
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const bgNode = this.bgRef.current;
-
-        // if the event didn't fire on the bg, but on a layer, don't reset the layers
-        // Should have been able to do this with preventDefault, not sure why this was needed.
-        if (bgNode) {
-            if (e.target !== bgNode) {
-                return;
-            }
-        }
-        // TODO: make this work
-        // this.props.onSelectLayer(null);
-    }
-
-    public render() {
-
-        const {composition: {width, height, background_color}} = this.props;
-
-        const style : any = {
-            width: `${width}px`,
-            height: `${height}px`
-        };
-
-        if (background_color) {
-            style.backgroundColor = background_color;
-        }
-
-        return (
-            <div ref = {this.bgRef} className = 'static-composition-renderer' style = {style} onClick = {(e) => this.resetSelected(e)}>
-                {this.renderLayers()}
-            </div>
-        );
-    }
-}
-
-export default StaticCompositionRenderer;

package/components/compositions/TextLayerOptions.tsx

@@ -1,317 +0,0 @@
-
-import * as React from 'react';
-import { ITextLayer, FONT_TYPE_OPTIONS, FONT_TYPES, STADARD_FONTS, DEFAULT_FONT, FILL_MODES } from '../../constants/compositions';
-import { ASSET_TYPES } from '../../constants/assets';
-import TextAreaField from '../text-area-field/TextAreaField';
-import ButtonGroupField from '../button-group-field/ButtonGroupField';
-import TextField from '../text-field/TextField';
-import SelectField from '../select-field/SelectField';
-import Card from '../card/Card';
-import AssetField from '../assets/AssetField';
-import { compositions as copy } from '../../constants/copy';
-import ColorField from '../color-field/ColorField';
-import CheckboxField from '../checkbox-field/CheckboxField';
-import NumberField from '../number-field/NumberField';
-
-import { ICON_ALIGN_LEFT, ICON_ALIGN_RIGHT, ICON_ALIGN_CENTER,
-    ICON_ARROW_UP, ICON_ARROW_CENTER_V, ICON_ARROW_DOWN } from '../../constants/icons';
-
-export const H_ALIGN_OPTIONS = [
-    {
-        icon: ICON_ALIGN_LEFT,
-        value: 'left'
-    },
-    {
-        icon: ICON_ALIGN_CENTER,
-        value: 'center'
-    },
-    {
-        icon: ICON_ALIGN_RIGHT,
-        value: 'right'
-    }
-];
-
-export const V_ALIGN_OPTIONS = [
-    {
-        icon: ICON_ARROW_UP,
-        value: 'flex-start'
-    },
-    {
-        icon: ICON_ARROW_CENTER_V,
-        value: 'center'
-    },
-    {
-        icon: ICON_ARROW_DOWN,
-        value: 'flex-end'
-    }
-];
-
-interface ITextLayerProps {
-    storyId : string;
-    api : any;
-    options : ITextLayer;
-    selected : boolean;
-    onSelectLayer(l? : string) : void;
-    onUpdate(o) : void;
-}
-
-export default class TextLayerOptions extends React.PureComponent<ITextLayerProps, undefined> {
-
-    private eventHandlers;
-    private hALignOptions;
-
-    constructor(props) {
-
-        super(props);
-
-        this.eventHandlers = {
-            inputs: {
-                name: (v) => this.optionValueChanged('name', v),
-                width: (v) => this.optionValueChanged('width', v),
-                height: (v) => this.optionValueChanged('height', v),
-                x: (v) => this.optionValueChanged('x', v),
-                y: (v) => this.optionValueChanged('y', v),
-                rotation: (v) => this.optionValueChanged('rotation', v),
-                content: (v) => this.optionValueChanged('content', v),
-                hAlign: (v) => this.optionValueChanged('horizontal_alignment', v),
-                vAlign: (v) => this.optionValueChanged('vertical_alignment', v),
-                textWrap: (v) => this.optionValueChanged('text_wrap', v),
-                textFit: (v) => this.optionValueChanged('text_fit', v),
-                fontSize: (v) => this.optionValueChanged('font_size', v),
-                lineHeight: (v) => this.optionValueChanged('line_height', v),
-                letterSpacing: (v) => this.optionValueChanged('letter_spacing', v),
-                font: (v) => this.optionValueChanged('font', v),
-                customFont: (v) => this.customFontUpdated(v),
-                fontType: (v) => this.fontTypeChanged(v),
-                wordSpacing: (v) => this.optionValueChanged('word_spacing', v),
-                color: (v) => this.optionValueChanged('color', this.formatColor(v)),
-                backgroundColor: (v) => this.optionValueChanged('background_color', this.formatColor(v)),
-            },
-            onCardOpen: (e) => this.onCardOpen(),
-            onCardClose: (e) => this.onCardClose()
-        };
-    }
-
-    private customFontUpdated(asset) {
-
-        const newOpts = {...this.props.options};
-
-        if (asset) {
-            const {name, url, id} = asset;
-            newOpts['font'] = name;
-            newOpts['custom_font_url'] = url;
-            newOpts['custom_font_id'] = id;
-        } else {
-            newOpts['font'] = DEFAULT_FONT;
-            newOpts['custom_font_url'] = null;
-            newOpts['custom_font_id'] = null;
-        }
-
-        this.props.onUpdate(newOpts);
-    }
-
-    private onCardOpen() {
-
-        const {options: {id}} = this.props;
-        this.props.onSelectLayer(id);
-    }
-
-    private onCardClose() {
-
-        this.props.onSelectLayer(null);
-    }
-
-    private fontTypeChanged(type) {
-
-        const newOpts = {...this.props.options};
-
-        if (type === FONT_TYPES.STANDARD) {
-
-            newOpts['font_type'] = FONT_TYPES.STANDARD;
-            newOpts['font'] = DEFAULT_FONT;
-
-        } else if (type === FONT_TYPES.CUSTOM) {
-
-            newOpts['fontType'] = FONT_TYPES.CUSTOM;
-            newOpts['font'] = DEFAULT_FONT;
-            newOpts['custom_font_id'] = null;
-            newOpts['custom_font_url'] = null;
-        }
-
-        this.props.onUpdate(newOpts);
-    }
-
-    private formatColor(colorPickerValues) {
-
-        const {r, g, b, a} = colorPickerValues.rgb;
-        return `rgba(${r},${g},${b},${a})`;
-    }
-
-    private optionValueChanged(key, value) {
-
-        const newOpts = {...this.props.options};
-        newOpts[key] = value;
-        this.props.onUpdate(newOpts);
-    }
-
-    private renderFontField() {
-
-        const{options: {font_type, custom_font_id, font}, storyId, api} = this.props;
-
-        if (font_type === FONT_TYPES.STANDARD) {
-
-            return <SelectField
-                label = {copy.font}
-                labelPosition = 'top'
-                width = '50%'
-                options = {STADARD_FONTS}
-                onChange = {this.eventHandlers.inputs.font}
-                value = {font}/>;
-
-        } else if (font_type === FONT_TYPES.CUSTOM) {
-            return <AssetField
-                api = {api}
-                storyId= {storyId}
-                label = {copy.font}
-                width = '50%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.customFont}
-                accepts = { ASSET_TYPES.FONT }
-                assetId = {custom_font_id}/>;
-        }
-
-        return null;
-    }
-
-    public render() {
-
-        const {options, selected} = this.props;
-
-        return <Card
-            open = {selected}
-            onOpen = {this.eventHandlers.onCardOpen}
-            onClose = {this.eventHandlers.onCardClose}
-            collapsable = {true}
-            title = {options.name}>
-            <TextField
-                label = {copy.name}
-                tooltip = {copy.tooltipName}
-                value = {options['name']}
-                width  = '100%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.name}/>
-            <NumberField
-                label = {copy.x}
-                tooltip = {copy.tooltipLayerX}
-                value = {options['x']}
-                width  = '20%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.x}/>
-            <NumberField
-                label = {copy.y}
-                tooltip = {copy.tooltipLayerY}
-                value = {options['y']}
-                width  = '20%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.y}/>
-            <NumberField
-                label = {copy.width}
-                tooltip = {copy.tooltipLayerWidth}
-                value = {options['width']}
-                width  = '20%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.width}/>
-            <NumberField
-                label = {copy.height}
-                tooltip = {copy.tooltipLayerHeight}
-                value = {options['height']}
-                width  = '20%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.height}/>
-            <NumberField
-                value = {options['rotation']}
-                label = {copy.rotation}
-                tooltip = {copy.tooltipLayerRotation}
-                width  = '20%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.rotation}/>
-            <TextAreaField
-                label = {copy.textLayerContent}
-                tooltip = {copy.tooltipTextLayerContent}
-                value = {options['content']}
-                width  = '100%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.content}/>
-            <ButtonGroupField
-                options = {H_ALIGN_OPTIONS}
-                value = {options['horizontal_alignment']}
-                width  = '50%'
-                onChange = {this.eventHandlers.inputs.hAlign}/>
-            <ButtonGroupField
-                options = {V_ALIGN_OPTIONS}
-                value = {options['vertical_alignment']}
-                width  = '50%'
-                onChange = {this.eventHandlers.inputs.vAlign}/>
-            <SelectField
-                label = {copy.fontType}
-                options = {FONT_TYPE_OPTIONS}
-                value = {options['font_type']}
-                width = '50%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.fontType}/>
-            {this.renderFontField()}
-            <NumberField
-                label = {copy.fontSize}
-                value = {options['font_size']}
-                width = '50%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.fontSize}/>
-            <NumberField
-                label = {copy.lineHeight}
-                value = {options['line_height']}
-                width = '50%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.lineHeight}/>
-            <NumberField
-                label = {copy.letterSpacing}
-                value = {options['letter_spacing']}
-                width = '50%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.letterSpacing}/>
-            <NumberField
-                label = {copy.wordSpacing}
-                value = {options['word_spacing']}
-                width = '50%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.wordSpacing}/>
-            <ColorField
-                label = {copy.color}
-                value = {options['color']}
-                enableAlpha = {true}
-                width  = '50%'
-                labelPosition = 'top'
-                pickerPosition = 'left'
-                onChange = {this.eventHandlers.inputs.color}/>
-            <ColorField
-                label = {copy.backgroundColor}
-                value = {options['background_color']}
-                enableAlpha = {true}
-                width  = '50%'
-                labelPosition = 'top'
-                pickerPosition = 'right'
-                onChange = {this.eventHandlers.inputs.backgroundColor}/>
-            <CheckboxField
-                label = {copy.wrap}
-                value = {options['text_wrap']}
-                width  = '25%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.textWrap}/>
-            <CheckboxField
-                label = {copy.fit}
-                value = {options['text_fit']}
-                width  = '25%'
-                labelPosition = 'top'
-                onChange = {this.eventHandlers.inputs.textFit}/>
-        </Card>;
-    }
-}

package/components/header/Header.test.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'enzyme';
-
-import ImposiumHeader from './Header';
-
-const ACCESS_STUB : any = {
-    organizations: [{
-        id: '41b5dd9e-efa6-3de5-9ac3-82a6486032ba',
-        name: 'Footage Test',
-        date_connected: 1551988280,
-        services: [1, 2, 3, 4, 5, 6],
-        stories: [{
-            id: '6072569c-d4e7-43d8-ec7d-ec336ed8d6a8',
-            name: 'Fruit Drank'
-        }, {
-            id: 'ffdc4fcc-49bd-4f68-c52f-ad744f385994',
-            name: 'Lincoln Welcome Kit'
-        }, {
-            id: '87b1b188-21ab-4056-cfea-0b161d70bea5',
-            name: 'New Story'
-        }, {
-            id: '24d85998-939e-40a9-8953-e448679bfbd7',
-            name: 'Surreal Test'
-        }, {
-            id: '92d40606-d6e5-4a27-a4c9-285029b833ee',
-            name: 'Test Story'
-        }, {
-            id: '56d52908-d9df-4c2a-b650-8c6428209012',
-            name: 'Test Story II'
-        }, {
-            id: 'b681ee47-2c06-4baf-aef7-2694beb1a2bc',
-            name: 'Test Story III'
-        }, {
-            id: 'f282c18e-baf1-4eca-eeee-f631ba7d0590',
-            name: 'Test Story IV'
-        }, {
-            id: 'cfd19260-e122-4d26-ed65-fb53de6a2462',
-            name: 'Test Story IX'
-        }, {
-            id: 'c73bf979-5630-4155-c9ed-7f55712229c7',
-            name: 'Test Story V'
-        }, {
-            id: 'bd4629ae-8c0f-481d-dc54-e63a161b5b04',
-            name: 'Test Story VI'
-        }, {
-            id: '15e803c6-ad6b-4a08-b01b-bb855a13b70b',
-            name: 'Test Story VII'
-        }, {
-            id: 'a2ea30c2-7113-4ed0-f726-2f32699dcf1c',
-            name: 'Test Story VIII'
-        }, {
-            id: '6a513682-024a-474a-be74-b1f8120bfd4a',
-            name: 'Test Story quick'
-        }]
-    }, {
-        id: '8052eef3-5f57-4d97-92a6-49b167637410',
-        name: 'Some Other Account',
-        date_connected: 1552069862,
-        services: [4, 6],
-        stories: []
-    }],
-    services: [{
-        id: 1,
-        name: 'Story Editor',
-        description: 'Story editor lets you compose videos with Imposium.',
-        icon: 'FaBezierCurve',
-        color: '26c6da',
-        url: 'https://hub.staging.imposium.com/stories',
-        position: 0
-    }, {
-        id: 2,
-        name: 'Assets',
-        description: 'Assets is our in house footage manager.',
-        icon: 'FaRegFileVideo',
-        color: 'ffca28',
-        url: 'https://assets.staging.imposium.com',
-        position: 1
-    }, {
-        id: 3,
-        name: 'Analytics',
-        description: 'Analytics is our in house dashboard solution to help you monitor your Imposium traffic.',
-        icon: 'FaChartBar',
-        color: 'ff7043',
-        url: 'https://analytics.staging.imposium.com',
-        position: 2
-    }, {
-        id: 4,
-        name: 'Moderation',
-        description: 'Moderate your Imposium experiences as they are created.',
-        icon: 'FaGavel',
-        color: '26a69a',
-        url: 'https://hub.staging.imposium.com/moderation',
-        position: 3
-    }, {
-        id: 5,
-        name: 'Data',
-        description: 'Manage and utilize your data sets through Imposium.',
-        icon: 'FaDatabase',
-        color: '66bb6a',
-        url: 'https://hub.staging.imposium.com/data',
-        position: 4
-    }, {
-        id: 6,
-        name: 'Preview',
-        description: 'Preview the output of your Imposium stories.',
-        icon: 'FaVideo',
-        color: '7e57c2',
-        url: 'https://hub.staging.imposium.com/preview',
-        position: 5
-    }]
-};
-
-const wrapper = shallow(<ImposiumHeader accessData = {ACCESS_STUB} activeOrganization = {ACCESS_STUB.organizations[0].id} logout = {() => null} />);
-
-describe('<ImposiumHeader />', () => {
-    it('Renders the heading', () => { expect(wrapper.containsAnyMatchingElements([<h1>imposium</h1>])).toBeTruthy(); });
-
-    it('Renders links correctly', () => { expect(wrapper.find('#imposium-header > div > span.inner-left-content > span').children()).toHaveLength(6); });
-});