haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-01 15:09:14 +00:00
Code Issues Releases Wiki Activity

rewrote inner & shared 'video file view' with react (#3017)

Browse Source 
* rewrote inner & shared 'video file view' with react

* modification
This commit is contained in:
llj
2019-03-01 11:58:27 +08:00
committed by Daniel Pan
parent 17bd372668
commit 25afd1fb1a
12 changed files with 540 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/config/webpack.config.dev.js
View File

@@ -99,6 +99,11 @@ module.exports = {
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + "/shared-file-view-image.js",
],
sharedFileViewVideo: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + "/shared-file-view-video.js",
],
viewFileText: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
@@ -114,6 +119,11 @@ module.exports = {
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + "/view-file-xmind.js",
],
viewFileVideo: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appSrc + "/view-file-video.js",
],
orgAdmin: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),

2
frontend/config/webpack.config.prod.js
View File

@@ -68,9 +68,11 @@ module.exports = {
sharedFileViewMarkdown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-markdown.js"],
sharedFileViewText: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-text.js"],
sharedFileViewImage: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-image.js"],
sharedFileViewVideo: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-video.js"],
viewFileText: [require.resolve('./polyfills'), paths.appSrc + "/view-file-text.js"],
viewFileImage: [require.resolve('./polyfills'), paths.appSrc + "/view-file-image.js"],
viewFileXmind: [require.resolve('./polyfills'), paths.appSrc + "/view-file-xmind.js"],
viewFileVideo: [require.resolve('./polyfills'), paths.appSrc + "/view-file-video.js"],
orgAdmin: [require.resolve('./polyfills'), paths.appSrc + "/pages/org-admin"],
},

217
frontend/package-lock.json generated
View File

