✂️ Vtrim ✂️

Easily trim your medias with a fully customizable timeline.

• Mobile touch events support 📱
• Styled by default and fully customizable 🎨
• Audio 🎵 and video 🎞️ compatible

✨ Demo

Demo

📖 Table of contents

• Installation
• Getting started
• Props
• Events
• Slots

📥 Installation

npm install vtrim

You can then register Vtrim globally in your entry file with Vue.use() or locally by importing the component where you need it:

// main.js
import Vtrim from 'vtrim';

Vue.use(Vtrim);

or

// myComponent.vue
import { Vtrim } from 'vtrim';

export default {
  name: 'myComponent',
  components: { Vtrim }
};

🚀 Getting started

<template>
  <figure>
    <video
      @durationchange="event => mediaDuration = event.target.duration"
      @loadedmetadata="event => mediaDuration = event.target.duration"
      @timeupdate="event => currentTime = event.target.currentTime"
      preload="metadata"
      src="...">
    <video>

    <Vtrim
      @trim-start="trim => trimStart = trim"
      @trim-end="trim => trimEnd = trim"
      :currentTime="currentTime"
      :mediaDuration="mediaDuration">
    </Vtrim>

    <button
      @click="saveTrim"
      type="button">
      Save
    </button>
  </figure>
</template>

<script>

import { Vtrim } from 'vtrim';

export default {
  name: 'App',
  components: { Vtrim },
  data: () => ({
    currentTime: 0,
    mediaDuration: 0,
    trimStart: 0,
    trimEnd: 0,
  }),
  methods: {
    async saveTrim() {
      await api.saveTrim({ start: this.trimStart, end: this.trimEnd });
    }
  }
}

</script>

⚙️ Props

Name	Type	Default	Description
currentTime	Number	required	The current time of your media in seconds
mediaDuration	Number	required	The total duration of your media in seconds
color	String	'#1167f2'	The brand color
defaultTrim	Object	null	Sets a default trim. Must be an object with the following properties: { start: Number, end: Number }
minTrimDuration	Number	1	Sets the minimum duration of your trimmed media in seconds. This prevents trim handles from going past each other
formatTime	Function	(rawTime) => getTimeAsMM:SS(rawTime)	Formats the trims times (MM:SS by default). Receives the raw time in seconds
timePrecision	Number	2	Sets the number of decimals of the trim time
restrictSeeking	Boolean	false	Whether the seeking playhead is restricted within the trimmed media

🚨 Events

Name	Payload	Type	Description
trim-strart	trimStartTime	Number	Fired everytime the start trim handle is moved. Receives the raw start trim time in seconds
trim-end	trimEndTime	Number	Fired everytime the end trim handle is moved. Receives the raw end trim time in seconds
seek	seekTime	Number	Fired everytime the playhead is moved. Receives the raw seek time in seconds
play-overflow	currentTime	Number	Fired everytime the media is currently playing before trim start or after trim end. Receives the raw current time in seconds

🧱 Slots

Name	Slot props	Description
progress	{ currentRightPosition: Number }	The progress bar of the original media. Receives the original media current end right position
start-trim	{}	The start trim handle
end-trim	{}	The end trim handle
playhead	{}	The playhead
start-time	{ currentTime: Number, startTime: Number }	The start trim time. Receives the current media time and the formatted trim start time
end-time	{ currentTime: Number, endTime: Number }	The end trim time. Receives the current media time and the formatted trim end time
timeline	{ startLeftPosition: Number, endRightPosition: Number }	The trimmed timeline. Receives the start left position and end right position in % relative to the progress bar. E.g: A media trimmed from its beginning to half its duration would receive: { startLeftPosition: 0, endRightPosition: 50 }
timeline-playing	{ startLeftPosition: Number, currentRightPosition: Number }	The playing timeline within the trimmed timeline. Receives the start left position and current end right position in % relative to the trimmed media duration. E.g: A media trimmed from 0s to 10s currently playing at 5s would receive: { startLeftPosition: 0, endRightPosition: 50 }