zwplayer-vue2x 1.0.1

package/npm-scripts.mjs

@@ -0,0 +1,191 @@
+import process from 'process';
+import os from 'os';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url'
+import { execSync, spawnSync } from 'child_process';
+
+const PKG = JSON.parse(fs.readFileSync('./package.json').toString());
+const IS_FREEBSD = os.platform() === 'freebsd';
+const IS_WINDOWS = os.platform() === 'win32';
+const MAYOR_VERSION = PKG.version.split('.')[0];
+const ZWPLAYER_LIBRARY_DIR = 'zwplayerlib/prebuild';
+const __filenameCur = fileURLToPath(import.meta.url)
+const __dirnameCur = path.dirname(__filenameCur);
+const CURRENT_DIRECTORY = path.resolve(__dirnameCur);
+
+const task = process.argv.slice(2).join(' ');
+
+run();
+
+async function run()
+{
+	switch (task)
+	{
+		case 'prepare':
+		{
+			logInfo('zwplayer run script prepare...');
+
+			break;
+		}
+		
+		case 'postinstall':
+		{
+			logInfo('zwplayer run script postinstall...');
+			
+			const zwplayerLibDir = `${CURRENT_DIRECTORY}/zwplayerlib/zwplayer`;
+			const zwplayer_js = `${zwplayerLibDir}/zwplayer.js`;
+			
+			const zwplayer_js_filepath = path.normalize(zwplayer_js);
+
+			if (!fs.existsSync(zwplayer_js_filepath))
+			{
+				logError(`zwplayer library file "${zwplayer_js}" does not exist.`);
+				zwplayer_library_install();
+				return;
+			}
+			
+			const project_path = path.normalize(`${CURRENT_DIRECTORY}/../..`);
+			const project_package = path.normalize(`${project_path}/package.json`);
+			
+			if (!fs.existsSync(project_package))
+			{
+				logError(`project package.json ${project_package} does not exist.`);
+				please_run_vue_crate_project();
+				return;
+			}
+			
+			const vue_config_js = path.normalize(`${project_path}/vue.config.js`);
+			const vite_config_js = path.normalize(`${project_path}/vite.config.js`);
+			
+			if (!fs.existsSync(vue_config_js) && !fs.existsSync(vite_config_js))
+			{
+				logError(`vue config vue.config.js or vite.config.js does not exist.`);
+				please_run_vue_crate_project();
+				return;
+			}
+			
+			const public_path = path.normalize(`${project_path}/public`);
+			
+			if (!fs.existsSync(public_path))
+			{
+				logError(`vue public path ${public_path} does not exist.`);
+				please_run_vue_crate_project();
+				return;
+			}
+			
+			// copy files
+			const source_path = path.normalize(`${CURRENT_DIRECTORY}/zwplayerlib`);
+			
+			copyDirectory(source_path, public_path);
+			
+			break;
+		}
+	}
+}
+
+function logInfo(message)
+{
+	// eslint-disable-next-line no-console
+	console.log(`npm-scripts \x1b[36m[INFO] [${task}]\x1b\[0m`, message);
+}
+
+function logWarn(message)
+{
+	// eslint-disable-next-line no-console
+	console.warn(`npm-scripts \x1b[33m[WARN] [${task}]\x1b\[0m`, message);
+}
+
+function logError(message)
+{
+	// eslint-disable-next-line no-console
+	console.error(`npm-scripts \x1b[31m[ERROR] [${task}]\x1b\[0m`, message);
+}
+
+function exitWithError()
+{
+	process.exit(1);
+}
+
+function checkExistSync(path)
+{
+	try {
+		fs.accessSync(
+			path,
+			fs.constants.F_OK | fs.constants.R_OK | fs.constants.W_OK
+		);
+		// console.log(`Directory "${path}" exists.`);
+		return true;
+	} catch (err) {
+		logInfo(`Directory "${path}" does not exist.`);
+		return false;
+	}
+}
+
+function ensureDirSync(dir) 
+{
+	const exists = fs.existsSync(dir);
+	if (!exists) {
+
+		ensureDirSync(path.dirname(dir));
+
+		fs.mkdirSync(dir);
+	}
+}
+
+function copyFile(srcFile, desFile)
+{
+	const _fs = fs;
+	
+	const destDir = path.dirname(desFile);
+	
+	ensureDirSync(destDir);
+	
+	return new Promise((resolve, reject) => {
+		try {
+			const writeStream = _fs.createWriteStream(desFile);
+			const readStream = _fs.createReadStream(srcFile);
+			readStream.on("error", reject);
+			readStream.on("close", resolve);
+			writeStream.on("error", reject);
+			writeStream.on("finish", () => {
+				console.log("File copied successfully!");
+			});
+			readStream.pipe(writeStream);
+		} catch (error) {
+			console.error(error);
+		}
+	});
+}
+
+async function copyDirectory(srcPath, desPath) 
+{
+	const _fs = fs;
+	const _path = path;
+	try {
+		const isSrcExist = checkExistSync(srcPath);
+		if (!isSrcExist) {
+			logError(`copyDirectory error: ${srcPath} does not exist`);
+			return;
+		}
+		
+		const isDesExist = checkExistSync(desPath);
+		if (!isDesExist) ensureDirSync(desPath);
+	
+		const files = _fs.readdirSync(srcPath);
+		
+		for (const file of files) {
+			const copyPath = _path.join(srcPath, file);
+			const destPath = _path.join(desPath, file);
+			const stats = await _fs.statSync(copyPath);
+			
+			if (stats.isDirectory()) {
+				await copyDirectory(copyPath, destPath);
+			} else {
+				await copyFile(copyPath, destPath);
+			}
+		}
+	} catch (error) {
+		console.error(`Error copying directory: ${error.message}`);
+	}
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "zwplayer-vue2x",
+  "version": "1.0.1",
+  "description": "A fully functional and lightweight free open-source web player",
+  "main": "lib/zwplayervue2.umd.min.js",
+  "keyword": "zwplayervue2, zwplayer-vue2x, zero-web-player",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "prepare": "node npm-scripts.mjs prepare",
+    "postinstall": "node npm-scripts.mjs postinstall",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name zwplayervue2 --dest lib sources/index.js"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "^5.0.8",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/sources/index.js

@@ -0,0 +1,23 @@
+// 引入该目录下所有的组件
+import zwplayer from "./vueplayer/index.js";
+
+const components = [
+  zwplayer
+]
+
+const ZwModule = {}
+ZwModule.install = Vue => {
+  components.forEach(component => {
+	component.install(Vue);
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  ZwModule.install(window.Vue)
+}
+
+export {
+  zwplayer
+};
+
+export default ZwModule;

package/sources/vueplayer/index.js

@@ -0,0 +1,13 @@
+//export defines
+import zwplayer from './src/main';
+
+/* istanbul ignore next */
+zwplayer.install = function(Vue) {
+  Vue.component(zwplayer.name, zwplayer); // 
+  Vue.component('zero-web-player', zwplayer);
+  Vue.component('zero-player', zwplayer);
+  Vue.component('ZPlayer', zwplayer);
+};
+
+export default zwplayer;
+

package/sources/vueplayer/src/loadjs.js

@@ -0,0 +1,75 @@
+// zwplayer tools 
+
+const zwplayer_loadjs = function(id,url,cb) {
+	let headNode = document.getElementsByTagName("head");
+	
+	if (headNode.length == 0) {
+		headNode = document.createElement("head");
+		let body = document.getElementsByTagName("body");
+		if (body.length > 0) {
+			body = body[0];
+			document.insertBefore(headNode,body);
+		}
+		else {
+			alert('Invalid html document: no HEAD tag');
+			return false;
+		}
+	}
+	else {
+		headNode = headNode[0];
+		const nodes = headNode.childNodes;
+
+		for (let i = 0; i < nodes.length; i ++) {
+			const node = nodes[i];
+			if (node.nodeName.toUpperCase() === 'SCRIPT') {
+				if (node.id && node.id == id) {
+					if (node.getAttribute('loadstate') != 'true') {
+						const checkLoad = function () {
+							if (node.getAttribute('loadstate') != 'true') {
+								setTimeout(checkLoad,50);
+							}
+							else {
+								if (typeof cb == 'function') cb(id);
+							}
+						};
+						
+						setTimeout(checkLoad,50);
+						return false;
+					}
+					
+					if (typeof cb == 'function') cb(id);
+					return true;
+				}
+			}
+		}
+	}
+	
+	const script = document.createElement("script");
+	
+	script.type = "text/javascript";
+	
+	if(script.readyState){ // IE
+		script.onreadystatechange = function(){
+			if(script.readyState == "loaded" || script.readyState == "complete"){
+				script.onreadystatechange = null;
+				script.setAttribute('loadstate','true');
+				if (typeof cb == 'function') cb(id);
+			}
+		}
+	}
+	else {
+		script.onload = function(){
+			script.setAttribute('loadstate','true');
+			script.setAttribute('charset','utf-8');
+			if (typeof cb == 'function') cb(id);
+		}
+	}
+	script.id = id;
+	script.src = url;
+	
+	headNode.appendChild(script);
+	
+	return  false;
+};
+
+module.exports.zwplayer_loadjs = zwplayer_loadjs;

package/sources/vueplayer/src/main.vue

@@ -0,0 +1,338 @@
+<!-- zwplayer for vue -->
+<script>
+import { h } from 'vue'
+import { zwplayer_loadjs } from "./loadjs.js";
+
+const zwplayer_js_def = 'zwplayer/zwplayer.js?v=3.2';
+
+const availabe_props = {
+	isLive:  'boolean',
+	useOldFlv: 'boolean',
+	useFlv: 'boolean',
+	streamtype: 'string',
+	hasAudio: 'boolean',
+	hasVideo: 'boolean',
+	xmc_url: 'string',
+	fixedControlbar: 'boolean',
+	nativecontrols: 'boolean',
+	infoButton: 'boolean',
+	speedButton: 'boolean',
+	optionButton: 'boolean',
+	snapshotButton: 'boolean',
+	chapterButton: 'boolean',
+	enableDanmu: 'boolean',
+	useProgressTooltip: 'boolean',
+	hidePlayBtn: 'boolean',
+	disablePlayBtn: 'boolean',
+	disableSeek: 'boolean',
+	disableFullscreenWin: 'boolean',
+	disablePicInPic: 'boolean',
+	disableVolumeControl: 'boolean',
+	lostFocusPause: 'boolean',
+	autoSmallWindow: 'boolean',
+	thumbnails: 'object',
+	sendDanmu: 'function',
+	danmuBarId: 'string'
+};
+
+export default {
+	name: 'ZwPlayer',
+	data () {
+		return {
+			zwplayer: null,
+			nodename: 'ZwPlayer'
+		}
+	},
+	props: {
+		zwplayerlib: String,
+		murl: String,
+		nodeid: String,
+		muted: Boolean,
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		videoprop: Object,
+		videostyle: String,
+		reconnect: {
+			type: Boolean,
+			default: true
+		},
+		controlbar: {
+			type: Boolean,
+			default: true
+		},
+		useProgressTooltip: {
+			type: Boolean,
+			default: true
+		}
+	},
+	
+	emits: ['oneterror', 'onmediaevent', 'onready'],
+	methods: {
+		play(url, isLive, useOldFlv) {
+			let vm = this;
+			
+			if (!url)
+				url = this.murl;
+			if (!vm.zwplayer)
+				return;
+				
+			vm.zwplayer.play(url, isLive, useOldFlv);
+		},
+		stop() {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.stop();
+			}
+		},
+		pause() {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.pause();
+			}
+		},
+		resume() {
+			let vm = this;
+			if (vm.zwplayer) {
+				vm.zwplayer.resume();
+			}
+		},
+		getDuration() {
+			let vm = this;
+			if (vm.zwplayer) {
+				return vm.zwplayer.getDuration();
+			}
+			return undefined;
+		},
+		seekTime(time) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.seekTime(time);
+			}
+		},
+		destroy() {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.destroy();
+			}
+		},
+		setplaystate(bPlaying) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.setplaystate(bPlaying);
+			}
+		},
+		
+		setEnableDanmu(bEnable) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.setEnableDanmu(bEnable);
+			}
+		},
+		
+		appendDanmu(msgObj, setting) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.appendDanmu(msgObj, setting);
+			}
+		},
+		
+		setChapters(chapters) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.setChapters(chapters);
+			}
+		},
+		
+		addSubtitle(subtitleUrl, pos, title) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.addSubtitle(subtitleUrl, pos, title);
+			}
+		},
+		
+		removeSubtitle() {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.removeSubtitle();
+			}
+		},
+		
+		buildDanmuControlbar(parentId, className) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.buildDanmuControlbar(parentId, className);
+			}
+		},
+		
+		notifyResize(width, height) {
+			let vm = this;
+			
+			if (vm.zwplayer) {
+				vm.zwplayer.notifyResize(width, height);
+			}
+		},
+		
+		setMute(bMute) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.zwplayer.setMuted(bMute);
+			}
+		},
+		
+		setullscr(bFullScr) {
+			let vm = this;
+
+			if (vm.zwplayer) {
+				vm.is_fullscr = bFullScr;
+				vm.zwplayer.setFullscreen(bFullScr);
+			}
+		},
+	},
+	
+	render() {
+		let playerid;
+		
+		// console.log('render');
+		if (this.nodeid) {
+			playerid = this.nodeid;
+		}
+		else {
+			let now = (new Date()).getTime();
+			
+			if (!window.nextZWPlayerId) {
+				window.nextZWPlayerId = 1000;
+			}
+			else {
+				window.nextZWPlayerId++;
+			}
+			playerid = 'zwplayer-'+ window.nextZWPlayerId + '-' + now;
+		}
+		
+		let playerWrap = h('div', {
+			class: {'zwplayer-vue': true},
+			id: playerid
+		}, []);
+		
+		if (playerWrap) {
+			let vm = this;
+			vm.playerid = playerid;
+		}
+		
+		if (this.zwplayer && this.murl !== this.old_murl) {
+			this.zwplayer.play(this.murl); // change movie url
+			this.old_murl = this.murl;
+		}
+		
+		return playerWrap;
+	},
+	
+	mounted() {
+		let vm = this;
+		// console.log('mounted');
+		let zwplayer_js;
+		
+		if (vm.zwplayerlib)
+			zwplayer_js = vm.zwplayerlib;
+		else
+			zwplayer_js = zwplayer_js_def;
+			
+		vm.rootElm = document.getElementById(vm.playerid);
+		if (vm.rootElm) {
+			vm.rootElm.style.width = '100%';
+			vm.rootElm.style.height = '100%';
+			vm.rootElm.style.margin = '0';
+			vm.rootElm.style.padding = '0';
+		}
+
+		zwplayer_loadjs('zwplayer-core', zwplayer_js, function(jsid) {
+			let url = '';
+			
+			if (!jsid) {
+				console.log('zwplayer_loadjs failed!');
+			}
+			
+			if (vm.murl)
+				url = vm.murl;
+			else if (vm.videoprop && typeof vm.videoprop.url !== 'undefined')
+				url = vm.videoprop.url;
+			let videostyle = "width:100%;height:100%;";
+			if (vm.videoprop && typeof vm.videoprop.videostyle !== 'undefined')
+				videostyle = vm.videoprop.videostyle;
+			
+			let params = {
+				url: url,
+				playerElm: vm.rootElm,
+				videostyle: videostyle,
+				reconnect: vm.reconnect,
+				autoplay: vm.autoplay,
+				muted: vm.muted,
+				controlbar: vm.controlbar,
+				useProgressTooltip: vm.useProgressTooltip,
+				onready: function() {
+					vm.$emit('onready', this);
+				},
+				onnetclose: function() {
+					vm.$emit('onnetclose', this);
+					return true;
+				},
+				onneterror: function() {
+					vm.$emit('onneterror', this);
+				},
+				onmediaevent: function(event) {
+					vm.$emit('onmediaevent', event, this);
+				}
+			};
+			
+			let props_list = availabe_props;
+			for (let prop in vm.$attrs) {
+				if (prop in props_list && typeof vm.$attrs[prop] === props_list[prop]) {
+					if (typeof vm.$attrs[prop] === 'object')
+						params[prop] = JSON.parse(JSON.stringify(vm.$attrs[prop]));
+					else
+						params[prop] = vm.$attrs[prop];
+				}
+			}
+			
+			vm.zwplayer = new window.ZWPlayer(params);
+			
+			if(params.danmuBarId) {
+				vm.zwplayer.buildDanmuControlbar(params.danmuBarId, 'vue-zwp-danmubar');
+			}
+			
+			vm.old_murl = url;
+		})
+	},
+	
+	beforeUnmount() {
+		let vm = this;
+		// console.log('beforeUnmount');
+		if (vm.zwplayer) {
+			vm.zwplayer.stop();
+		}
+	},
+	
+	unmounted() {
+		let vm = this;
+		// console.log('unmounted');
+		if (vm.zwplayer) {
+			vm.zwplayer.destroy();
+			delete vm.zwplayer;
+		}
+	}
+}
+</script>
+