@@ -12,6 +12,21 @@
"@babel/types": "^7.0.0"
}
},
"@babel/runtime": {
"version": "7.3.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
"integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
"requires": {
"regenerator-runtime": "^0.12.0"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"@babel/types": {
"version": "7.3.3",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.3.tgz",
@@ -259,6 +274,20 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-11.9.5.tgz",
"integrity": "sha512-vVjM0SVzgaOUpflq4GYBvCpozes8OgIIS5gVXVka+OfK3hvnkC1i93U8WiY2OtNE4XUWyyy/86Kf6e0IHTQw1Q=="
},
"@videojs/http-streaming": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-1.5.1.tgz",
"integrity": "sha512-Pc3aVr4SRINFLhUWjTofVjQ9iMjs9myXnyfJ0AdW0c4bLwJ0Fw7HUsbns+qseuBzVJe01i7J2R/DE1Y4hFgblA==",
"requires": {
"aes-decrypter": "3.0.0",
"global": "^4.3.0",
"m3u8-parser": "4.2.0",
"mpd-parser": "0.7.0",
"mux.js": "5.0.1",
"url-toolkit": "^2.1.3",
"video.js": "^6.8.0 || ^7.0.0"
}
},
"MD5": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/MD5/-/MD5-1.3.0.tgz",
@@ -356,6 +385,16 @@
"resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
"integrity": "sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg=="
},
"aes-decrypter": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.0.0.tgz",
"integrity": "sha1-eEihwUW5/b9Xrj4rWxvHzwZEqPs=",
"requires": {
"commander": "^2.9.0",
"global": "^4.3.2",
"pkcs7": "^1.0.2"
}
},
"after": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@@ -698,9 +737,9 @@
}
},
"babel-core": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.0.tgz",
"integrity": "sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=",
"version": "6.26.3",
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
"integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
"requires": {
"babel-code-frame": "^6.26.0",
"babel-generator": "^6.26.0",
@@ -712,15 +751,15 @@
"babel-traverse": "^6.26.0",
"babel-types": "^6.26.0",
"babylon": "^6.18.0",
"convert-source-map": "^1.5.0",
"debug": "^2.6.8",
"convert-source-map": "^1.5.1",
"debug": "^2.6.9",
"json5": "^0.5.1",
"lodash": "^4.17.4",
"minimatch": "^3.0.4",
"path-is-absolute": "^1.0.1",
"private": "^0.1.7",
"private": "^0.1.8",
"slash": "^1.0.0",
"source-map": "^0.5.6"
"source-map": "^0.5.7"
},
"dependencies": {
"source-map": {
@@ -1361,9 +1400,9 @@
}
},
"babel-plugin-transform-es2015-modules-commonjs": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz",
"integrity": "sha1-DYOUApt9xqvhqX7xgeAHWN0uXYo=",
"version": "6.26.2",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz",
"integrity": "sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==",
"dev": true,
"requires": {
"babel-plugin-transform-strict-mode": "^6.24.1",
@@ -2440,9 +2479,9 @@
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
"integrity": "sha1-Nc7ornaHpJuYA09w3gDE7dOCYwE=",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
"integrity": "sha1-Ls3xRaujj1R0DybO/Q/z4D4SXWo=",
"requires": {
"source-map": "0.5.x"
},
@@ -3423,8 +3462,7 @@
"dom-walk": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
"integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
"dev": true
"integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
},
"domain-browser": {
"version": "1.2.0",
@@ -3659,7 +3697,6 @@
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.10.0.tgz",
"integrity": "sha512-/uh/DhdqIOSkAWifU+8nG78vlQxdLckUdI/sPgy0VhuXi2qJ7T8czBmqIYtLQVpCIFYafChnsRsB5pyb1JdmCQ==",
"dev": true,
"requires": {
"es-to-primitive": "^1.1.1",
"function-bind": "^1.1.1",
@@ -3672,7 +3709,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.1.1.tgz",
"integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=",
"dev": true,
"requires": {
"is-callable": "^1.1.1",
"is-date-object": "^1.0.1",
@@ -4566,6 +4602,14 @@
}
}
},
"for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
"integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
"requires": {
"is-callable": "^1.1.3"
}
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -5394,7 +5438,6 @@
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
"integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
"dev": true,
"requires": {
"min-document": "^2.19.0",
"process": "~0.5.1"
@@ -5403,8 +5446,7 @@
"process": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
"integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
"dev": true
"integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
}
}
},
@@ -6200,6 +6242,11 @@
"resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
},
"individual": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
"integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -6368,8 +6415,7 @@
"is-callable": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.3.tgz",
"integrity": "sha1-hut1OSgF3cM69xySoO7fdO52BLI=",
"dev": true
"integrity": "sha1-hut1OSgF3cM69xySoO7fdO52BLI="
},
"is-ci": {
"version": "1.1.0",
@@ -6390,8 +6436,7 @@
"is-date-object": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
"dev": true
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
},
"is-decimal": {
"version": "1.0.2",
@@ -6439,6 +6484,11 @@
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
},
"is-function": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
"integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
},
"is-glob": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
@@ -6562,7 +6612,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
"dev": true,
"requires": {
"has": "^1.0.1"
}
@@ -6607,8 +6656,7 @@
"is-symbol": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
"integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
"dev": true
"integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI="
},
"is-typedarray": {
"version": "1.0.0",
@@ -7363,9 +7411,9 @@
}
},
"lodash": {
"version": "4.17.5",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
"integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@@ -7497,6 +7545,11 @@
"yallist": "^2.1.2"
}
},
"m3u8-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.2.0.tgz",
"integrity": "sha512-LVHw0U6IPJjwk9i9f7Xe26NqaUHTNlIt4SSWoEfYFROeVKHN6MIjOhbRheI3dg8Jbq5WCuMFQ0QU3EgZpmzFPg=="
},
"macaddress": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.9.tgz",
@@ -7760,7 +7813,6 @@
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
"dev": true,
"requires": {
"dom-walk": "^0.1.0"
}
@@ -7803,6 +7855,15 @@
"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
"integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
},
"mpd-parser": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.7.0.tgz",
"integrity": "sha512-nkzVIkecaDz3q7p4ToN3GR0FV2Odbh0w2sJ8ijsyw79JcBrJoUD3KHIiI8gL0hEDlex7mrVpTxXBsRHowUBmPw==",
"requires": {
"global": "^4.3.2",
"url-toolkit": "^2.1.1"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -7829,6 +7890,11 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
},
"mux.js": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.0.1.tgz",
"integrity": "sha512-yfmJ9CaLGSyRnEwqwzvISSZe6EdcvXIsgapZfuNNFuUQUlYDwltnCgZqV6IG90daY4dYTemK/hxMoxI1bB6RjA=="
},
"nan": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
@@ -8338,6 +8404,15 @@
"is-glob": "^2.0.0"
}
},
"parse-headers": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.2.tgz",
"integrity": "sha512-/LypJhzFmyBIDYP9aDVgeyEb5sQfbfY5mnDq4hVhlQ69js87wXfmEI5V3xI6vvXasqebp0oCytYFLxsBVfCzSg==",
"requires": {
"for-each": "^0.3.3",
"string.prototype.trim": "^1.1.2"
}
},
"parse-json": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -8479,6 +8554,11 @@
"pinkie": "^2.0.0"
}
},
"pkcs7": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.2.tgz",
"integrity": "sha1-ttulJ1KMKUK/wSLOLa/NteWQdOc="
},
"pkg-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -10850,6 +10930,14 @@
"is-promise": "^2.1.0"
}
},
"rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
"requires": {
"individual": "^2.0.0"
}
},
"rx-lite": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -10868,6 +10956,14 @@
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
},
"safe-json-parse": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
"integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
"requires": {
"rust-result": "^1.0.0"
}
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -11520,6 +11616,16 @@
}
}
},
"string.prototype.trim": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
"integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
"requires": {
"define-properties": "^1.1.2",
"es-abstract": "^1.5.0",
"function-bind": "^1.0.2"
}
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
@@ -11856,6 +11962,11 @@
"resolved": "https://registry.npmjs.org/trough/-/trough-1.0.3.tgz",
"integrity": "sha512-fwkLWH+DimvA4YCy+/nvJd61nWQQ2liO/nF/RjkTpiOGi+zxZzVkhb1mvbHIIW4b/8nDsYI8uTmAlc0nNkRMOw=="
},
"tsml": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
"integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
},
"tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -12198,6 +12309,11 @@
"prepend-http": "^1.0.1"
}
},
"url-toolkit": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.1.6.tgz",
"integrity": "sha512-UaZ2+50am4HwrV2crR/JAf63Q4VvPYphe63WGeoJxeu8gmOm0qxPt+KsukfakPNrX9aymGNEkkaoICwn+OuvBw=="
},
"user-home": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
@@ -12312,6 +12428,34 @@
"unist-util-stringify-position": "^1.1.1"
}
},
"video.js": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.4.1.tgz",
"integrity": "sha512-UmTHiJWcil8YN65M1t/d63X6ofLtQwnvJoYEN4VKzkECYIHbgzvMRgOmrf5bNtVeDC6JsFKLZQXJ7s6Au2jgcQ==",
"requires": {
"@babel/runtime": "^7.2.0",
"@videojs/http-streaming": "1.5.1",
"global": "4.3.2",
"safe-json-parse": "4.0.0",
"tsml": "1.0.1",
"videojs-font": "3.1.0",
"videojs-vtt.js": "0.14.1",
"xhr": "2.4.0"
}
},
"videojs-font": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.1.0.tgz",
"integrity": "sha512-rxB68SVgbHD+kSwoNWNCHicKJuR2ga3bGfvGxmB+8fupsiLbnyCwTBVtrZUq4bZnD64mrKP1DxHiutxwrs59pQ=="
},
"videojs-vtt.js": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz",
"integrity": "sha512-YxOiywx6N9t3J5nqsE5WN2Sw4CSqVe3zV+AZm2T4syOc2buNJaD6ZoexSdeszx2sHLU/RRo2r4BJAXFDQ7Qo2Q==",
"requires": {
"global": "^4.3.1"
}
},
"vm-browserify": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
@@ -12993,6 +13137,17 @@
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
"integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
},
"xhr": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
"integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
"requires": {
"global": "~4.3.0",
"is-function": "^1.0.1",
"parse-headers": "^2.0.0",
"xtend": "^4.0.0"
}
},
"xml-char-classes": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",

