{"_id":"@assifdaudi/video-editor-lib","_rev":"8-8e5d8086d38ba5f1c1e3583d929b9b82","name":"@assifdaudi/video-editor-lib","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"@assifdaudi/video-editor-lib","version":"1.0.0","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.0","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"35739bd0b5d1ecac4040d3e496364759476c5a14","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.0.tgz","fileCount":2,"integrity":"sha512-PFa4P1j82xTxuFrahSBHpI8so1Cg9vndf+rrV05nSkiNhwuUrgdPOJK7k2L+gzpAKYGA2E/s9N64DVmm5nPDVw==","signatures":[{"sig":"MEUCIQDff/Wqi7uUIamaIpCiB+dkK4V4pRLrYLmc2tLHmJ8x4AIgOAbyRWWUZ79D4UDgYjszz/W0w5mJ1WVOfGfQK+kYWF8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7209},"module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"dc6d1118fb2fdb10da6313bdb55fc60f3b4143ae","typings":"types/assifdaudi-video-editor-lib.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.0_1766352572526_0.4891175146559623","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@assifdaudi/video-editor-lib","version":"1.0.1","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.1","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"6ffa603cca4de32980751a5f39b17f12f369fb9a","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.1.tgz","fileCount":5,"integrity":"sha512-qRGJrHMOmrcwQgD6IA6hodwpmnCbscRbJ0KyYCUhSo/RcBPvWT3R5zhpeTZGtRwGL+xaAcDu7OeOOOT7B6NlLg==","signatures":[{"sig":"MEYCIQDfVDGfiW7PNSx+/ucNUO+PxRwk7a+FOI0sDPP3ZRa1DQIhAMWyyYu1LEhUR1G6UqownG6nTNWnuS8LokhmAh1Sn0DX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":784350},"main":"./fesm2022/assifdaudi-video-editor-lib.mjs","types":"./types/assifdaudi-video-editor-lib.d.ts","module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"dc6d1118fb2fdb10da6313bdb55fc60f3b4143ae","typings":"types/assifdaudi-video-editor-lib.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.1_1766353798229_0.5417469595164146","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@assifdaudi/video-editor-lib","version":"1.0.2","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.2","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"74fcd363293fbad38ed2bcfcc499b5dde0c4520c","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.2.tgz","fileCount":5,"integrity":"sha512-GyJO3Q9+kmlOj6dksVKHj/barMyfRTOpi933KzR+AThSwuC5ily0SkKUlciYJEhLQQRSW4ssqjGrvxtptHdOKw==","signatures":[{"sig":"MEYCIQCPaMLzImPVmr/JCnLZtiO+l9y+p4+jU3o7gighZgaK8QIhAOfDnAOWW6utdtaRbjUYhN4zm9GnPohmPgFXcNzOhGZm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":786477},"main":"./fesm2022/assifdaudi-video-editor-lib.mjs","types":"./types/assifdaudi-video-editor-lib.d.ts","module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"dc6d1118fb2fdb10da6313bdb55fc60f3b4143ae","typings":"types/assifdaudi-video-editor-lib.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.2_1766358518897_0.4401647758719196","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@assifdaudi/video-editor-lib","version":"1.0.3","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.3","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"71cd817435ae281ec025fefdfab833b872da0373","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.3.tgz","fileCount":6,"integrity":"sha512-bgl1sgUqgilfT9CwN9RKCDwsAguxUR89g0FnxzQBJFwI3cYXkvLuo7mj+0x3SITD62rexqbqArIQFolW86XaGg==","signatures":[{"sig":"MEUCIQDgqcrBd2OnCnl2sRZVzN5XunmC+ICjOcHFSrq+XYfQ2wIgGBYRwWIenBkMl7lMPnjF4Np9DXm4eJn/9RhjhTr/4DI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":787769},"main":"./fesm2022/assifdaudi-video-editor-lib.mjs","types":"./types/assifdaudi-video-editor-lib.d.ts","module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"dc6d1118fb2fdb10da6313bdb55fc60f3b4143ae","typings":"types/assifdaudi-video-editor-lib.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"25.2.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.3_1766358754197_0.06956498602940142","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@assifdaudi/video-editor-lib","version":"1.0.4","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.4","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"ae0954fc38c30718bc483794fdb94191991af498","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.4.tgz","fileCount":6,"integrity":"sha512-EBNIVWro/KgKOnkYHgREfn8pRDO1GH3bEscnLaYnj3GxtmIRkst4SaGlAeFa6fjIFB4A3PnMhhOMaoe8XJo8Jw==","signatures":[{"sig":"MEUCIEARyn/SboPT+s7RvCx3lewF5B7oEQJBHB6YIjNzLFwyAiEAsKlu2Eq6QeqRQ5m/LRS5J6vzMvBf1lYG7wDVryeFzHg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":789453},"main":"./fesm2022/assifdaudi-video-editor-lib.mjs","types":"./types/assifdaudi-video-editor-lib.d.ts","module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"924a78ee96004670478f72a8a6777a05c8a20daf","typings":"index.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.9.3","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.4_1767008038167_0.2905603903302665","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@assifdaudi/video-editor-lib","version":"1.0.5","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.5","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"f0f9b26924e192adafe8ccb72611969617a43190","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.5.tgz","fileCount":6,"integrity":"sha512-OwGYF6o/eL031WpSNMHJGPahGS1OpaT+8rfZrR5X6h9lBQaCrQs5BxZEaYLNmaG2Zl9kgx3plP9YwCORuydaFg==","signatures":[{"sig":"MEYCIQC6fQsNwrMLXlMSP7G2mBMyw0Q8Ux8Qa4mziyX2ShOeawIhAIoUdzD9l8yUdt1v+vKmUibsVOkBLRby6Y6cIA0ac7Fw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":789364},"module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"0d257b50324ff47181aad47dccf088fa9c2fd367","typings":"types/assifdaudi-video-editor-lib.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.9.3","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","dashjs":"^5.1.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.5_1767020471156_0.43806773151697964","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@assifdaudi/video-editor-lib","version":"1.0.6","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","_id":"@assifdaudi/video-editor-lib@1.0.6","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"dist":{"shasum":"535a0959c5ef4c8c7594a770b2ffbb58c3d00db7","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.6.tgz","fileCount":6,"integrity":"sha512-YKkWnUlnWpEmP1226beitYI1Deg1O0pJ0W/hZZOqcLfTUM8uP1/5nckfAqFsASc8TbLF4BjOR4pPLNj0B+rL+A==","signatures":[{"sig":"MEYCIQDtSS0YRDTQkDd6224CFUDTOtuV7AiVQVg2Me7la8fPewIhAKIkm6umshAfZRF0dbbA++rWiDXkpdigr3VQxeHxZ0T8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":789364},"module":"fesm2022/assifdaudi-video-editor-lib.mjs","exports":{".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"0d257b50324ff47181aad47dccf088fa9c2fd367","typings":"types/assifdaudi-video-editor-lib.d.ts","_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.9.3","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.8.0","dashjs":"^4.7.3","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/common":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/video-editor-lib_1.0.6_1767021723117_0.6477861981706208","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@assifdaudi/video-editor-lib","version":"1.0.7","description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"author":"","license":"MIT","repository":{"type":"git","url":""},"peerDependencies":{"@angular/common":"^20.0.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","rxjs":"~7.8.0","dashjs":"^4.7.3"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/assifdaudi-video-editor-lib.mjs","typings":"types/assifdaudi-video-editor-lib.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/assifdaudi-video-editor-lib.d.ts","default":"./fesm2022/assifdaudi-video-editor-lib.mjs"}},"_id":"@assifdaudi/video-editor-lib@1.0.7","gitHead":"0d257b50324ff47181aad47dccf088fa9c2fd367","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-sPhOXqd2ncVlhINShzfLRWrdit9l0rvJgT9R4v3xkkw/+YIm699gz+FINPYJPG8PpC/VaLaZbbT6A1WI4LS0+w==","shasum":"3cc15e2fac96a456a680247fc99871760919a1a2","tarball":"https://registry.npmjs.org/@assifdaudi/video-editor-lib/-/video-editor-lib-1.0.7.tgz","fileCount":6,"unpackedSize":791905,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG8dOd4Mi/Fbsgf/Z4jNDQsz5E8rPbP3T/86R/pbPsNIAiA3zTbp1aaY3rccHYiMUZGy9l1Agh0skR/XW1Oh2feE3A=="}]},"_npmUser":{"name":"assifdaudi","email":"assif619@gmail.com"},"directories":{},"maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/video-editor-lib_1.0.7_1767023399736_0.09850007048747056"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-21T21:29:32.415Z","modified":"2025-12-29T15:50:01.417Z","1.0.0":"2025-12-21T21:29:32.670Z","1.0.1":"2025-12-21T21:49:58.400Z","1.0.2":"2025-12-21T23:08:39.091Z","1.0.3":"2025-12-21T23:12:34.404Z","1.0.4":"2025-12-29T11:33:58.333Z","1.0.5":"2025-12-29T15:01:11.314Z","1.0.6":"2025-12-29T15:22:03.288Z","1.0.7":"2025-12-29T15:50:01.233Z"},"license":"MIT","keywords":["angular","video","editor","ffmpeg","video-editing","timeline","overlay","audio-mixing"],"repository":{"type":"git","url":""},"description":"Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering","maintainers":[{"name":"assifdaudi","email":"assif619@gmail.com"}],"readme":"# @assifdaudi/video-editor-lib\r\n\r\nA comprehensive Angular video editor component library with timeline editing, overlays, audio mixing, and server-side rendering capabilities.\r\n\r\n## Features\r\n\r\n- 🎬 **Timeline Editing**: Cut/keep segments with visual timeline interface\r\n- 🎨 **Overlays**: Add text, images, and shapes to videos\r\n- 🎵 **Audio Mixing**: Multiple audio tracks with volume control and mixing modes\r\n- 📹 **Multiple Sources**: Support for video and image sources\r\n- 🎞️ **Server-Side Rendering**: FFmpeg-based video processing\r\n- 📱 **Responsive**: Modern, responsive UI with drag-and-drop support\r\n- 🔧 **TypeScript**: Fully typed with comprehensive type definitions\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @assifdaudi/video-editor-lib\r\n```\r\n\r\n## Peer Dependencies\r\n\r\nThis library requires the following peer dependencies:\r\n\r\n- `@angular/common` ^20.0.0\r\n- `@angular/core` ^20.0.0\r\n- `@angular/forms` ^20.0.0\r\n- `rxjs` ~7.8.0\r\n\r\n## Quick Start\r\n\r\n### 1. Import the Component\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { VideoEditorComponent } from '@assifdaudi/video-editor-lib';\r\n\r\n@Component({\r\n  selector: 'app-video-editor',\r\n  standalone: true,\r\n  imports: [VideoEditorComponent],\r\n  template: '<app-video-editor />'\r\n})\r\nexport class VideoEditorPage {}\r\n```\r\n\r\n**Or using a separate HTML template:**\r\n\r\n```typescript\r\n// video-editor.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { VideoEditorComponent } from '@assifdaudi/video-editor-lib';\r\n\r\n@Component({\r\n  selector: 'app-video-editor',\r\n  standalone: true,\r\n  imports: [VideoEditorComponent],\r\n  templateUrl: './video-editor.component.html'\r\n})\r\nexport class VideoEditorPage {}\r\n```\r\n\r\n```html\r\n<!-- video-editor.component.html -->\r\n<app-video-editor></app-video-editor>\r\n```\r\n\r\n**Important Notes for HTML Usage:**\r\n\r\n1. **Component Selector**: Use `<app-video-editor></app-video-editor>` (not self-closing `<app-video-editor />` in HTML templates)\r\n   - Self-closing syntax works in inline templates but not in separate HTML files\r\n   - Always use opening and closing tags: `<app-video-editor></app-video-editor>`\r\n\r\n2. **Standalone Component**: The component is standalone, so you must import it in your component's `imports` array\r\n\r\n3. **Full Example with HTML Template:**\r\n\r\n```typescript\r\n// my-video-editor.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { VideoEditorComponent } from '@assifdaudi/video-editor-lib';\r\n\r\n@Component({\r\n  selector: 'app-my-video-editor',\r\n  standalone: true,\r\n  imports: [VideoEditorComponent],\r\n  templateUrl: './my-video-editor.component.html',\r\n  styleUrl: './my-video-editor.component.scss'\r\n})\r\nexport class MyVideoEditorComponent {}\r\n```\r\n\r\n```html\r\n<!-- my-video-editor.component.html -->\r\n<div class=\"video-editor-container\">\r\n  <app-video-editor></app-video-editor>\r\n</div>\r\n```\r\n\r\n```scss\r\n/* my-video-editor.component.scss */\r\n.video-editor-container {\r\n  width: 100%;\r\n  height: 100vh;\r\n}\r\n```\r\n\r\n### 2. Import Library Styles (Required!)\r\n\r\n**The component uses CSS variables for theming. You must import the library's styles file.**\r\n\r\n**Option A: Import in your global styles.scss (Recommended)**\r\n\r\n```scss\r\n// styles.scss\r\n@import '@assifdaudi/video-editor-lib/styles';\r\n```\r\n\r\n**Option B: Add to angular.json**\r\n\r\n```json\r\n{\r\n  \"projects\": {\r\n    \"your-app\": {\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"options\": {\r\n            \"styles\": [\r\n              \"node_modules/@assifdaudi/video-editor-lib/styles.scss\",\r\n              \"src/styles.scss\"\r\n            ]\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n**Why this is needed:**\r\n- Component styles are automatically embedded in the JavaScript bundle\r\n- However, the styles use CSS variables (like `--card-glass`, `--text-primary`, etc.) for theming\r\n- The library provides a `styles.scss` file that defines all required CSS variables\r\n- Without importing this file, CSS variables will be undefined and the component will appear white/unstyled\r\n- The variables control colors, backgrounds, borders, and other visual properties\r\n\r\n**Customizing the theme:**\r\nYou can override the CSS variables after importing:\r\n\r\n```scss\r\n@import '@assifdaudi/video-editor-lib/styles';\r\n\r\n:root {\r\n  // Override default colors\r\n  --accent: #your-color;\r\n  --bg: #your-background;\r\n  // ... etc\r\n}\r\n```\r\n\r\n### 3. Configure Backend API URL (Required for Rendering)\r\n\r\n**The component requires a backend server for video rendering. You must provide the API base URL.**\r\n\r\nThe library uses Angular's dependency injection. Provide the `VIDEO_EDITOR_API_BASE_URL` token in your app configuration:\r\n\r\n**Option A: In `app.config.ts` (Standalone App - Recommended)**\r\n\r\n```typescript\r\n// app.config.ts\r\nimport { ApplicationConfig, provideHttpClient } from '@angular/common/http';\r\nimport { VIDEO_EDITOR_API_BASE_URL } from '@assifdaudi/video-editor-lib';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n  providers: [\r\n    provideHttpClient(), // Required for HTTP requests\r\n    {\r\n      provide: VIDEO_EDITOR_API_BASE_URL,\r\n      useValue: 'http://localhost:4000' // Your backend server URL (without /api)\r\n    }\r\n  ]\r\n};\r\n```\r\n\r\n**Option B: Using Environment Variables**\r\n\r\n```typescript\r\n// app.config.ts\r\nimport { ApplicationConfig, provideHttpClient } from '@angular/common/http';\r\nimport { VIDEO_EDITOR_API_BASE_URL } from '@assifdaudi/video-editor-lib';\r\nimport { environment } from './environments/environment';\r\n\r\nexport const appConfig: ApplicationConfig = {\r\n  providers: [\r\n    provideHttpClient(),\r\n    {\r\n      provide: VIDEO_EDITOR_API_BASE_URL,\r\n      useValue: environment.apiBaseUrl // e.g., 'https://api.yoursite.com'\r\n    }\r\n  ]\r\n};\r\n```\r\n\r\n**Option C: In `app.module.ts` (NgModule App)**\r\n\r\n```typescript\r\n// app.module.ts\r\nimport { NgModule } from '@angular/core';\r\nimport { HttpClientModule } from '@angular/common/http';\r\nimport { VIDEO_EDITOR_API_BASE_URL } from '@assifdaudi/video-editor-lib';\r\n\r\n@NgModule({\r\n  imports: [HttpClientModule],\r\n  providers: [\r\n    {\r\n      provide: VIDEO_EDITOR_API_BASE_URL,\r\n      useValue: 'http://localhost:4000' // Your backend server URL\r\n    }\r\n  ]\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n**Important Notes:**\r\n- The URL should be the base URL of your backend server (e.g., `http://localhost:4000` or `https://api.example.com`)\r\n- Do NOT include `/api` in the base URL - the library appends `/api/upload`, `/api/render`, etc.\r\n- The default value is `http://localhost:4000` if not provided\r\n- You must also provide `HttpClient` (via `provideHttpClient()` or `HttpClientModule`)\r\n\r\n### 4. Set Up Backend Server\r\n\r\nThis library requires a backend server for video processing. The server should:\r\n\r\n- Handle video rendering via FFmpeg\r\n- Provide file upload endpoints\r\n- Support the following endpoints:\r\n  - `POST /api/render` - Render video with sources, cuts, overlays, and audio\r\n  - `POST /api/upload` - Upload files (videos, images, audio)\r\n  - `POST /api/cleanup` - Clean up uploaded files after rendering\r\n\r\nSee the server implementation in the `server/` directory of this repository for reference.\r\n\r\n## Usage\r\n\r\n### Basic Usage\r\n\r\n**Option 1: Inline Template**\r\n\r\n```typescript\r\nimport { Component } from '@angular/core';\r\nimport { VideoEditorComponent } from '@assifdaudi/video-editor-lib';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [VideoEditorComponent],\r\n  template: '<app-video-editor />'\r\n})\r\nexport class App {}\r\n```\r\n\r\n**Option 2: External HTML Template**\r\n\r\n```typescript\r\n// app.component.ts\r\nimport { Component } from '@angular/core';\r\nimport { VideoEditorComponent } from '@assifdaudi/video-editor-lib';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  standalone: true,\r\n  imports: [VideoEditorComponent],\r\n  templateUrl: './app.component.html'\r\n})\r\nexport class App {}\r\n```\r\n\r\n```html\r\n<!-- app.component.html -->\r\n<app-video-editor></app-video-editor>\r\n```\r\n\r\n**⚠️ Important HTML Usage Note:**\r\n\r\n- In **HTML template files**, always use opening and closing tags: `<app-video-editor></app-video-editor>`\r\n- Self-closing syntax `<app-video-editor />` only works in inline TypeScript templates\r\n- The component selector is `app-video-editor` (from the library's component definition)\r\n\r\n```html\r\n<!-- app.component.html -->\r\n<app-video-editor />\r\n```\r\n\r\n**Important:** The component selector is `app-video-editor`, so always use `<app-video-editor />` (or `<app-video-editor></app-video-editor>`) in your HTML templates.\r\n\r\n### Accessing Types\r\n\r\n```typescript\r\nimport type {\r\n  VideoSource,\r\n  Overlay,\r\n  AudioSource,\r\n  RenderResponse\r\n} from '@assifdaudi/video-editor-lib';\r\n```\r\n\r\n### Using Utilities\r\n\r\n```typescript\r\nimport { formatTime, clamp } from '@assifdaudi/video-editor-lib';\r\n\r\nconst formatted = formatTime(125.5); // \"2:05\"\r\nconst clamped = clamp(150, 0, 100); // 100\r\n```\r\n\r\n## Component Features\r\n\r\n### Timeline Editing\r\n\r\n- **Cut Mode**: Remove unwanted segments\r\n- **Keep Mode**: Keep only selected segments\r\n- Visual timeline with drag-to-seek\r\n- Trim start/end points\r\n\r\n### Overlays\r\n\r\n- **Text Overlays**: Customizable text with font size, color, and background\r\n- **Image Overlays**: Position and resize images\r\n- **Shape Overlays**: Rectangles and circles with customizable colors\r\n\r\n### Audio Tracks\r\n\r\n- Multiple audio tracks\r\n- Volume control per track\r\n- Master volume control\r\n- Mix or replace original audio\r\n- Timeline positioning and trimming\r\n\r\n### Sources\r\n\r\n- Multiple video/image sources\r\n- Drag and drop file support\r\n- URL input support\r\n- Image duration configuration\r\n\r\n## API Reference\r\n\r\n### VideoEditorComponent\r\n\r\nThe main component. No inputs required - it's fully self-contained.\r\n\r\n### Types\r\n\r\n#### VideoSource\r\n\r\n```typescript\r\ninterface VideoSource {\r\n  id: number;\r\n  url: string;\r\n  type: 'video' | 'image';\r\n  duration: number;\r\n  order: number;\r\n}\r\n```\r\n\r\n#### Overlay\r\n\r\n```typescript\r\ntype Overlay = TextOverlay | ImageOverlay | ShapeOverlay;\r\n```\r\n\r\n#### AudioSource\r\n\r\n```typescript\r\ninterface AudioSource {\r\n  id: number;\r\n  url: string;\r\n  startTime: number;\r\n  duration: number;\r\n  volume: number;\r\n  muted: boolean;\r\n  audioTrimStart: number;\r\n  audioTrimEnd: number;\r\n}\r\n```\r\n\r\n### Services\r\n\r\nThe library exports several services that can be used directly if needed:\r\n\r\n- `RenderService` - Handle video rendering requests\r\n- `AudioService` - Manage audio tracks\r\n- `TimelineService` - Manage cuts and segments\r\n- `OverlayService` - Manage overlays\r\n- `VideoPlayerService` - Video playback control\r\n\r\n### Utilities\r\n\r\n- `formatTime(seconds: number): string` - Format seconds as \"M:SS\" or \"H:MM:SS\"\r\n- `clamp(value: number, min: number, max: number): number` - Clamp value between min and max\r\n- `timeToPercent(time: number, duration: number): number` - Convert time to percentage\r\n- `isImageUrl(url: string): boolean` - Check if URL is an image\r\n- `isMpdUrl(url: string): boolean` - Check if URL is an MPD (DASH) file\r\n\r\n## Styling\r\n\r\nThe component includes its own styles. To customize, you can:\r\n\r\n1. Override CSS variables (if supported in future versions)\r\n2. Use Angular's `::ng-deep` (not recommended)\r\n3. Import and modify the SCSS files directly\r\n\r\n## Browser Support\r\n\r\n- Modern browsers with ES2022 support\r\n- Requires support for:\r\n  - HTML5 Video API\r\n  - Drag and Drop API\r\n  - File API\r\n  - Fetch API\r\n\r\n## Development\r\n\r\n### Building the Library\r\n\r\n```bash\r\nnpm run build:lib\r\n```\r\n\r\n### Watching for Changes\r\n\r\n```bash\r\nnpm run build:lib:watch\r\n```\r\n\r\n### Linting\r\n\r\n```bash\r\nnpm run lint:lib\r\n```\r\n\r\n## Server Requirements\r\n\r\nThe backend server must:\r\n\r\n1. Have FFmpeg installed and available in PATH\r\n2. Support the render API endpoints\r\n3. Handle file uploads and cleanup\r\n4. Support CORS for the frontend origin\r\n\r\nSee the `server/` directory in this repository for a complete reference implementation.\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please ensure all tests pass and linting is clean before submitting PRs.\r\n","readmeFilename":"README.md"}