videojs-trimmer/cjs/plugin.js

Video.js Trimmer Plugin

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _video = _interopRequireDefault(require("video.js"));
require("videojs-offset");
var Plugin = _video.default.getPlugin("plugin");
var VideoTrimmer = /*#__PURE__*/function (_Plugin) {
  function VideoTrimmer(player, options) {
    var _this;
    _this = _Plugin.call(this, player) || this;
    _this.options = _video.default.obj.merge(options);
    _this.startTime = 0;
    _this.endTime = 0;
    _this.originalDuration = 0;
    _this.isDragging = false;
    _this.createTrimmer();
    _this.player.on("loadedmetadata", function () {
      _this.originalDuration = _this.player.duration();
      _this.endTime = _this.originalDuration;
      if (_this.options.startTime) {
        _this.startTime = _this.options.startTime;
      }
      if (_this.options.endTimeOffset) {
        _this.endTime = _this.originalDuration - _this.options.endTimeOffset;
      }
      _this.updateTrimmer();
    });
    _this.player.addClass("video-js-trimmer");
    _this.bindEvents();
    return _this;
  }
  (0, _inheritsLoose2.default)(VideoTrimmer, _Plugin);
  var _proto = VideoTrimmer.prototype;
  _proto.createTrimmer = function createTrimmer() {
    // Create the trimmer container
    this.trimmerContainer = document.createElement("div");
    this.trimmerContainer.className = "vjs-trimmer-container";

    // Insert it after the video element but before the control bar
    var playerEl = this.player.el();
    playerEl.insertBefore(this.trimmerContainer, this.player.controlBar.el());

    // Create and append trimmer elements to the new container
    this.trimmerEl = document.createElement("div");
    this.trimmerEl.className = "vjs-trimmer";
    this.trimmerContainer.appendChild(this.trimmerEl);
    this.startHandle = document.createElement("div");
    this.startHandle.className = "vjs-trimmer-handle start";
    this.trimmerContainer.appendChild(this.startHandle);
    this.endHandle = document.createElement("div");
    this.endHandle.className = "vjs-trimmer-handle end";
    this.trimmerContainer.appendChild(this.endHandle);

    // Create progress indicator
    this.progressIndicator = document.createElement("div");
    this.progressIndicator.className = "vjs-trimmer-progress";
    this.trimmerEl.appendChild(this.progressIndicator);

    // Add duration display
    this.durationDisplay = document.createElement("div");
    this.durationDisplay.className = "vjs-trimmer-duration";
    this.trimmerContainer.appendChild(this.durationDisplay);
    this.updateTrimmer();
  };
  _proto.bindEvents = function bindEvents() {
    var _this2 = this;
    var isDraggingStart = false;
    var isDraggingEnd = false;
    var isDraggingBar = false;
    var lastUpdateTime = 0;
    var throttleDelay = 8;
    var onMouseMove = function onMouseMove(event) {
      if (!_this2.isDragging) return;
      var now = performance.now();
      if (now - lastUpdateTime < throttleDelay) return;
      lastUpdateTime = now;
      var rect = _this2.trimmerContainer.getBoundingClientRect();
      var pos = (event.clientX - rect.left) / rect.width * _this2.originalDuration;
      if (isDraggingStart) {
        _this2.startTime = Math.min(Math.max(pos, 0), _this2.endTime);
      } else if (isDraggingEnd) {
        _this2.endTime = Math.max(Math.min(pos, _this2.originalDuration), _this2.startTime);
      } else if (isDraggingBar) {
        var trimmedDuration = _this2.endTime - _this2.startTime;
        var newStartTime = Math.max(0, Math.min(pos, _this2.originalDuration - trimmedDuration));
        _this2.startTime = newStartTime;
        _this2.endTime = newStartTime + trimmedDuration;
      }
      _this2.player.currentTime(0);
      requestAnimationFrame(function () {
        _this2.updateTrimmer();
        _this2.player.trigger("trimmerchange", {
          startTime: _this2.startTime,
          endTime: _this2.endTime
        });
      });
    };
    var _onMouseUp = function onMouseUp() {
      isDraggingStart = false;
      isDraggingEnd = false;
      isDraggingBar = false;
      _this2.isDragging = false;
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", _onMouseUp);
    };
    this.startHandle.addEventListener("mousedown", function (event) {
      event.preventDefault();
      isDraggingStart = true;
      _this2.isDragging = true;
      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", _onMouseUp);
    });
    this.endHandle.addEventListener("mousedown", function (event) {
      event.preventDefault();
      isDraggingEnd = true;
      _this2.isDragging = true;
      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", _onMouseUp);
    });
    this.trimmerEl.addEventListener("mousedown", function (event) {
      if (!event.target.classList.contains("vjs-trimmer-handle")) {
        event.preventDefault();
        isDraggingBar = true;
        _this2.isDragging = true;
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", _onMouseUp);
      }
    });

    // Update progress indicator on timeupdate
    this.player.on("timeupdate", function () {
      requestAnimationFrame(function () {
        _this2.updateTrimmer();
      });
    });
  };
  _proto.updateTrimmer = function updateTrimmer() {
    var startPos = this.startTime / this.originalDuration * 100;
    var endPos = this.endTime / this.originalDuration * 100;
    this.trimmerEl.style.left = startPos + "%";
    this.trimmerEl.style.width = endPos - startPos + "%";
    this.startHandle.style.left = startPos + "%";
    this.endHandle.style.left = endPos + "%";
    this.player.offset({
      start: this.startTime,
      end: this.endTime
    });

    // Update duration display
    var trimmedDuration = this.endTime - this.startTime;
    this.durationDisplay.textContent = "Trimmed duration: " + this.formatTime(trimmedDuration);

    // Update progress indicator
    var currentTime = this.player.currentTime() + this.startTime;
    var trimmedProgress = (currentTime - this.startTime) / (this.endTime - this.startTime);
    var progressPos = Math.min(Math.max(trimmedProgress, 0), 1) * 100;
    this.progressIndicator.style.left = progressPos + "%";
  };
  _proto.createTimeMarkers = function createTimeMarkers() {
    var markerContainer = document.createElement("div");
    markerContainer.className = "vjs-time-markers";
    this.trimmerContainer.appendChild(markerContainer);
    var numMarkers = 20;
    for (var i = 0; i <= numMarkers; i++) {
      var marker = document.createElement("div");
      marker.className = "vjs-time-marker";
      var time = i / numMarkers * this.originalDuration;
      marker.style.left = i / numMarkers * 100 + "%";
      var timeLabel = document.createElement("span");
      timeLabel.className = "vjs-time-label";
      timeLabel.textContent = this.formatTime(time);
      marker.appendChild(timeLabel);
      markerContainer.appendChild(marker);
    }
  };
  _proto.formatTime = function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    var remainingSeconds = Math.floor(seconds % 60);
    return minutes + ":" + remainingSeconds.toString().padStart(2, "0");
  };
  return VideoTrimmer;
}(Plugin);
_video.default.registerPlugin("trimmer", VideoTrimmer);
var _default = exports.default = VideoTrimmer;
module.exports = exports.default;