@micromag/element-closed-captions 0.3.487 → 0.3.491

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-closed-captions-container{position:relative;text-align:center}.micromag-element-closed-captions-container .micromag-element-closed-captions-captions{background-color:#1c1c1c;color:#fff;display:inline-block;padding:10px;word-break:break-word}
+.micromag-element-closed-captions-container{position:relative;text-align:center}.micromag-element-closed-captions-container .micromag-element-closed-captions-captions{background-color:#1c1c1c;color:#fff;display:inline-block;padding:5px;word-break:break-word}

package/es/index.js

@@ -6,7 +6,8 @@ import parseSRT from 'parse-srt';
 import PropTypes$1 from 'prop-types';
 import React, { useState, useEffect, useCallback } from 'react';
 import { PropTypes } from '@micromag/core';
-import { getSecondsFromTime } from '@micromag/core/utils';
+import { getSecondsFromTime, getStyleFromBox } from '@micromag/core/utils';
+import TextElement from '@micromag/element-text';
 
 var styles = {"container":"micromag-element-closed-captions-container","captions":"micromag-element-closed-captions-captions"};
 
@@ -16,18 +17,24 @@ var propTypes = {
   // in seconds
   timeOffset: PropTypes$1.string,
   // in srt time format (10:00:01,034)
+  textStyle: PropTypes.textStyle,
+  boxStyle: PropTypes.boxStyle,
   className: PropTypes$1.string
 };
 var defaultProps = {
   media: null,
   currentTime: 0,
   timeOffset: null,
+  textStyle: null,
+  boxStyle: null,
   className: null
 };
 var ClosedCaptions = function ClosedCaptions(_ref) {
   var currentTime = _ref.currentTime,
     timeOffset = _ref.timeOffset,
     media = _ref.media,
+    textStyle = _ref.textStyle,
+    boxStyle = _ref.boxStyle,
     className = _ref.className;
   var _ref2 = media || {},
     _ref2$url = _ref2.url,
@@ -74,14 +81,16 @@ var ClosedCaptions = function ClosedCaptions(_ref) {
   }, [currentTime, lines, getLineIndexFromTime, setLineIndex]);
   var line = lineIndex !== -1 ? lines[lineIndex] : null;
   var active = line !== null;
+  var finalBoxStyles = boxStyle !== null ? getStyleFromBox(boxStyle) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)])
   }, active ? /*#__PURE__*/React.createElement("div", {
     className: styles.captions,
-    dangerouslySetInnerHTML: active ? {
-      __html: line.text
-    } : null
-  }) : null);
+    style: finalBoxStyles
+  }, /*#__PURE__*/React.createElement(TextElement, {
+    textStyle: textStyle,
+    body: line.text
+  })) : null);
 };
 ClosedCaptions.propTypes = propTypes;
 ClosedCaptions.defaultProps = defaultProps;

package/lib/index.js

@@ -9,6 +9,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
+var TextElement = require('@micromag/element-text');
 
 var styles = {"container":"micromag-element-closed-captions-container","captions":"micromag-element-closed-captions-captions"};
 
@@ -18,18 +19,24 @@ var propTypes = {
   // in seconds
   timeOffset: PropTypes.string,
   // in srt time format (10:00:01,034)
+  textStyle: core.PropTypes.textStyle,
+  boxStyle: core.PropTypes.boxStyle,
   className: PropTypes.string
 };
 var defaultProps = {
   media: null,
   currentTime: 0,
   timeOffset: null,
+  textStyle: null,
+  boxStyle: null,
   className: null
 };
 var ClosedCaptions = function ClosedCaptions(_ref) {
   var currentTime = _ref.currentTime,
     timeOffset = _ref.timeOffset,
     media = _ref.media,
+    textStyle = _ref.textStyle,
+    boxStyle = _ref.boxStyle,
     className = _ref.className;
   var _ref2 = media || {},
     _ref2$url = _ref2.url,
@@ -76,14 +83,16 @@ var ClosedCaptions = function ClosedCaptions(_ref) {
   }, [currentTime, lines, getLineIndexFromTime, setLineIndex]);
   var line = lineIndex !== -1 ? lines[lineIndex] : null;
   var active = line !== null;
+  var finalBoxStyles = boxStyle !== null ? utils.getStyleFromBox(boxStyle) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty({}, className, className !== null)])
   }, active ? /*#__PURE__*/React.createElement("div", {
     className: styles.captions,
-    dangerouslySetInnerHTML: active ? {
-      __html: line.text
-    } : null
-  }) : null);
+    style: finalBoxStyles
+  }, /*#__PURE__*/React.createElement(TextElement, {
+    textStyle: textStyle,
+    body: line.text
+  })) : null);
 };
 ClosedCaptions.propTypes = propTypes;
 ClosedCaptions.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-closed-captions",
-    "version": "0.3.487",
+    "version": "0.3.491",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,7 +60,8 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.487",
+        "@micromag/core": "^0.3.491",
+        "@micromag/element-text": "^0.3.491",
         "classnames": "^2.2.6",
         "node-fetch": "^2.6.1",
         "parse-srt": "^1.0.0-alpha",
@@ -72,5 +73,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "aaa0df7566c8291eca5aab8ab6c8b103152c110c"
+    "gitHead": "d4af8a992fad6d8d50e41e347a4b92e6e025b984"
 }