cloud-blocks/core/video.js

Cloud Blocks is a library for building scratch computing interfaces with Luxrobo MODI.

/**
 * @license
 * Visual Blocks Editor
 *
 * Copyright 2012 Google Inc.
 * https://developers.google.com/blockly/
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @fileoverview Video
 * @author Tom
 */
'use strict';

/**
 * @name Blockly.Video
 * @namespace
 **/
goog.provide('Blockly.Video');

/**
 * Constructor
 */
Blockly.Video = function (url, mimetype, options) {
  /**
   * Video url
   */
  this.url = url;

  /**
   * Video MIME
   */
  this.mimetype = mimetype;

  /**
   * Video player options
   */
  this.options = options | {};
};

/**
 * Area width
 */
Blockly.Video.WIDTH = 305;

/**
 * Area height
 */
Blockly.Video.HEIGHT = 222;

/**
 * Create video DOM
 */
Blockly.Video.prototype.createDom = function () {
  this.width_ = Blockly.Video.WIDTH;
  this.height_ = Blockly.Video.HEIGHT;

  // this.svgGroup_ = Blockly.utils.createSvgElement(
  //   'g',
  //   { transform: 'translate(0, 0) scale(1, 1)' },
  //   null
  // );

  // this.svgRect_ = Blockly.utils.createSvgElement(
  //   'rect',
  //   {
  //     x: 0,
  //     y: 0,
  //     width: Blockly.Video.WIDTH,
  //     height: Blockly.Video.HEIGHT,
  //   },
  //   this.svgGroup_
  // );

  // this.svgEmbed_ = Blockly.utils.createSvgElement(
  //   'foreignObject',
  //   {
  //     x: 0,
  //     y: 0,
  //     width: Blockly.Video.WIDTH,
  //     height: Blockly.Video.HEIGHT,
  //   },
  //   this.svgGroup_
  // );

  // this.videoElement_ = this.createVideoElement();
  // this.svgEmbed_.appendChild(this.videoElement_);

  return this.svgGroup_;
};

/**
 * Create video element
 */
Blockly.Video.prototype.createVideoElement = function () {
  var source = document.createElement('source');
  source.setAttribute('type', this.mimetype);
  source.setAttribute('src', this.url);

  var video = document.createElement('video');
  video.setAttribute('id', 'my_video_1');
  video.setAttribute('class', 'video-js vjs-default-skin');
  video.setAttribute('controls', '');
  video.setAttribute('preload', 'auto');
  video.setAttribute('width', Blockly.Video.WIDTH);
  video.setAttribute('height', Blockly.Video.HEIGHT);
  video.setAttribute('data-setup', '{}');
  video.appendChild(source);

  return video;
};