3
frontend/package.json
View File

@@ -41,6 +41,7 @@
"url-loader": "0.6.2",
"url-parse": "^1.4.3",
"vfile": "^3.0.0",
"video.js": "^7.4.1",
"watermark-dom": "^1.0.0",
"whatwg-fetch": "2.0.3"
},
@@ -94,7 +95,7 @@
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",

32
frontend/src/components/video-player.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
class VideoPlayer extends React.Component {
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
});
}
// destroy player on unmount
componentWillUnmount() {
if (this.player) {
this.player.dispose();
}
}
// wrap the player in a div with a `data-vjs-player` attribute
// so videojs won't create additional wrapper in the DOM
// see https://github.com/videojs/video.js/pull/3856
render() {
return (
<div data-vjs-player>
<video ref={ node => this.videoNode = node } className="video-js"></video>
</div>
);
}
}
export default VideoPlayer;

8
frontend/src/css/video-file-view.css Normal file
View File

@@ -0,0 +1,8 @@
.video-file-view {
overflow: auto;
}
.video-js {
width: calc(100% - 40px);
max-width: 800px;
margin: 0 auto;
}

149
frontend/src/shared-file-view-video.js Normal file
View File

@@ -0,0 +1,149 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Account from './components/common/account';
import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
import { Button } from 'reactstrap';
import { Utils } from './utils/utils';
import SaveSharedFileDialog from './components/dialog/save-shared-file-dialog';
import toaster from './components/toast';
import VideoPlayer from './components/video-player';
import watermark from 'watermark-dom';
import './css/shared-file-view.css';
import './css/video-file-view.css';
let loginUser = window.app.pageOptions.name;
const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, rawPath, sharedBy, siteName, enableWatermark, download, err } = window.shared.pageOptions;
class SharedFileViewVideo extends React.Component {
constructor(props) {
super(props);
this.state = {
showSaveSharedFileDialog: false
};
}
handleSaveSharedFileDialog = () => {
this.setState({
showSaveSharedFileDialog: true
});
}
toggleCancel = () => {
this.setState({
showSaveSharedFileDialog: false
});
}
handleSaveSharedFile = () => {
toaster.success(gettext('Successfully saved'), {
duration: 3
});
}
componentDidMount() {
if (trafficOverLimit == 'True') {
toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
duration: 3
});
}
}
getContent() {
if (err) {
let errorMsg;
if (err == 'File preview unsupported') {
errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
} else {
errorMsg = <p className="error">{err}</p>;
}
return (
<div className="shared-file-view-body">
<div className="file-view-tip">
{errorMsg}
</div>
</div>
);
} else {
const videoJsOptions = {
autoplay: false,
controls: true,
sources: [{
src: rawPath
}]
};
return (
<div className="shared-file-view-body d-flex text-center">
<div className="video-file-view flex-1">
<VideoPlayer { ...videoJsOptions } />
</div>
</div>
);
}
}
render() {
return (
<div className="shared-file-view-md">
<div className="shared-file-view-md-header d-flex">
<React.Fragment>
<a href={siteRoot}>
<img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
</a>
</React.Fragment>
{ loginUser && <Account /> }
</div>
<div className="shared-file-view-md-main">
<div className="shared-file-view-head">
<div className="float-left">
<h2 className="ellipsis" title={fileName}>{fileName}</h2>
<p className="share-by ellipsis">{gettext('Shared by:')}{' '}{sharedBy}</p>
</div>
{download &&
<div className="float-right">
{(loginUser && loginUser !== sharedBy) &&
<Button color="secondary" id="save" className="shared-file-op-btn"
onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
</Button>
}{' '}
{(trafficOverLimit === 'False') &&
<Button color="success" className="shared-file-op-btn">
<a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
</Button>
}
</div>
}
</div>
{this.getContent()}
</div>
{this.state.showSaveSharedFileDialog &&
<SaveSharedFileDialog
repoID={repoID}
sharedToken={sharedToken}
toggleCancel={this.toggleCancel}
handleSaveSharedFile={this.handleSaveSharedFile}
/>
}
</div>
);
}
}
if (enableWatermark) {
let watermark_txt;
if (loginUser) {
watermark_txt = siteName + ' ' + loginUser;
} else {
watermark_txt = gettext('Anonymous User');
}
watermark.init({
watermark_txt: watermark_txt,
watermark_alpha: 0.075
});
}
ReactDOM.render(
<SharedFileViewVideo />,
document.getElementById('wrapper')
);

