@shijiu/jsview-vue 0.9.254 → 0.9.267

package/samples/VideoDemo/components/VideoFrame.vue

@@ -1,152 +1,152 @@
-<script>
-import { inject, watch } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import JsvVideo from "jsview/utils/JsViewVueWidget/JsvVideo.vue"
-
-@Options({
-  components: {
-    JsvVideo
-  }
-})
-
-class VideoFrame extends Vue {
-  constructor(props) {
-    super(props);
-    this.useTexture = inject('useTexture');
-    this.objectFit = inject('objectFit');
-    this.videoRect = inject('videoRect');
-    this.playVideo = inject('playVideo');
-    this.seekVideo = inject('seekVideo');
-    this.enableAnimation = inject('enableAnimation');
-    this.videoTime = inject('videoTime');
-    this.playStatus = inject('playStatus')
-    watch(this.playVideo, this.setPlayState.bind(this));
-    watch(this.seekVideo, this.seekVideoStep.bind(this));
-
-    this.videoUrl = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
-    this.canAutoPlay = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整
-
-    this.video = null;
-
-    this.rect = {
-      top: 50, left: 40,
-      width: 1200, height: 500,
-    }
-
-    this.textureAnim = null;
-  }
-
-  mounted() {
-    if(this.canAutoPlay) {
-      this.playVideo = true;
-    }
-  }
-
-  onVideoRef(ele) {
-    this.video = ele;
-  }
-
-  setPlayState(play) {
-    if(play) {
-      this.video?.play();
-    } else {
-      this.video?.pause();
-    }
-  }
-
-  seekVideoStep(time) {
-    if(this.video) {
-      let playEnd = false;
-      let seekTime = this.video.currentTime + Math.ceil(time);
-      if(seekTime < 0) {
-        seekTime = 0;
-      } else if(seekTime > this.videoTime.duration) {
-        seekTime = this.videoTime.duration;
-        if(this.video.currentTime != this.videoTime.duration) { // 触发一次播放，收到ended事件
-          playEnd = true;
-        }
-      }
-      this.video.currentTime = seekTime;
-      if(playEnd) {
-        this.setPlayState(true);
-      }
-    }
-  }
-
-  onPlayStateChange(event) {
-    console.log("VideoFrame.onPlayStateChangeEvent()", event);
-    this.playVideo = (event.type === 'play' ? true : false);
-    if(!(this.playStatus == 'ended' && event.type == 'pause')) { // 忽略播放结束后的pause事件
-      this.playStatus = event.type;
-    }
-  }
-
-  onTimeUpdate(event) {
-    console.log("VideoFrame.onTimeUpdateEvent()", event);
-    this.videoTime.currentTime = this.video.currentTime;
-  }
-
-  onDurationChange(event) {
-    console.log("VideoFrame.onDurationChangeEvent()", event);
-    this.videoTime.duration = this.video.duration;
-  }
-
-  onEvent(event) {
-    console.log("VideoFrame.onEvent()", event);
-  }
-}
-
-export default VideoFrame;
-</script>
-
-<template>
-<div>
-  <div
-      :style="{
-        ...videoRect,
-        backgroundColor: 'rgb(200,100,100)'
-      }"
-  />
-  <JsvVideo
-      :onRef="onVideoRef"
-      :useTexture="useTexture"
-      :src="videoUrl"
-      :autoplay="canAutoPlay ? 'autoplay' : undefined" 
-      :style="{
-        ...videoRect,
-        objectFit: objectFit,
-        animation: (useTexture&&enableAnimation ? 'offscreenAnim 3s infinite' : null),
-        borderRadius: '80px 80px 160px 240px',
-      }"
-      :onCanPlay="onEvent"
-      :onCanPlayThrough="onEvent"
-      :onDurationChange="onDurationChange"
-      :onEnded="onPlayStateChange"
-      :onError="onPlayStateChange"
-      :onLoad="onEvent"
-      :onLoadedMetadata="onEvent"
-      :onLoadStart="onEvent"
-      :onPause="onPlayStateChange"
-      :onPlay="onPlayStateChange"
-      :onPlaying="onEvent"
-      :onProgress="onEvent"
-      :onSeeking="onEvent"
-      :onSeeked="onTimeUpdate"
-      :onStalled="onEvent"
-      :onTimeUpdate="onTimeUpdate"
-  />
-</div>
-</template>
-
-<style scoped>
-@keyframes offscreenAnim {
-  from {
-    transform:scale3d(1, 1, 1) rotate3d(0, 0, 1, -360deg);
-    transform-origin: center center;
-  }
-  to {
-    transform:scale3d(0.4, 0.4, 0) rotate3d(0, 0, 1, 0);
-    transform-origin: center center;
-  }
-}
-</style>
+<script>
+import { inject, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import JsvVideo from "jsview/utils/JsViewVueWidget/JsvVideo.vue"
+
+@Options({
+  components: {
+    JsvVideo
+  }
+})
+
+class VideoFrame extends Vue {
+  constructor(props) {
+    super(props);
+    this.useTexture = inject('useTexture');
+    this.objectFit = inject('objectFit');
+    this.videoRect = inject('videoRect');
+    this.playVideo = inject('playVideo');
+    this.seekVideo = inject('seekVideo');
+    this.enableAnimation = inject('enableAnimation');
+    this.videoTime = inject('videoTime');
+    this.playStatus = inject('playStatus')
+    watch(this.playVideo, this.setPlayState.bind(this));
+    watch(this.seekVideo, this.seekVideoStep.bind(this));
+
+    this.videoUrl = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
+    this.canAutoPlay = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整
+
+    this.video = null;
+
+    this.rect = {
+      top: 50, left: 40,
+      width: 1200, height: 500,
+    }
+
+    this.textureAnim = null;
+  }
+
+  mounted() {
+    if(this.canAutoPlay) {
+      this.playVideo = true;
+    }
+  }
+
+  onVideoRef(ele) {
+    this.video = ele;
+  }
+
+  setPlayState(play) {
+    if(play) {
+      this.video?.play();
+    } else {
+      this.video?.pause();
+    }
+  }
+
+  seekVideoStep(time) {
+    if(this.video) {
+      let playEnd = false;
+      let seekTime = this.video.currentTime + Math.ceil(time);
+      if(seekTime < 0) {
+        seekTime = 0;
+      } else if(seekTime > this.videoTime.duration) {
+        seekTime = this.videoTime.duration;
+        if(this.video.currentTime != this.videoTime.duration) { // 触发一次播放，收到ended事件
+          playEnd = true;
+        }
+      }
+      this.video.currentTime = seekTime;
+      if(playEnd) {
+        this.setPlayState(true);
+      }
+    }
+  }
+
+  onPlayStateChange(event) {
+    console.log("VideoFrame.onPlayStateChangeEvent()", event);
+    this.playVideo = (event.type === 'play' ? true : false);
+    if(!(this.playStatus == 'ended' && event.type == 'pause')) { // 忽略播放结束后的pause事件
+      this.playStatus = event.type;
+    }
+  }
+
+  onTimeUpdate(event) {
+    console.log("VideoFrame.onTimeUpdateEvent()", event);
+    this.videoTime.currentTime = this.video.currentTime;
+  }
+
+  onDurationChange(event) {
+    console.log("VideoFrame.onDurationChangeEvent()", event);
+    this.videoTime.duration = this.video.duration;
+  }
+
+  onEvent(event) {
+    console.log("VideoFrame.onEvent()", event);
+  }
+}
+
+export default VideoFrame;
+</script>
+
+<template>
+<div>
+  <div
+      :style="{
+        ...videoRect,
+        backgroundColor: 'rgb(200,100,100)'
+      }"
+  />
+  <JsvVideo
+      :onRef="onVideoRef"
+      :useTexture="useTexture"
+      :src="videoUrl"
+      :autoplay="canAutoPlay ? 'autoplay' : undefined" 
+      :style="{
+        ...videoRect,
+        objectFit: objectFit,
+        animation: (useTexture&&enableAnimation ? 'offscreenAnim 3s infinite' : null),
+        borderRadius: '80px 80px 160px 240px',
+      }"
+      :onCanPlay="onEvent"
+      :onCanPlayThrough="onEvent"
+      :onDurationChange="onDurationChange"
+      :onEnded="onPlayStateChange"
+      :onError="onPlayStateChange"
+      :onLoad="onEvent"
+      :onLoadedMetadata="onEvent"
+      :onLoadStart="onEvent"
+      :onPause="onPlayStateChange"
+      :onPlay="onPlayStateChange"
+      :onPlaying="onEvent"
+      :onProgress="onEvent"
+      :onSeeking="onEvent"
+      :onSeeked="onTimeUpdate"
+      :onStalled="onEvent"
+      :onTimeUpdate="onTimeUpdate"
+  />
+</div>
+</template>
+
+<style scoped>
+@keyframes offscreenAnim {
+  from {
+    transform:scale3d(1, 1, 1) rotate3d(0, 0, 1, -360deg);
+    transform-origin: center center;
+  }
+  to {
+    transform:scale3d(0.4, 0.4, 0) rotate3d(0, 0, 1, 0);
+    transform-origin: center center;
+  }
+}
+</style>

