let controlBarEl = this.createEl('div', {className: 'vss-control-bar'});
let controlBarLeftEl = this.createEl('div', {className: 'vss-control-bar-left'});
let controlBarConterEl = this.createEl('div', {className: 'vss-control-bar-conter'});
let controlBarrRightEl = this.createEl('div', {className: 'vss-control-bar-right'});

/**
* play-btn.js
*/
import {createEl} from '../utils/dom';

class PlayBtn {
constructor(self, dom) {
this.boxDom = self.boxDom;
this.isFill = false;
this.isPlaying = false;
this.PlayBtnEl = createEl(
'div',
{className: 'vss-btn-group vss-pointer'},
{}
);
this.IconEl = createEl(
'span',
{className: 'vssfont vss-play'},
{title: '播放'}
);
this.PlayBtnEl.appendChild(this.IconEl);
dom.appendChild(this.PlayBtnEl);

this.PlayBtnEl.onclick = (e) => {
if (self.url) {
if (this.isPlaying) {
this.isPlaying = false;
this.PlayBtnEl.title = '播放';
this.PlayBtnEl.classList.remove('vss-pause');
this.PlayBtnEl.classList.add('vss-play');
this.pause(self);
} else {
this.isPlaying = true;
this.PlayBtnEl.title = '暂停';
this.PlayBtnEl.classList.remove('vss-play');
this.PlayBtnEl.classList.add('vss-pause');
this.play(self);
}
} else {
console.log('url is empty');
}
};

self.on('status', (status) => {
if (status === 100) {
this.isPlaying = true;
this.PlayBtnEl.title = '暂停';
this.PlayBtnEl.classList.remove('vss-play');
this.PlayBtnEl.classList.add('vss-pause');
}
});
}

// 播放
play(self) {
self.play(self.url, 1, self.seekTimeSecs);
}

// 暂停
pause(self) {
self.pause();
}
}


export default PlayBtn;

/**
* fullscreen-toggle.js
*/
import {createEl} from '../utils/dom';

class FullscreenToggle {
constructor(self, dom) {
this.boxDom = self.boxDom;
this.isFullScreen = false;
this.fullScreenBtnEl = createEl('div', {className: 'vss-full-screen-btn vss-pointer'}, {});
this.fullScreenIconEl = createEl('span', {className: 'vssfont vss-fullscreen'}, {
title: '全屏'
});
this.fullScreenBtnEl.appendChild(this.fullScreenIconEl);
dom.appendChild(this.fullScreenBtnEl);

this.fullScreenBtnEl.onclick = (e) => {
if (this.isFullScreen) {
// 取消全屏
this.isFullScreen = false;
self.callbackFunc('unFull');
this.fullScreenIconEl.title = '全屏';
this.fullScreenIconEl.classList.remove('vss-cancel-fullscreen');
this.fullScreenIconEl.classList.add('vss-fullscreen');
this.exitFullScreen();
} else {
// 全屏
this.isFullScreen = true;
self.callbackFunc('full');
this.fullScreenIconEl.title = '取消全屏';
this.fullScreenIconEl.classList.remove('vss-fullscreen');
this.fullScreenIconEl.classList.add('vss-cancel-fullscreen');
this.requestFullscreen();
}
};

// 监听播放器是否为全屏状态
// document.addEventListener('fullscreenchange', function (e) {
//
// });
}

// 全屏
requestFullscreen() {
if (this.boxDom.requestFullscreen) {
this.boxDom.requestFullscreen();
} else if (this.boxDom.mozRequestFullScreen) {
this.boxDom.mozRequestFullScreen();
} else if (this.boxDom.webkitRequestFullscreen) {
this.boxDom.webkitRequestFullscreen();
} else if (this.boxDom.msRequestFullscreen) {
this.boxDom.msRequestFullscreen();
}
}

// 取消全屏
exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}


export default FullscreenToggle;

export function isObject(value) {
return !!value && typeof value === 'object';
}

export function isEl(value) {
return isObject(value) && value.nodeType === 1;
}

export function isTextNode(value) {
return isObject(value) && value.nodeType === 3;
}

export function normalizeContent(content) {

// First, invoke content if it is a function. If it produces an array,
// that needs to happen before normalization.
if (typeof content === 'function') {
content = content();
}

// Next up, normalize to an array, so one or many items can be normalized,
// filtered, and returned.
return (Array.isArray(content) ? content : [content]).map(value => {

// First, invoke value if it is a function to produce a new value,
// which will be subsequently normalized to a Node of some kind.
if (typeof value === 'function') {
value = value();
}

if (isEl(value) || isTextNode(value)) {
return value;
}

if (typeof value === 'string' && (/\S/).test(value)) {
return document.createTextNode(value);
}
}).filter(value => value);
}

export function appendContent(el, content) {
normalizeContent(content).forEach(node => el.appendChild(node));
return el;
}

/**
* 创建元素并应用属性、属性和插入内容.
* @param {string} [tagName='div'] 要创建的标记的名称.
* @param {Object} [properties={}] 要应用的元素属性.
* @param {Object} [attributes={}] 要应用的元素属性.
* @param {string} [content] 内容描述符对象.
* @return {Element} 创建的元素.
*/
export function createEl(tagName = 'div', properties = {}, attributes = {}, content) {

const el = document.createElement(tagName);
Object.getOwnPropertyNames(properties).forEach(function (propName) {
const val = properties[propName];
if (propName.indexOf('aria-') !== -1 || propName === 'role' || propName === 'type') {
// log.warn('Setting attributes in the second argument of createEl()\n' +
// 'has been deprecated. Use the third argument instead.\n' +
// `createEl(type, properties, attributes). Attempting to set ${propName} to ${val}.`);
el.setAttribute(propName, val);
} else if (propName === 'textContent') {
// textContent(el, val);
} else if (el[propName] !== val || propName === 'tabIndex') {
el[propName] = val;
}
});

Object.getOwnPropertyNames(attributes).forEach(function (attrName) {
el.setAttribute(attrName, attributes[attrName]);
});

if (content) {
appendContent(el, content);
}

return el;
}