2
frontend/src/view-file-text.js
View File

@@ -37,7 +37,7 @@ const { isStarred, isLocked, lockedByMe,
const options = {
lineNumbers: false,
mode: Utils.chooseLanguage(fileExt.slice(3, fileExt.length -3)),
mode: Utils.chooseLanguage(fileExt),
extraKeys: {'Ctrl': 'autocomplete'},
theme: 'default',
autoMatchParens: true,

132
frontend/src/view-file-video.js Normal file
View File

@@ -0,0 +1,132 @@
import React from 'react';
import ReactDOM from 'react-dom';
import watermark from 'watermark-dom';
import { seafileAPI } from './utils/seafile-api';
import { siteName } from './utils/constants';
import FileInfo from './components/file-view/file-info';
import FileToolbar from './components/file-view/file-toolbar';
import FileViewTip from './components/file-view/file-view-tip';
import CommentPanel from './components/file-view/comment-panel';
import VideoPlayer from './components/video-player';
import './css/file-view.css';
import './css/video-file-view.css';
const { isStarred, isLocked, lockedByMe,
repoID, filePath, err, enableWatermark, userNickName,
// the following are only for this type of file view
rawPath
} = window.app.pageOptions;
class ViewFileVideo extends React.Component {
constructor(props) {
super(props);
this.state = {
isStarred: isStarred,
isLocked: isLocked,
lockedByMe: lockedByMe,
isCommentPanelOpen: false
};
}
toggleCommentPanel = () => {
this.setState({
isCommentPanelOpen: !this.state.isCommentPanelOpen
});
}
toggleStar = () => {
if (this.state.isStarred) {
seafileAPI.unStarFile(repoID, filePath).then((res) => {
this.setState({
isStarred: false
});
});
} else {
seafileAPI.starFile(repoID, filePath).then((res) => {
this.setState({
isStarred: true
});
});
}
}
toggleLockFile = () => {
if (this.state.isLocked) {
seafileAPI.unlockfile(repoID, filePath).then((res) => {
this.setState({
isLocked: false,
lockedByMe: false
});
});
} else {
seafileAPI.lockfile(repoID, filePath).then((res) => {
this.setState({
isLocked: true,
lockedByMe: true
});
});
}
}
render() {
return (
<div className="h-100 d-flex flex-column">
<div className="file-view-header d-flex justify-content-between">
<FileInfo
isStarred={this.state.isStarred}
isLocked={this.state.isLocked}
toggleStar={this.toggleStar}
/>
<FileToolbar
isLocked={this.state.isLocked}
lockedByMe={this.state.lockedByMe}
toggleLockFile={this.toggleLockFile}
toggleCommentPanel={this.toggleCommentPanel}
/>
</div>
<div className="file-view-body flex-auto d-flex">
<FileContent />
{this.state.isCommentPanelOpen &&
<CommentPanel toggleCommentPanel={this.toggleCommentPanel} />
}
</div>
</div>
);
}
}
class FileContent extends React.Component {
render() {
if (err) {
return <FileViewTip />;
}
const videoJsOptions = {
autoplay: false,
controls: true,
sources: [{
src: rawPath
}]
};
return (
<div className="file-view-content flex-1 video-file-view">
<VideoPlayer { ...videoJsOptions } />
</div>
);
}
}
if (enableWatermark) {
watermark.init({
watermark_txt: `${siteName} ${userNickName}`,
watermark_alpha: 0.075
});
}
ReactDOM.render (
<ViewFileVideo />,
document.getElementById('wrapper')
);

2
seahub/templates/shared_file_view_react.html
View File

@@ -31,5 +31,7 @@
{% render_bundle 'sharedFileViewText' %}
{% elif filetype == 'Image' %}
{% render_bundle 'sharedFileViewImage' %}
{% elif filetype == 'Video' %}
{% render_bundle 'sharedFileViewVideo' %}
{% endif %}
{% endblock %}

11
seahub/templates/video_file_view_react.html Normal file
View File

@@ -0,0 +1,11 @@
{% extends 'file_view_react.html' %}
{% load render_bundle from webpack_loader %}
{% load seahub_tags %}
{% block extra_data %}
rawPath: '{{ raw_path|escapejs }}'
{% endblock %}
{% block render_bundle %}
{% render_bundle 'viewFileVideo' %}
{% endblock %}

7
seahub/views/file.py
View File

@@ -571,7 +571,7 @@ def view_lib_file(request, repo_id, path):
# get file type and extention
filetype, fileext = get_file_type_and_ext(filename)
return_dict['fileext'] = fileext,
return_dict['fileext'] = fileext
return_dict['filetype'] = filetype
# get file raw url
@@ -696,6 +696,9 @@ def view_lib_file(request, repo_id, path):
elif filetype in (VIDEO, AUDIO, PDF, SVG):
return_dict['raw_path'] = raw_path
send_file_access_msg(request, repo, path, 'web')
if filetype == VIDEO:
template = '%s_file_view_react.html' % filetype.lower()
return render(request, template, return_dict)
elif filetype == DRAW:
@@ -1233,7 +1236,7 @@ def view_shared_file(request, fileshare):
template = 'shared_file_view.html'
if is_textual_file(file_type=filetype) or filetype == IMAGE:
if is_textual_file(file_type=filetype) or filetype in (IMAGE, VIDEO):
template = 'shared_file_view_react.html'
return render(request, template, {