customvidplayer 0.0.11 → 0.0.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/babel.config.js +4 -0
  2. package/dist/components/Section.js +29 -19
  3. package/dist/components/ThemeProvider.js +37 -30
  4. package/dist/components/VideoPlayer.js +110 -89
  5. package/dist/index.js +32 -12
  6. package/package.json +6 -2
  7. package/tsconfig.json +1 -0
package/babel.config.js ADDED
@@ -0,0 +1,4 @@
1
+ presets: [
2
+ // ... other presets ...
3
+ "@babel/preset-react"
4
+ ]
package/dist/components/Section.js CHANGED
@@ -1,19 +1,29 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- var react_1 = __importDefault(require("react"));
7
- var prop_types_1 = __importDefault(require("prop-types"));
8
- var Section = function (_a) {
9
- var name = _a.name, timestamp = _a.timestamp, onClick = _a.onClick;
10
- return (<div className="section" onClick={function () { return onClick(timestamp); }}>
11
- {name}
12
- </div>);
13
- };
14
- Section.propTypes = {
15
- name: prop_types_1.default.string.isRequired,
16
- timestamp: prop_types_1.default.number.isRequired,
17
- onClick: prop_types_1.default.func.isRequired,
18
- };
19
- exports.default = Section;
1
+ "use strict";
2
+
3
+ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
4
+ return mod && mod.__esModule ? mod : {
5
+ "default": mod
6
+ };
7
+ };
8
+ Object.defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ var react_1 = __importDefault(require("react"));
12
+ var prop_types_1 = __importDefault(require("prop-types"));
13
+ var Section = function Section(_a) {
14
+ var name = _a.name,
15
+ timestamp = _a.timestamp,
16
+ _onClick = _a.onClick;
17
+ return react_1["default"].createElement("div", {
18
+ className: "section",
19
+ onClick: function onClick() {
20
+ return _onClick(timestamp);
21
+ }
22
+ }, name);
23
+ };
24
+ Section.propTypes = {
25
+ name: prop_types_1["default"].string.isRequired,
26
+ timestamp: prop_types_1["default"].number.isRequired,
27
+ onClick: prop_types_1["default"].func.isRequired
28
+ };
29
+ exports["default"] = Section;
package/dist/components/ThemeProvider.js CHANGED
@@ -1,30 +1,37 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- var react_1 = __importDefault(require("react"));
18
- var prop_types_1 = __importDefault(require("prop-types"));
19
- var ThemeProvider = function (_a) {
20
- var theme = _a.theme, children = _a.children;
21
- return (<div style={__assign({}, theme)}>{children}</div>);
22
- };
23
- ThemeProvider.propTypes = {
24
- theme: prop_types_1.default.object,
25
- children: prop_types_1.default.node.isRequired,
26
- };
27
- ThemeProvider.defaultProps = {
28
- theme: {},
29
- };
30
- exports.default = ThemeProvider;
1
+ "use strict";
2
+
3
+ var __assign = void 0 && (void 0).__assign || function () {
4
+ __assign = Object.assign || function (t) {
5
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
6
+ s = arguments[i];
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
14
+ return mod && mod.__esModule ? mod : {
15
+ "default": mod
16
+ };
17
+ };
18
+ Object.defineProperty(exports, "__esModule", {
19
+ value: true
20
+ });
21
+ var react_1 = __importDefault(require("react"));
22
+ var prop_types_1 = __importDefault(require("prop-types"));
23
+ var ThemeProvider = function ThemeProvider(_a) {
24
+ var theme = _a.theme,
25
+ children = _a.children;
26
+ return react_1["default"].createElement("div", {
27
+ style: __assign({}, theme)
28
+ }, children);
29
+ };
30
+ ThemeProvider.propTypes = {
31
+ theme: prop_types_1["default"].object,
32
+ children: prop_types_1["default"].node.isRequired
33
+ };
34
+ ThemeProvider.defaultProps = {
35
+ theme: {}
36
+ };
37
+ exports["default"] = ThemeProvider;
package/dist/components/VideoPlayer.js CHANGED
@@ -1,89 +1,110 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- var __importDefault = (this && this.__importDefault) || function (mod) {
37
- return (mod && mod.__esModule) ? mod : { "default": mod };
38
- };
39
- Object.defineProperty(exports, "__esModule", { value: true });
40
- var react_1 = __importStar(require("react"));
41
- var prop_types_1 = __importDefault(require("prop-types"));
42
- require("./../styles/defaultTheme.css");
43
- var VideoPlayer = function (_a) {
44
- var videoSrc = _a.videoSrc, sections = _a.sections, onSectionChange = _a.onSectionChange, theme = _a.theme;
45
- var videoRef = (0, react_1.useRef)(null);
46
- var _b = (0, react_1.useState)(0), currentSectionIndex = _b[0], setCurrentSectionIndex = _b[1];
47
- var skipToNextSection = function () {
48
- if (currentSectionIndex < sections.length - 1) {
49
- var nextSection = sections[currentSectionIndex + 1];
50
- videoRef.current.currentTime = nextSection.timestamp;
51
- setCurrentSectionIndex(currentSectionIndex + 1);
52
- if (onSectionChange)
53
- onSectionChange(nextSection);
54
- }
55
- };
56
- var handleTimeUpdate = function () {
57
- var currentTime = videoRef.current.currentTime;
58
- var currentSection = sections.find(function (section, index) {
59
- return currentTime >= section.timestamp &&
60
- (index === sections.length - 1 || currentTime < sections[index + 1].timestamp);
61
- });
62
- if (currentSection && sections[currentSectionIndex] !== currentSection) {
63
- var newIndex = sections.indexOf(currentSection);
64
- setCurrentSectionIndex(newIndex);
65
- if (onSectionChange)
66
- onSectionChange(currentSection);
67
- }
68
- };
69
- return (<div className="video-player" style={__assign({}, theme)}>
70
- <video src={videoSrc} controls ref={videoRef} onTimeUpdate={handleTimeUpdate} className="video-element"/>
71
- <button onClick={skipToNextSection} className="skip-button">
72
- Skip
73
- </button>
74
- </div>);
75
- };
76
- VideoPlayer.propTypes = {
77
- videoSrc: prop_types_1.default.string.isRequired,
78
- sections: prop_types_1.default.arrayOf(prop_types_1.default.shape({
79
- name: prop_types_1.default.string.isRequired,
80
- timestamp: prop_types_1.default.number.isRequired,
81
- })).isRequired,
82
- onSectionChange: prop_types_1.default.func,
83
- theme: prop_types_1.default.object,
84
- };
85
- VideoPlayer.defaultProps = {
86
- theme: {},
87
- onSectionChange: null,
88
- };
89
- exports.default = VideoPlayer;
1
+ "use strict";
2
+
3
+ var __assign = void 0 && (void 0).__assign || function () {
4
+ __assign = Object.assign || function (t) {
5
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
6
+ s = arguments[i];
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = {
18
+ enumerable: true,
19
+ get: function get() {
20
+ return m[k];
21
+ }
22
+ };
23
+ }
24
+ Object.defineProperty(o, k2, desc);
25
+ } : function (o, m, k, k2) {
26
+ if (k2 === undefined) k2 = k;
27
+ o[k2] = m[k];
28
+ });
29
+ var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
30
+ Object.defineProperty(o, "default", {
31
+ enumerable: true,
32
+ value: v
33
+ });
34
+ } : function (o, v) {
35
+ o["default"] = v;
36
+ });
37
+ var __importStar = void 0 && (void 0).__importStar || function (mod) {
38
+ if (mod && mod.__esModule) return mod;
39
+ var result = {};
40
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
41
+ __setModuleDefault(result, mod);
42
+ return result;
43
+ };
44
+ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
45
+ return mod && mod.__esModule ? mod : {
46
+ "default": mod
47
+ };
48
+ };
49
+ Object.defineProperty(exports, "__esModule", {
50
+ value: true
51
+ });
52
+ var react_1 = __importStar(require("react"));
53
+ var prop_types_1 = __importDefault(require("prop-types"));
54
+ require("./../styles/defaultTheme.css");
55
+ var VideoPlayer = function VideoPlayer(_a) {
56
+ var videoSrc = _a.videoSrc,
57
+ sections = _a.sections,
58
+ onSectionChange = _a.onSectionChange,
59
+ theme = _a.theme;
60
+ var videoRef = (0, react_1.useRef)(null);
61
+ var _b = (0, react_1.useState)(0),
62
+ currentSectionIndex = _b[0],
63
+ setCurrentSectionIndex = _b[1];
64
+ var skipToNextSection = function skipToNextSection() {
65
+ if (currentSectionIndex < sections.length - 1) {
66
+ var nextSection = sections[currentSectionIndex + 1];
67
+ videoRef.current.currentTime = nextSection.timestamp;
68
+ setCurrentSectionIndex(currentSectionIndex + 1);
69
+ if (onSectionChange) onSectionChange(nextSection);
70
+ }
71
+ };
72
+ var handleTimeUpdate = function handleTimeUpdate() {
73
+ var currentTime = videoRef.current.currentTime;
74
+ var currentSection = sections.find(function (section, index) {
75
+ return currentTime >= section.timestamp && (index === sections.length - 1 || currentTime < sections[index + 1].timestamp);
76
+ });
77
+ if (currentSection && sections[currentSectionIndex] !== currentSection) {
78
+ var newIndex = sections.indexOf(currentSection);
79
+ setCurrentSectionIndex(newIndex);
80
+ if (onSectionChange) onSectionChange(currentSection);
81
+ }
82
+ };
83
+ return react_1["default"].createElement("div", {
84
+ className: "video-player",
85
+ style: __assign({}, theme)
86
+ }, react_1["default"].createElement("video", {
87
+ src: videoSrc,
88
+ controls: true,
89
+ ref: videoRef,
90
+ onTimeUpdate: handleTimeUpdate,
91
+ className: "video-element"
92
+ }), react_1["default"].createElement("button", {
93
+ onClick: skipToNextSection,
94
+ className: "skip-button"
95
+ }, "Skip"));
96
+ };
97
+ VideoPlayer.propTypes = {
98
+ videoSrc: prop_types_1["default"].string.isRequired,
99
+ sections: prop_types_1["default"].arrayOf(prop_types_1["default"].shape({
100
+ name: prop_types_1["default"].string.isRequired,
101
+ timestamp: prop_types_1["default"].number.isRequired
102
+ })).isRequired,
103
+ onSectionChange: prop_types_1["default"].func,
104
+ theme: prop_types_1["default"].object
105
+ };
106
+ VideoPlayer.defaultProps = {
107
+ theme: {},
108
+ onSectionChange: null
109
+ };
110
+ exports["default"] = VideoPlayer;
package/dist/index.js CHANGED
@@ -1,12 +1,32 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ThemeProvider = exports.Section = exports.VideoPlayer = void 0;
7
- var VideoPlayer_1 = require("./components/VideoPlayer");
8
- Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });
9
- var Section_1 = require("./components/Section");
10
- Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
11
- var ThemeProvider_1 = require("./components/ThemeProvider");
12
- Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(ThemeProvider_1).default; } });
1
+ "use strict";
2
+
3
+ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
4
+ return mod && mod.__esModule ? mod : {
5
+ "default": mod
6
+ };
7
+ };
8
+ Object.defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ exports.ThemeProvider = exports.Section = exports.VideoPlayer = void 0;
12
+ var VideoPlayer_1 = require("./components/VideoPlayer");
13
+ Object.defineProperty(exports, "VideoPlayer", {
14
+ enumerable: true,
15
+ get: function get() {
16
+ return __importDefault(VideoPlayer_1)["default"];
17
+ }
18
+ });
19
+ var Section_1 = require("./components/Section");
20
+ Object.defineProperty(exports, "Section", {
21
+ enumerable: true,
22
+ get: function get() {
23
+ return __importDefault(Section_1)["default"];
24
+ }
25
+ });
26
+ var ThemeProvider_1 = require("./components/ThemeProvider");
27
+ Object.defineProperty(exports, "ThemeProvider", {
28
+ enumerable: true,
29
+ get: function get() {
30
+ return __importDefault(ThemeProvider_1)["default"];
31
+ }
32
+ });
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "customvidplayer",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "description": "Customizable video player with section navigation and theming.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {
8
- "build": "tsc",
8
+ "build": "tsc && babel dist --out-dir dist --presets=@babel/preset-env,@babel/preset-react",
9
9
  "start": "webpack serve",
10
10
  "test": "jest"
11
11
  },
@@ -14,6 +14,10 @@
14
14
  "react": "^18.0.0"
15
15
  },
16
16
  "devDependencies": {
17
+ "@babel/cli": "^7.25.9",
18
+ "@babel/core": "^7.26.0",
19
+ "@babel/preset-env": "^7.26.0",
20
+ "@babel/preset-react": "^7.25.9",
17
21
  "@types/react": "^18.3.12",
18
22
  "@types/react-dom": "^18.3.1",
19
23
  "jest": "^29.0.0",
package/tsconfig.json CHANGED
@@ -6,6 +6,7 @@
6
6
  "module": "CommonJS",
7
7
  "target": "ES5",
8
8
  "strict": true,
9
+ "jsx": "react",
9
10
  "esModuleInterop": true,
10
11
  "skipLibCheck": true,
11
12
  "allowJs": true