kitten-components/dist/javascripts/kitten/components/media/embed-player.stories.js

Front-end components library

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _addonInfo = require('@storybook/addon-info');

var _react4 = require('@storybook/addon-knobs/react');

var _radium = require('radium');

var _container = require('kitten/components/grid/container');

var _embedPlayer = require('kitten/components/media/embed-player');

var _grid = require('kitten/components/grid/grid');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react3.storiesOf)('Media/EmbedPlayer', module).addDecorator(_react4.withKnobs).add('default', (0, _addonInfo.withInfo)('common info')(function () {
  return _react2.default.createElement(
    _radium.StyleRoot,
    null,
    _react2.default.createElement(
      _container.Container,
      null,
      _react2.default.createElement(
        _grid.Grid,
        null,
        _react2.default.createElement(
          _grid.GridCol,
          { offset: '1', col: '10' },
          _react2.default.createElement(_embedPlayer.EmbedPlayer, {
            previewProps: (0, _react4.object)('thumbnail', {
              thumbnail: {
                src: 'https://placehold.it/620x376/caf4fe/caf4fe',
                alt: 'Une image'
              }
            }),
            playButtonLabel: (0, _react4.text)('Label in player button for accessibility', 'Play'),
            ratio: (0, _react4.text)('Video ratio', 376.0 / 620 * 100),
            iframeHtml: (0, _react4.text)('Iframe video', '<iframe\n                    width="620"\n                    height="376"\n                    src="https://www.youtube.com/embed/30wT8ZJOeDA"\n                    frameborder="0" allow="autoplay; encrypted-media"\n                    allowfullscreen\n                  ></iframe>'.replace(/\s+/g, ' '))
          })
        )
      )
    )
  );
}));