Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Videomatik/editor
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 0.0.0
Choose a base ref
...
head repository: Videomatik/editor
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
  • 16 commits
  • 11 files changed
  • 2 contributors

Commits on Jan 9, 2024

  1. Copy the full SHA
    af44f2b View commit details
  2. Copy the full SHA
    ee9eb2d View commit details

Commits on Jan 10, 2024

  1. Merge pull request #1 from Videomatik/cropper

    Add Cropper
    nihey authored Jan 10, 2024
    Copy the full SHA
    0fd9714 View commit details
  2. Copy the full SHA
    d1ad8dc View commit details
  3. Merge pull request #2 from Videomatik/crop-adjust

    feat: add Cropper class to integrate with Videomatik's Cropper
    nihey authored Jan 10, 2024
    Copy the full SHA
    961a51b View commit details
  4. Copy the full SHA
    0056035 View commit details
  5. feat: add aspect ratio option

    nihey committed Jan 10, 2024
    Copy the full SHA
    4a31bc0 View commit details
  6. chore: upgrade version to 0.1.0

    nihey committed Jan 10, 2024
    Copy the full SHA
    91a7e57 View commit details
  7. Copy the full SHA
    59f3994 View commit details
  8. Copy the full SHA
    211e94a View commit details

Commits on Jan 11, 2024

  1. feat: add Subtitle SDK

    mhdsilva committed Jan 11, 2024
    Copy the full SHA
    ce086d9 View commit details
  2. Copy the full SHA
    9a23a5b View commit details
  3. Copy the full SHA
    28689ab View commit details
  4. Copy the full SHA
    c95c110 View commit details

Commits on Jan 30, 2024

  1. Copy the full SHA
    fea3995 View commit details
  2. Copy the full SHA
    64a8643 View commit details
Showing with 2,095 additions and 44 deletions.
  1. +1 −20 .github/workflows/test-and-publish.yml
  2. +119 −3 README.md
  3. +8 −19 index.html → demos/clip.html
  4. +359 −0 demos/crop.html
  5. +1,410 −0 demos/subtitle.html
  6. +1 −1 package-lock.json
  7. +1 −1 package.json
  8. +6 −0 src/Clipper.js
  9. +89 −0 src/Cropper.js
  10. +97 −0 src/Subtitle.js
  11. +4 −0 src/index.js
21 changes: 1 addition & 20 deletions .github/workflows/test-and-publish.yml
Original file line number Diff line number Diff line change
@@ -5,26 +5,6 @@ on:
types: [created]

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18.x'

- name: Install dependencies
run: npm ci

- name: Run lint
run: npm run eslint

- name: Run build
run: npm run build

deploy:
if: success()
runs-on: ubuntu-latest
@@ -35,6 +15,7 @@ jobs:
node-version: '18.x'
registry-url: 'https://registry.npmjs.org'
- run: npm ci
- run: npm run eslint
- run: npm run build
- run: npm publish --access public
env:
122 changes: 119 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -9,7 +9,9 @@ operations for videomatik through a video editor.
npm install --save @videomatik/editor
```

## Usage (Clipper)
# Clipper

## Usage

Considering you have the follow div on your HTML:

@@ -22,7 +24,7 @@ You can create a video clipper using the following code:
```javascript
import { Clipper } from '@videomatik/editor'

const clipper = new VideomatikEditor('#video-clipper', {
const clipper = new Clipper('#video-clipper', {
video: 'https://storage.videomatik.com.br/videomatik-sheet/a426c1ce128.mp4',
clips: [
{start: 10, end: 20, selected: true},
@@ -49,6 +51,120 @@ clipper.on('change', ({ clips }) => {
})
```

# Cropper

## Usage

Considering you have the follow div on your HTML:

```html
<div id="video-cropper"></div>
```

You can create a video cropper using the following code:

```javascript
import { Cropper } from '@videomatik/editor'

const cropper = new Cropper('#video-cropper', {
video: 'https://storage.videomatik.com.br/videomatik-sheet/a426c1ce128.mp4',
// Optional
crops: [],
})
```

This will create a new video cropper using the preset video and clips in the timeline

## Events

You can listen to events and check when the editor's state was updated with the
following methods:

```javascript
cropper.on('ready', ({ crops }) => {
console.log('The player was successfully mounted and finished loading, the default crops are:', crops)
})

cropper.on('change', ({ crops }) => {
console.log('User has changed the crops to:', crops)
})
```

# Subtitle

## Usage

Considering you have the follow div on your HTML:

```html
<div id="video-subtitle"></div>
```

You can create a subtitle editor using the following code:

```javascript
import { Subtitle } from '@videomatik/editor'

const subtitle = new Subtitle('#video-Subtitle', {
video: 'https://storage.videomatik.com.br/videomatik-sheet/a426c1ce128.mp4',
subtitles: {
// Optional
style: {
"MarginV": 324,
"Outline": 6.9,
"Fontname": "Poppins Bold",
},
// Optional
transcription: [
{
"end": 1.411,
"start": 0.189,
"words": [
{
"end": 0.93,
"word": "Gente,",
"index": 0,
"score": 0.751,
"start": 0.189,
"endTime": "00:00:00,930",
"startTime": "00:00:00,189"
},
{
"end": 1.411,
"word": "ciúme",
"index": 1,
"score": 0.685,
"start": 1.01,
"endTime": "00:00:01,411",
"startTime": "00:00:01,010"
}
],
"length": 11,
"endTime": "00:00:01,411",
"startTime": "00:00:00,189"
},
]
},
})
```

This will create a new subtitle editor using the preset video and subtitle transcription

## Events

You can listen to events and check when the editor's state was updated with the
following methods:

```javascript
subtitles.on('ready', ( subtitles ) => {
console.log('The player was successfully mounted and finished loading, the default subtitles are:', subtitles)
})

subtitles.on('change', ( subtitles ) => {
console.log('User has changed the subtitles to:', subtitles)
})
```

## Developing

To develop and test this library, you can run:
@@ -63,7 +179,7 @@ This will setup building, auto-rebuilding the library once you any code is chang
npm run server
```

This will run a server and display the project at: `http://localhost:8080`
This will run a server and display the project at: `http://localhost:8080/demos/`

If you wish to test the library, refer to the `index.html` page and change it
to what you want to test.
27 changes: 8 additions & 19 deletions index.html → demos/clip.html
Original file line number Diff line number Diff line change
@@ -25,30 +25,19 @@
<body>
<div class="clipper-container">
<div id="clipper" style="height: 70vh; width: 100%"></div>
<button type="button" onclick="console.log(savedClips)">
Export
</button>
</div>
<script src="./dist/editor.js"></script>
<script src="/dist/editor.js"></script>
<script>
let savedClips = [
{start: 1300, end: 1380, selected: true},
]

const clipper = new VideomatikEditor.Clipper("#clipper", {
// __editorURL: 'http://localhost:3000',
video: 'https://demo2200.s3.sa-east-1.amazonaws.com/11_20_2023_14_44_20_107605-3.mp4',
clips: savedClips,
})
__editorURL: 'http://localhost:3000',
colorPrimary: '#00A884',
video: 'https://storage.videomatik.com.br/videomatik-sheet/26601f59e3a.mp4',
clips: [
{start: 0, end: 60, selected: true},
],
})

clipper.on('ready', () => {
console.log('The player was successfully mounted and finished loading')
})

clipper.on('change', ({ clips }) => {
console.log('User has changed the clips to:', clips)
savedClips = clips
})
</script>
</body>
</html>
Loading