├── .eslintrc
├── .firebaserc
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js
├── firebase.json
├── package-lock.json
├── package.json
├── public
├── assets
│ └── favicon.ico
├── files
│ └── PDFTRON_about.pdf
├── index.html
├── manifest.json
└── serve.json
├── samples
├── compare
│ ├── index.html
│ └── index.js
├── index.html
├── redaction
│ ├── index.html
│ └── index.js
└── style.css
├── scripts
├── build.js
├── start.js
└── test.js
├── src
├── App.css
├── App.js
├── App.test.js
├── constants
│ └── demo-vars.js
├── index.css
└── index.js
└── tools
└── copy-webviewer-files.js
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "plugins": ["babel", "react", "react-hooks", "import"],
4 | "env": {
5 | "browser": true,
6 | "node": true,
7 | "es6": true
8 | },
9 | "globals": {
10 | "_": false,
11 | "Annotations": false,
12 | "Tools": false
13 | },
14 | "extends": [
15 | "eslint:recommended",
16 | "plugin:react/recommended"
17 | ],
18 | "rules": {
19 | "quotes": [
20 | 0,
21 | "single",
22 | {
23 | "allowTemplateLiterals": true
24 | }
25 | ],
26 | "curly": 2,
27 | "strict": [2, "never"],
28 | "semi": [2, "always"],
29 | "no-redeclare": [
30 | 2,
31 | {
32 | "builtinGlobals": true
33 | }
34 | ],
35 | "brace-style": 2,
36 | "no-alert": 0,
37 | "no-console": [
38 | 0,
39 | {
40 | "allow": ["warn", "error"]
41 | }
42 | ],
43 | "object-shorthand": [2, "always"],
44 | "arrow-parens": [2, "as-needed"],
45 | "no-useless-escape": 0,
46 | "eqeqeq": 2,
47 | "jsx-quotes": 2,
48 | "indent": [
49 | 2,
50 | 2,
51 | {
52 | "MemberExpression": 1,
53 | "ArrayExpression": 1,
54 | "ImportDeclaration": 1,
55 | "SwitchCase": 1,
56 | "FunctionExpression": {
57 | "body": 1
58 | }
59 | }
60 | ],
61 | "keyword-spacing": 2,
62 | "space-before-blocks": 2,
63 | "arrow-spacing": 2,
64 | "object-curly-spacing": [2, "always"],
65 | "react/jsx-closing-bracket-location": 2,
66 | "react/jsx-curly-spacing": 2,
67 | "react/jsx-boolean-value": 2,
68 | "react/prop-types": 2,
69 | "react-hooks/rules-of-hooks": 2,
70 | "react-hooks/exhaustive-deps": 1,
71 | "react/sort-comp": 0,
72 | "react/no-find-dom-node": 0,
73 | "react/display-name": 0,
74 | "import/no-unresolved": 0,
75 | "import/extensions": 0,
76 | "import/no-extraneous-dependencies": 0,
77 | "import/no-dynamic-require": 0,
78 | "@pdftron/webviewer/no-string-events": 0,
79 |
80 | // these are inherited from git WebViewer's eslint confirguration
81 | "no-use-before-define": 0,
82 | "implicit-arrow-linebreak": 0,
83 | "operator-linebreak": 0,
84 | "function-paren-newline": 0,
85 | "object-curly-newline": 0,
86 | "no-nested-ternary": 0,
87 | "no-unexpected-multiline": 0,
88 | "no-unused-expressions": 0
89 | },
90 | "settings": {
91 | "react": {
92 | "version": "detect"
93 | }
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 | "projects": {
3 | "default": "webviewer-video"
4 | },
5 | "targets": {
6 | "webviewer-video": {
7 | "hosting": {
8 | "webviewer-video": [
9 | "webviewer-video"
10 | ],
11 | "webviewer-video-compare": [
12 | "webviewer-video-compare"
13 | ]
14 | }
15 | }
16 | }
17 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # WebViewer
4 | public/webviewer
5 | public/ffprobe
6 | public/wv-video-injection.js
7 |
8 | # dependencies
9 | /node_modules
10 | /.pnp
11 | .pnp.js
12 |
13 | # testing
14 | /coverage
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | .env.local
22 | .env.development.local
23 | .env.test.local
24 | .env.production.local
25 | package-lock.json
26 | /public/assets/webviewer/core
27 | /public/assets/webviewer/ui
28 |
29 | npm-debug.log*
30 | yarn-debug.log*
31 | yarn-error.log*
32 |
33 | .firebase/
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to WebViewer - React sample
2 |
3 | ## Issues
4 | 1. Check existing issues (open/closed) to avoid duplicates.
5 | 2. Be clear about what the problem is.
6 | 3. Make sure to paste error output or logs.
7 | 4. Code snapshot or demos on online code editor will be very helpful.
8 |
9 | ## Pull requests
10 | 1. Fork the repository.
11 | 2. Create a branch from `master`.
12 | 3. Update the source code using style guides described below.
13 | 4. Lint your code with `npm run lint`.
14 | 5. Commit and push the changes with descriptive messages.
15 | 6. Create a pull request to `master`.
16 |
17 | \* Please note that all pull requests should be tied to an issue, and all but the most trivial pull requests should be discussed before hand.
18 |
19 | ## Style guides
20 | - Tab indentation (size of 2 spaces).
21 | - `'` instead of `"`.
22 | - Curly braces for block statements.
23 | - 1TBS brace style.
24 | - Semicolon at the end of each statement.
25 | - Object shorthand for ES6.
26 | - Parenthesis around arrow function argument.
27 | - Minimum line breaks.
28 | - No `use strict`.
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2018 PDFTron Systems Inc. All rights reserved.
2 | WebViewer React UI project/codebase or any derived works is only permitted in solutions with an active commercial PDFTron WebViewer license. For exact licensing terms please refer to your commercial WebViewer license. For use in other scenario, please contact sales@pdftron.com
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WebViewer Video
2 |
3 | ⚠️ This sample has been moved to the [webviewer-samples repo](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-video). ⚠️
--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const fs = require('fs');
4 | const path = require('path');
5 | const paths = require('./paths');
6 |
7 | // Make sure that including paths.js after env.js will read .env variables.
8 | delete require.cache[require.resolve('./paths')];
9 |
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 | throw new Error(
13 | 'The NODE_ENV environment variable is required but was not specified.'
14 | );
15 | }
16 |
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 | `${paths.dotenv}.${NODE_ENV}.local`,
20 | `${paths.dotenv}.${NODE_ENV}`,
21 | // Don't include `.env.local` for `test` environment
22 | // since normally you expect tests to produce the same
23 | // results for everyone
24 | NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 | paths.dotenv,
26 | ].filter(Boolean);
27 |
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set. Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 | if (fs.existsSync(dotenvFile)) {
35 | require('dotenv-expand')(
36 | require('dotenv').config({
37 | path: dotenvFile,
38 | })
39 | );
40 | }
41 | });
42 |
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 | .split(path.delimiter)
55 | .filter(folder => folder && !path.isAbsolute(folder))
56 | .map(folder => path.resolve(appDirectory, folder))
57 | .join(path.delimiter);
58 |
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 |
63 | function getClientEnvironment(publicUrl) {
64 | const raw = Object.keys(process.env)
65 | .filter(key => REACT_APP.test(key))
66 | .reduce(
67 | (env, key) => {
68 | env[key] = process.env[key];
69 | return env;
70 | },
71 | {
72 | // Useful for determining whether we’re running in production mode.
73 | // Most importantly, it switches React into the correct mode.
74 | NODE_ENV: process.env.NODE_ENV || 'development',
75 | // Useful for resolving the correct path to static assets in `public`.
76 | // For example, 
.
77 | // This should only be used as an escape hatch. Normally you would put
78 | // images into the `src` and `import` them in code to get their paths.
79 | PUBLIC_URL: publicUrl,
80 | }
81 | );
82 | // Stringify all values so we can feed into Webpack DefinePlugin
83 | const stringified = {
84 | 'process.env': Object.keys(raw).reduce((env, key) => {
85 | env[key] = JSON.stringify(raw[key]);
86 | return env;
87 | }, {}),
88 | };
89 |
90 | return { raw, stringified };
91 | }
92 |
93 | module.exports = getClientEnvironment;
94 |
--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/en/webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | const assetFilename = JSON.stringify(path.basename(filename));
11 |
12 | if (filename.match(/\.svg$/)) {
13 | return `module.exports = {
14 | __esModule: true,
15 | default: ${assetFilename},
16 | ReactComponent: (props) => ({
17 | $$typeof: Symbol.for('react.element'),
18 | type: 'svg',
19 | ref: null,
20 | key: null,
21 | props: Object.assign({}, props, {
22 | children: ${assetFilename}
23 | })
24 | }),
25 | };`;
26 | }
27 |
28 | return `module.exports = ${assetFilename};`;
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebook/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(inputPath, needsSlash) {
15 | const hasSlash = inputPath.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return inputPath.substr(0, inputPath.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${inputPath}/`;
20 | } else {
21 | return inputPath;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right
37 |
38 |
48 |
49 |