function mxVideoComponent(bounds, fill, stroke, strokewidth) {
  mxShape.call(this)
  this.bounds = bounds
  this.fill = fill
  this.stroke = stroke
  this.strokewidth = strokewidth != null ? strokewidth : 1
}

mxUtils.extend(mxVideoComponent, mxShape)

mxVideoComponent.prototype.customProperties = [{ componentType: 'text' }]

mxVideoComponent.prototype.shapeKey = 'mxgraph.thingskit/videoComponent'

mxVideoComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
  //  this.paintBackground(c, x, y, w, h)
  this.foreground(c, x, y, w, h)
}

mxVideoComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
  svgCanvas.rect(x, y, w, h);
  svgCanvas.fillAndStroke()
}

mxVideoComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
  var cell = this.state.cell
  cell.setAttribute('shapeKey', this.shapeKey)
  var status = getCellStatus(this.state.view.graph)
  if (status === 'sidebar') {
    svgCanvas.image(...this.getThumbSize(x, y, w, h), IMAGE_PATH + '/thingskit/video1.svg')
  } else {
    createComponent(this, svgCanvas, x, y, w, h)
    setContainerSize(this, svgCanvas, x, y, w, h)
  }
}

mxVideoComponent.prototype.configureCanvas = function (a, b, c, d) {
  mxShape.prototype.configureCanvas.apply(this, arguments)
  a.setFontColor(this.color)
  a.setFontFamily(this.family)
  a.setFontSize(this.size)
  a.setFontStyle(this.fontStyle)
}

mxVideoComponent.prototype.updateMargin = function () {
  this.margin = mxUtils.getAlignmentAsPoint(this.align, this.valign)
}

mxVideoComponent.prototype.apply = function (a) {
  mxText.prototype.apply.apply(this, arguments)
  this.opacity = mxUtils.getValue(this.style, mxConstants.STYLE_OPACITY, 100)
}

mxVideoComponent.prototype.getThumbSize = function (x, y, w, h) {
  const offset = Math.min(x, y)
  const size = Math.max(w, h)
  return [offset, offset, size, size]
}

mxCellRenderer.registerShape(mxVideoComponent.prototype.shapeKey, mxVideoComponent)