Repository navigation
Expand file tree
/
Copy pathdocs
More file actions
224 lines (175 loc) · 4.79 KB
/
Copy pathdocs
File metadata and controls
224 lines (175 loc) · 4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
# Enhanced Video Player Solution (Issue #7)
A comprehensive video player with advanced learning features including note-taking, bookmarks, transcript synchronization, and accessibility features.
## 🚀 Features
- **Advanced Video Controls**: Playback speed, picture-in-picture, fullscreen
- **Note-Taking System**: Timestamped notes with export functionality
- **Bookmark Management**: Categorized bookmarks with search
- **Transcript Sync**: Clickable timestamps with video synchronization
- **Accessibility**: Keyboard navigation, screen reader support, ARIA labels
- **Smooth Animations**: Framer Motion powered interactions
- **Responsive Design**: Mobile-first approach
## 📦 Installation
### Prerequisites
- Node.js 18+
- npm, yarn, or bun package manager
### Step 1: Install Dependencies
```bash
# Navigate to the solution directory
cd frontendIssue7-solution
# Install all dependencies
npm install
```
### Required Dependencies
#### Core Dependencies
```bash
npm install react@^18.3.1 react-dom@^18.3.1
```
#### UI & Styling
```bash
npm install framer-motion@^12.16.0 lucide-react@^0.462.0
npm install class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^2.5.2
```
#### Radix UI Components
```bash
npm install @radix-ui/react-slider@^1.2.0 @radix-ui/react-dialog@^1.1.2
npm install @radix-ui/react-tooltip@^1.1.4 @radix-ui/react-button@^1.1.0
```
#### Form Handling & Validation
```bash
npm install react-hook-form@^7.53.0 zod@^3.23.8 @hookform/resolvers@^3.9.0
```
#### Development Dependencies
```bash
npm install -D @types/react@^18.3.3 @types/react-dom@^18.3.0
npm install -D @vitejs/plugin-react-swc@^3.5.0 autoprefixer@^10.4.20
npm install -D postcss@^8.4.47 tailwindcss@^3.4.11 typescript@^5.5.3
npm install -D vite@^5.4.1 vitest@^2.1.8
```
### Step 2: Configuration Files
Ensure you have the following configuration files in your project root:
#### `vite.config.ts`
```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
}
})
```
#### `tailwind.config.ts`
```typescript
import type { Config } from 'tailwindcss'
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
```
#### `postcss.config.js`
```javascript
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
```
#### `tsconfig.json`
```json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
```
### Step 3: CSS Setup
Add Tailwind CSS to your main CSS file (`src/index.css`):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Step 4: Run the Application
```bash
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run tests
npm test
```
## 🎯 Usage
The video player component can be imported and used in any React application:
```tsx
import { VideoPlayer } from './components/VideoPlayer'
function App() {
return (
<VideoPlayer
src="https://example.com/video.mp4"
transcript="Your transcript text here..."
/>
)
}
```
## 🔧 Customization
### Video Player Props
- `src`: Video source URL
- `transcript`: Transcript text for synchronization
- `title`: Video title
- `description`: Video description
- `onNoteSave`: Callback for note saving
- `onBookmarkAdd`: Callback for bookmark creation
### Styling
The component uses Tailwind CSS classes and can be customized by modifying the component styles or extending the Tailwind configuration.
## 🧪 Testing
```bash
# Run all tests
npm test
# Run tests in watch mode
npm test -- --watch
# Run tests with coverage
npm test -- --coverage
```
## 📱 Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
## 🔒 Security Considerations
- Video sources should be from trusted domains
- Implement proper CORS headers for video resources
- Validate user inputs for notes and bookmarks
- Use HTTPS for production deployments
## 🚀 Performance Tips
- Use video compression for optimal loading
- Implement lazy loading for large video files
- Consider using video streaming for large files
- Optimize transcript data structure for better performance
## 📄 License
This solution is part of the TeachLink Knowledge Nexus project.