iep-ui/lib/iep-video/main.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _lodash = require('lodash');

require('xgplayer');

var _xgplayerMp = require('xgplayer-mp4');

var _xgplayerMp2 = _interopRequireDefault(_xgplayerMp);

var _xgplayerFlv = require('xgplayer-flv.js');

var _xgplayerFlv2 = _interopRequireDefault(_xgplayerFlv);

var _xgplayerHls = require('xgplayer-hls.js');

var _xgplayerHls2 = _interopRequireDefault(_xgplayerHls);

var _spin = require('../spin');

var _spin2 = _interopRequireDefault(_spin);

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

var modeEnum = ['mp4', 'm3u8', 'flv'];
exports['default'] = {
  name: 'IepVideo',
  props: {
    url: _vueTypes2['default'].string,
    options: _vueTypes2['default'].object.def(function () {}),
    loading: _vueTypes2['default'].bool.def(false),
    mode: _vueTypes2['default'].string
  },
  computed: {
    videoOptions: function videoOptions() {
      var _$props = this.$props,
          options = _$props.options,
          url = _$props.url;

      return {
        options: !(0, _lodash.isEmpty)(options) ? options : {
          controls: false
        },
        url: url
      };
    }
  },
  data: function data() {
    return {
      isEmpty: _lodash.isEmpty,
      chart: null,
      isLoaded: false
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.watchData = this.$watch('videoOptions', function (newVal, oldVal) {
      if (newVal.url) {
        if ((0, _lodash.isEmpty)(oldVal) && !(0, _lodash.isEmpty)(newVal.options)) {
          _this.renderChartView();
          return false;
        }
        if (!(0, _lodash.isEqual)(oldVal.options, newVal.options) || (0, _lodash.isEmpty)(oldVal.url) && !(0, _lodash.isEmpty)(newVal.url)) {
          _this.renderChartView();
          return false;
        }
        if (oldVal.url !== newVal.url && _this.video) {
          if (_this.isLoaded) {
            _this.video.src = newVal.url;
            return false;
          } else {
            _this.video.start(newVal.url);
            return false;
          }
        }
      }
    }, {
      immediate: true,
      deep: true
    });
  },
  beforeDestroy: function beforeDestroy() {
    this.watchData();
    if (this.video) {
      this.video.destroy();
      this.video = null;
    }
  },

  methods: {
    getSuffix: function getSuffix(e) {
      return e.split('.').pop().toLowerCase();
    },
    renderChartView: function renderChartView() {
      var _this2 = this;

      var suffix = this.getSuffix(this.videoOptions.url);
      var options = (0, _extends3['default'])({
        el: this.$refs.chartDom,
        url: this.videoOptions.url,
        fitVideoSize: 'fixHeight'
      }, this.videoOptions.options);
      var loadEngine = function loadEngine(e) {
        console.log(e);
        if (e === 'm3u8') {
          return new _xgplayerHls2['default'](options);
        } else if (e === 'flv') {
          return new _xgplayerFlv2['default'](options);
        } else {
          return new _xgplayerMp2['default'](options);
        }
      };
      if (this.mode) {
        if (modeEnum.includes(this.mode)) {
          this.video = loadEngine(this.mode);
        } else {
          this.video = new _xgplayerMp2['default'](options);
        }
      } else {
        this.video = loadEngine(suffix);
      }
      this.video.once('ready', function () {
        _this2.$emit('load', _this2.video);
      });
      this.video.once('play', function () {
        _this2.isLoaded = true;
      });
    },
    getInstance: function getInstance() {
      return this.video;
    }
  },
  render: function render() {
    var h = arguments[0];
    var loading = this.$props.loading;

    var chartNodes = h('div', { 'class': 'iep-chart-core', ref: 'chartDom' });
    return h(
      'div',
      { 'class': 'iep-chart' },
      [loading ? h(
        'div',
        { 'class': 'iep-chart-loading' },
        [h(_spin2['default'], {
          attrs: { spinning: loading }
        })]
      ) : chartNodes]
    );
  }
};