customvidplayer 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) 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/dist/styles/defaultTheme.css +30 -0
  7. package/package.json +6 -2
  8. 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/dist/styles/defaultTheme.css ADDED
@@ -0,0 +1,30 @@
1
+ .video-player {
2
+ position: relative;
3
+ width: 100%;
4
+ max-width: 800px;
5
+ margin: 0 auto;
6
+ }
7
+
8
+ .video-element {
9
+ width: 100%;
10
+ border-radius: 5px;
11
+ }
12
+
13
+ .skip-button {
14
+ position: absolute;
15
+ bottom: 10px;
16
+ right: 10px;
17
+ padding: 8px 12px;
18
+ background: #ff5722;
19
+ color: white;
20
+ border: none;
21
+ border-radius: 5px;
22
+ cursor: pointer;
23
+ }
24
+
25
+ .section {
26
+ cursor: pointer;
27
+ margin: 5px 0;
28
+ color: #007bff;
29
+ }
30
+
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "customvidplayer",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
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