package/scripts/common.js

@@ -1,116 +1,58 @@
-#!/usr/bin/env node
-
-const fs = require("fs");
-const path = require("path");
-const readline = require('readline')
-const { execSync } = require('child_process');
-
-function updateVersion(projectDir, ignoreChanges)
-{
-  let cmdLine = 'cd ' + projectDir + ' && git rev-list --count HEAD';
-  let patchVersion = execSync(cmdLine, { stderr: "inherit" });
-  patchVersion = parseInt(patchVersion);
-
-  pkgPkgFile = path.resolve(projectDir, 'package.json');
-  if (!fs.existsSync(pkgPkgFile)) {
-    console.error('Error: Failed to install jsview patches, "' + path.relative(projectDir, pkgPkgFile) + '" is not exists.');
-    process.exit(1);
-  }
-  pkgPkgObj = require(pkgPkgFile);
-  if (pkgPkgObj.version.endsWith("." + patchVersion)) {
-    console.info('\nFound version: ' + pkgPkgObj.version);
-    return;
-  }
-
-  if (!ignoreChanges) {
-    let cmdLine = 'cd ' + projectDir + ' && git status --porcelain';
-    let gitChanges = execSync(cmdLine, { stderr: "inherit" });
-    gitChanges = gitChanges.toString();
-    if (gitChanges) {
-      return gitChanges;
-    }
-  }
-
-  // 替换PatchVersion为git 提交数。
-  pkgPkgObj.version = pkgPkgObj.version.replace(/\.[0-9]*$/, '.' + patchVersion);
-
-  fs.writeFileSync(pkgPkgFile, JSON.stringify(pkgPkgObj, null, 2));
-  console.info('\nUpdated version to ' + pkgPkgObj.version);
-}
-
-async function syncReadIO(prompt) {
-  const input = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout
-  });
-  input.on('SIGINT', function () {
-    console.error("Error: User cancelled.")
-    process.exit(1);
-  });
-
-  let ret;
-  input.question(prompt,
-                 answer => {
-                   input.close();
-                   ret = answer;
-                 });
-  for await (const line of input) {}
-
-  return ret;
-}
-
-function cpSync(workDir, src, dest) {
-  const exists = fs.existsSync(src);
-  const stats = exists && fs.statSync(src);
-  const isDirectory = exists && stats.isDirectory();
-  if (isDirectory) {
-    if (fs.existsSync(dest) == false) {
-      fs.mkdirSync(dest);
-    }
-    fs.readdirSync(src).forEach(function(childItemName) {
-      cpSync(
-        workDir,
-        path.join(src, childItemName),
-        path.join(dest, childItemName)
-      );
-    });
-  } else {
-    console.info(
-      "  " + path.relative(workDir, src) + " -> " + path.relative(workDir, dest)
-    );
-    fs.copyFileSync(src, dest);
-  }
-}
-
-function rmSync(path) {
-  if (!!fs.rmSync) {
-    fs.rmSync(path, { recursive: true, force: true });
-  } else {
-    deleteFolderRecursive(path)
-  }
-}
-
-function deleteFolderRecursive(path) {
-  var files = [];
-  if (fs.existsSync(path)) {
-    files = fs.readdirSync(path);
-    files.forEach(function(file, index) {
-      var curPath = path + "/" + file;
-      if (fs.lstatSync(curPath).isDirectory()) {
-        // recurse
-        deleteFolderRecursive(curPath);
-      } else {
-        // delete file
-        fs.unlinkSync(curPath);
-      }
-    });
-    fs.rmdirSync(path);
-  }
-}
-
-module.exports = {
-  cpSync,
-  rmSync,
-  syncReadIO,
-  updateVersion,
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+function cpSync(workDir, src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  if (isDirectory) {
+    if (fs.existsSync(dest) == false) {
+      fs.mkdirSync(dest);
+    }
+    fs.readdirSync(src).forEach(function(childItemName) {
+      cpSync(
+        workDir,
+        path.join(src, childItemName),
+        path.join(dest, childItemName)
+      );
+    });
+  } else {
+    console.info(
+      "  " + path.relative(workDir, src) + " -> " + path.relative(workDir, dest)
+    );
+    fs.copyFileSync(src, dest);
+  }
+}
+
+function rmSync(path) {
+  if (!!fs.rmSync) {
+    fs.rmSync(path, { recursive: true, force: true });
+  } else {
+    deleteFolderRecursive(path)
+  }
+}
+
+function deleteFolderRecursive(path) {
+  var files = [];
+  if (fs.existsSync(path)) {
+    files = fs.readdirSync(path);
+    files.forEach(function(file, index) {
+      var curPath = path + "/" + file;
+      if (fs.lstatSync(curPath).isDirectory()) {
+        // recurse
+        deleteFolderRecursive(curPath);
+      } else {
+        // delete file
+        fs.unlinkSync(curPath);
+      }
+    });
+    fs.rmdirSync(path);
+  }
+}
+
+module.exports = {
+  cpSync,
+  rmSync,
 }

package/scripts/jsview-install-local-packages.js

@@ -1,73 +1,73 @@
-#!/usr/bin/env node
-
-const path = require("path");
-const fs = require("fs");
-const { execSync } = require('child_process');
-const { cpSync, rmSync } = require('./common');
-
-function installPackages(options) {
-  // react/vue3共同的dom
-  const jsviewDomDir = options.rootDir + '/jsview/dom/bin/';
-  const jsviewDomPath = fs.readdirSync(jsviewDomDir).pop(); // 选择最后一个tgz
-  console.info('Found jsview-dom package: ' + jsviewDomDir + '/' + jsviewDomPath);
-  let cmdLine = "npm install file:" + jsviewDomDir + '/' + jsviewDomPath + " jsview-dom";
-  console.info("\nRunning [" + cmdLine + "]... ");
-  execSync(cmdLine, { stdio: "inherit", stderr: "inherit" });
-
-  // vue专有的widget
-  const jsviewReactWidgetDir = options.rootDir + '/jsview/utils/JsViewEngineWidget/bin/';
-  const jsviewReactWidgetPath = fs.readdirSync(jsviewReactWidgetDir).pop(); // 选择最后一个tgz
-  console.info('Found jsview-vue-widget package: ' + jsviewReactWidgetDir + '/' + jsviewReactWidgetPath);
-  cmdLine = "npm install file:" + jsviewReactWidgetDir + '/' + jsviewReactWidgetPath + " @shijiu-jsview/vue-widget";
-  console.info("\nRunning [" + cmdLine + "]... ");
-  execSync(cmdLine, { stdio: "inherit", stderr: "inherit" });
-
-  console.info("\nPatching jsview from " + options.patchDir);
-  cpSync(
-    options.rootDir,
-    options.patchDir + "/node_modules",
-    options.rootDir + "/node_modules"
-  );
-
-  console.info("\nCleanup node_modules cache... ");
-  const nodeModuleCacheDir = options.rootDir + "/node_modules/.cache";
-  rmSync(nodeModuleCacheDir);
-}
-
-async function printRevision(options) {
-  const jsveiwVersionFile = options.jsviewDir + "/dom/target_core_revision.js";
-
-  const jsviewTargetVersion = require(jsveiwVersionFile);
-
-  console.log("");
-  console.log("**************************************************");
-  console.log("* Update revision to:");
-  console.log("* CORE: " + jsviewTargetVersion.CoreRevision);
-  console.log("* ENGINE JS URL: " + jsviewTargetVersion.JseUrl);
-  console.log("**************************************************");
-}
-
-function backupPkgLock() {
-  const pkgLockName = 'package-lock.json';
-  const scriptDir = path.resolve(__dirname);
-  const rootDir = path.join(scriptDir, '/../../');
-
-  console.info("\nBackuping " + pkgLockName);
-  cpSync(rootDir, rootDir + pkgLockName, rootDir + '/jsview/patch/' + pkgLockName);
-}
-
-function main() {
-  const options = {
-    rootDir: path.resolve(__dirname, "../../"),
-    jsviewDir: path.resolve(__dirname, "../"),
-    patchDir: path.resolve(__dirname, "../patch"),
-  };
-
-
-  installPackages(options);
-
-  backupPkgLock();
-
-  printRevision(options);
-}
-main();
+#!/usr/bin/env node
+
+const path = require("path");
+const fs = require("fs");
+const { execSync } = require('child_process');
+const { cpSync, rmSync } = require('./common');
+
+function installPackages(options) {
+  // react/vue3共同的dom
+  const jsviewDomDir = options.rootDir + '/jsview/dom/bin/';
+  const jsviewDomPath = fs.readdirSync(jsviewDomDir).pop(); // 选择最后一个tgz
+  console.info('Found jsview-dom package: ' + jsviewDomDir + '/' + jsviewDomPath);
+  let cmdLine = "npm install file:" + jsviewDomDir + '/' + jsviewDomPath + " jsview-dom";
+  console.info("\nRunning [" + cmdLine + "]... ");
+  execSync(cmdLine, { stdio: "inherit", stderr: "inherit" });
+
+  // vue专有的widget
+  const jsviewReactWidgetDir = options.rootDir + '/jsview/utils/JsViewEngineWidget/bin/';
+  const jsviewReactWidgetPath = fs.readdirSync(jsviewReactWidgetDir).pop(); // 选择最后一个tgz
+  console.info('Found jsview-vue-widget package: ' + jsviewReactWidgetDir + '/' + jsviewReactWidgetPath);
+  cmdLine = "npm install file:" + jsviewReactWidgetDir + '/' + jsviewReactWidgetPath + " @shijiu-jsview/vue-widget";
+  console.info("\nRunning [" + cmdLine + "]... ");
+  execSync(cmdLine, { stdio: "inherit", stderr: "inherit" });
+
+  console.info("\nPatching jsview from " + options.patchDir);
+  cpSync(
+    options.rootDir,
+    options.patchDir + "/node_modules",
+    options.rootDir + "/node_modules"
+  );
+
+  console.info("\nCleanup node_modules cache... ");
+  const nodeModuleCacheDir = options.rootDir + "/node_modules/.cache";
+  rmSync(nodeModuleCacheDir);
+}
+
+async function printRevision(options) {
+  const jsveiwVersionFile = options.jsviewDir + "/dom/target_core_revision.js";
+
+  const jsviewTargetVersion = require(jsveiwVersionFile);
+
+  console.log("");
+  console.log("**************************************************");
+  console.log("* Update revision to:");
+  console.log("* CORE: " + jsviewTargetVersion.CoreRevision);
+  console.log("* ENGINE JS URL: " + jsviewTargetVersion.JseUrl);
+  console.log("**************************************************");
+}
+
+function backupPkgLock() {
+  const pkgLockName = 'package-lock.json';
+  const scriptDir = path.resolve(__dirname);
+  const rootDir = path.join(scriptDir, '/../../');
+
+  console.info("\nBackuping " + pkgLockName);
+  cpSync(rootDir, rootDir + pkgLockName, rootDir + '/jsview/patch/' + pkgLockName);
+}
+
+function main() {
+  const options = {
+    rootDir: path.resolve(__dirname, "../../"),
+    jsviewDir: path.resolve(__dirname, "../"),
+    patchDir: path.resolve(__dirname, "../patch"),
+  };
+
+
+  installPackages(options);
+
+  backupPkgLock();
+
+  printRevision(options);
+}
+main();