src/widgets/JwpPlayer.js
author ymh <ymh.work@gmail.com>
Fri, 18 Oct 2024 10:24:57 +0200
changeset 1074 231ea5ea7de4
parent 1072 ac1eacb3aa33
permissions -rw-r--r--
change http to https for default thumb

// JwpPlayer

import { Player } from "jwplayer";

const JwpPlayerWidget = function (ns) {
  return class extends ns.Widgets.Widget {
    constructor(player, config) {
      super(player, config);
    }

    static defaults = {};

    draw() {
      var _opts = {},
        _player = Player(this.$[0]),
        _seekPause = false,
        _pauseState = true;

      if (typeof this.video === "undefined") {
        this.video = this.media.video;
      }

      _opts.file = this.video;
      _opts.primary = "flash";
      _opts.fallback = false;
      _opts.controls = false;
      _opts.width = this.width;
      if (this.height) {
        _opts.height = this.height;
      }

      if (this.autostart) {
        // There seems to be an autostart bug
        //_opts.autostart = true;
        //_pauseState = false;
        //this.media.trigger("play");
      }

      if (this.url_transform) {
        _opts.file = this.url_transform(_opts.file);
      }

      // Binding functions to jwplayer

      var _media = this.media;

      _media.on("setcurrenttime", function (_milliseconds) {
        _seekPause = _pauseState;
        _player.seek(_milliseconds / 1000);
      });

      _media.on("setvolume", function (_vol) {
        _player.setVolume(Math.floor(_vol * 100));
        _media.volume = _vol;
      });

      _media.on("setmuted", function (_muted) {
        _player.setMute(_muted);
        _media.muted = _muted;
      });

      _media.on("setplay", function () {
        _player.play(true);
        _media.paused = false;
      });

      _media.on("setpause", function () {
        _player.pause(true);
        _media.paused = true;
      });

      // Binding jwplater events to media

      function getVolume() {
        _media.muted = _player.getMute();
        _media.volume = _player.getVolume() / 100;
      }

      _opts.events = {
        onReady: function () {
          getVolume();
          _media.currentTime = new ns.Model.Time(
            1000 * _player.getPosition() || 0
          );
          _media.trigger("loadedmetadata");
        },
        onTime: function (_progress) {
          if (_seekPause) {
            _player.pause(true);
            _seekPause = false;
          } else {
            if (_pauseState && _player.getState() === "PLAYING") {
              _pauseState = false;
              _media.trigger("play");
            }
          }
          _media.trigger(
            "timeupdate",
            new ns.Model.Time(_progress.position * 1000)
          );
        },
        onPlay: function () {
          if (!_seekPause) {
            _pauseState = false;
            _media.trigger("play");
          }
        },
        onPause: function () {
          _pauseState = true;
          _media.trigger("pause");
        },
        onSeek: function () {
          _media.trigger("seeked");
        },
        onMute: function (_event) {
          _media.muted = _event.mute;
          _media.trigger("volumechange");
        },
        onVolume: function (_event) {
          _media.volume = _event.volume / 100;
          _media.trigger("volumechange");
        },
      };

      _player = _player.setup(_opts);

      this.jwplayer = _player;
    }
  };
};

export { JwpPlayerWidget as JwpPlayer };