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

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

import _extends from 'babel-runtime/helpers/extends';
import PropTypes from '../_util/vue-types';
import { isEmpty, isEqual } from 'lodash';
import 'xgplayer';
import Mp4Player from 'xgplayer-mp4';
import FlvPlayer from 'xgplayer-flv.js';
import HlsPlayer from 'xgplayer-hls.js';
import Spin from '../spin';

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

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

    this.watchData = this.$watch('videoOptions', function (newVal, oldVal) {
      if (newVal.url) {
        if (isEmpty(oldVal) && !isEmpty(newVal.options)) {
          _this.renderChartView();
          return false;
        }
        if (!isEqual(oldVal.options, newVal.options) || isEmpty(oldVal.url) && !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 = _extends({
        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 HlsPlayer(options);
        } else if (e === 'flv') {
          return new FlvPlayer(options);
        } else {
          return new Mp4Player(options);
        }
      };
      if (this.mode) {
        if (modeEnum.includes(this.mode)) {
          this.video = loadEngine(this.mode);
        } else {
          this.video = new Mp4Player(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(Spin, {
          attrs: { spinning: loading }
        })]
      ) : chartNodes]
    );
  }
};