src/widgets/SlideVideoPlayer.js
author ymh <ymh.work@gmail.com>
Tue, 22 Oct 2024 09:54:34 +0200
changeset 1080 2b513bcb710a
parent 1072 ac1eacb3aa33
permissions -rw-r--r--
increment version
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     1
import slideVideoPlayerStyles from "./SlideVideoPlayer.module.css";
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     3
const SlideVideoPlayer = function (ns) {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     4
  return class extends ns.Widgets.Widget {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     5
    constructor(player, config) {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     6
      //IriSP.loadCss(IriSP.getLib("cssSplitter"));
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     7
      super(player, config);
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
     8
    }
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    10
    static defaults = {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    11
      playerModule: "HtmlPlayer",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    12
      // mode is either "sidebyside" or "pip"
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    13
      mode: "sidebyside",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    14
    };
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    16
    template =
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    17
      '<div class="Ldt-SlideVideoPlayer">\
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    18
  <div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    19
  </div>\
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    20
  <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    21
  </div>\
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
</div>';
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    24
    draw() {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    25
      var _this = this;
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    27
      _this.renderTemplate();
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    28
      this.insertSubwidget(
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
        _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"),
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    30
        {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    31
          type: "ImageDisplay",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    32
          annotation_type: _this.annotation_type,
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    33
        },
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    34
        "slide"
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    35
      );
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    36
      this.insertSubwidget(
1033
c20df1c080e6 integrate changes from github
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
        _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"),
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    38
        {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    39
          type: _this.playerModule,
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    40
          video: _this.video,
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    41
          width: "100%",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    42
          url_transform: _this.url_transform,
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    43
        },
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    44
        "player"
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    45
      );
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    46
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    47
      if (_this.mode == "pip") {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    48
        _this.$.find(".Ldt-SlideVideoPlayer-panel").append(
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    49
          '<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>'
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    50
        );
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    51
        _this.$.on(
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    52
          "click",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    53
          ".Ldt-SlideVideoPlayer-pip-menu-toggle",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    54
          function () {
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    55
            _this.toggleMainDisplay();
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    56
          }
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    57
        );
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    58
        window.setTimeout(function () {
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    59
          _this.setMainDisplay("video");
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    60
        }, 1500);
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    61
      } else {
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    62
        // Default : side by side
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    63
        // FIXME: this should be better implemented through a signal sent
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    64
        // when widgets are ready (and not just loaded)
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    65
        window.setTimeout(function () {
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    66
          _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    67
            orientation:
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    68
              screen.height > screen.width ? "vertical" : "horizontal",
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    69
            leftMin: 20,
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    70
            topMin: 20,
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    71
          });
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    72
        }, 1500);
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    73
      }
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    74
    }
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    75
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    76
    toggleMainDisplay() {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    77
      if (
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    78
        this.$.find(
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    79
          ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    80
        ).hasClass("Ldt-SlideVideoPlayer-pip-main")
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    81
      ) {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    82
        this.setMainDisplay("slides");
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    83
      } else {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    84
        this.setMainDisplay("video");
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    85
      }
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    86
    }
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    87
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    88
    // Set main display (in case of a "switch" display mode)
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    89
    // main is either 'video' or 'slides'
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    90
    setMainDisplay(video_or_slides) {
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    91
      var main = this.$.find(
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    92
        ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    93
      );
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    94
      var pip = this.$.find(
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    95
        ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    96
      );
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
    97
      if (video_or_slides == "slides") {
1068
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    98
        var temp = main;
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
    99
        main = pip;
7623f9af9272 merge pull request #3 from O. Auber
ymh <ymh.work@gmail.com>
parents: 1033
diff changeset
   100
        pip = temp;
1072
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   101
      }
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   102
      main
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   103
        .removeClass("Ldt-SlideVideoPlayer-pip-pip")
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   104
        .addClass("Ldt-SlideVideoPlayer-pip-main");
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   105
      pip
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   106
        .removeClass("Ldt-SlideVideoPlayer-pip-main")
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   107
        .addClass("Ldt-SlideVideoPlayer-pip-pip");
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   108
    }
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   109
  };
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   110
};
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   111
ac1eacb3aa33 Migrate source and build to vite.js
ymh <ymh.work@gmail.com>
parents: 1068
diff changeset
   112
export { SlideVideoPlayer, slideVideoPlayerStyles };