35

Clip

View  |  AnimateClip

Objective
  • Responder
    • View
      • Clip
Clip.js
  1. function Clip() {
  2.     View.call(this);
  3.  
  4.     this._width = this._height = 0;
  5.  
  6.     this._duration = 0;
  7.     this._currentTime = 0;
  8.  
  9.     this._ended = false;
  10.     this._paused = true;
  11.  
  12.     this._playbackRate = 1;
  13.  
  14.     this._player = false;
  15. }
  16.  
  17. Clip.prototype = Object.create(View.prototype);
  18.  
  19. Object.defineProperty(Clip.prototype, 'constructor', { value: Clip, enumerable: false, writable: true });
  20.  
  21. Clip.minPlaybackRate = 0.25;
  22. Clip.maxPlaybackRate = 5.0;
  23.  
  24. Object.defineProperty(Clip.prototype, 'dimension', {
  25.     get:    function() {
  26.         return [this._width, this._height];
  27.     },
  28.     set:    function(d) {
  29.         if (! (Array.isArray(d) && d.length == 2))
  30.             throw new TypeError();
  31.  
  32.         let [w, h] = d;
  33.  
  34.         if (!Number.isInteger(w) || !Number.isInteger(h))
  35.             throw new TypeError();
  36.  
  37.         if (w < 0 || h < 0)
  38.             throw new RangeError();
  39.  
  40.         this._width = w;
  41.         this._height = h;
  42.     }
  43. });
  44.  
  45. Object.defineProperty(Clip.prototype, 'duration', {
  46.     get:    function() {
  47.         return this._duration;
  48.     }
  49. });
  50.  
  51. Object.defineProperty(Clip.prototype, 'ended', {
  52.     get:    function() {
  53.         return this._ended;
  54.     }
  55. });
  56.  
  57. Object.defineProperty(Clip.prototype, 'paused', {
  58.     get:    function() {
  59.         return this._paused;
  60.     }
  61. });
  62.  
  63. Object.defineProperty(Clip.prototype, 'currentTime', {
  64.     get:    function() {
  65.         return this._currentTime;
  66.     }
  67. });
  68.  
  69. Object.defineProperty(Clip.prototype, 'playbackRate', {
  70.     get:    function() {
  71.         return this._playbackRate;
  72.     },
  73.     set:    function(r) {
  74.         if (typeof r !== 'number')
  75.             throw new TypeError();
  76.  
  77.         if (r < Clip.minPlaybackRate || r > Clip.maxPlaybackRate)
  78.             throw new RangeError();
  79.  
  80.         this._playbackRate = r;
  81.     }
  82. });
  83.  
  84. Clip.prototype.seek = function(ms) {
  85.     return this;
  86. };
  87.  
  88. Clip.prototype.play = function() {
  89.     this._ended = this._paused = false;
  90.  
  91.     return this;
  92. };
  93.  
  94. Clip.prototype.pause = function() {
  95.     this._paused = true;
  96.  
  97.     return this;
  98. };
  99.  
  100. Clip.prototype.hasPlayer = function() {
  101.     return this._player;
  102. };
  103.  
  104. Clip.prototype.enablePlayer = function() {
  105.     if (this._player)
  106.         return this;
  107.  
  108.     if (this._mouseenter === undefined) {
  109.         this._mouseenter = (e) => e.target.focus();
  110.     }
  111.  
  112.     if (this._mouseleave === undefined) {
  113.         this._mouseleave = (e) => e.target.blur();
  114.     }
  115.  
  116.     if (this._click === undefined) {
  117.         this._click = (e) => {
  118.             switch (e.type) {
  119.                 case 'click':
  120.                     if (this._paused)
  121.                         this.play();
  122.                     else
  123.                         this.pause();
  124.                     break;
  125.             }
  126.         };
  127.     }
  128.  
  129.     if (this._keydown === undefined) {
  130.         this._keydown = (e) => {
  131.             e.preventDefault();
  132.  
  133.             let duration, currentTime, d, ms;
  134.  
  135.             switch (e.key) {
  136.                 case ' ':
  137.                     if (this._paused)
  138.                         this.play();
  139.                     else
  140.                         this.pause();
  141.                     break;
  142.  
  143.                 case '0':
  144.                     this.seek(0);
  145.                     break;
  146.  
  147.                 case '+':
  148.                     if (this.playbackRate < Clip.maxPlaybackRate)
  149.                         this.playbackRate += 0.25;
  150.                     break;
  151.                 case '-':
  152.                     if (this.playbackRate > Clip.minPlaybackRate)
  153.                         this.playbackRate -= 0.25;
  154.                     break;
  155.                 case '*':
  156.                     this.playbackRate = 1;
  157.                     break;
  158.  
  159.                 case 'ArrowRight':
  160.                 case 'ArrowUp':
  161.                     duration = this.duration;
  162.                     currentTime = this.currentTime;
  163.                     d = e.shiftKey ? 10000 : (e.ctrlKey ? 100 : 1000);
  164.                     ms = currentTime + d;
  165.                     if (duration && ms >= duration)
  166.                         ms %= d;
  167.                     this.seek(ms);
  168.                     break;
  169.                 case 'ArrowLeft':
  170.                 case 'ArrowDown':
  171.                     duration = this.duration;
  172.                     currentTime = this.currentTime;
  173.                     d = e.shiftKey ? 10000 : (e.ctrlKey ? 100 : 1000);
  174.                     ms = currentTime - d;
  175.                     if (ms < 0) {
  176.                         if (duration) {
  177.                             ms = Math.floor(duration / d) * d + currentTime;
  178.                             while (ms >= duration)
  179.                                 ms -= d;
  180.                         }
  181.                         else
  182.                             ms = 0;
  183.                     }
  184.                     this.seek(ms);
  185.                     break;
  186.             }
  187.         };
  188.     }
  189.  
  190.     this.setAttribute('tabindex', 0);
  191.  
  192.     this.addEventListener('click', this._click);
  193.  
  194.     this.addEventListener('keydown', this._keydown);
  195.  
  196.     this.addEventListener('mouseenter', this._mouseenter);
  197.  
  198.     this.addEventListener('mouseleave', this._mouseleave);
  199.  
  200.     this.setStyle('cursor', 'pointer');
  201.  
  202.     this._player = true;
  203.  
  204.     return this;
  205. };
  206.  
  207. Clip.prototype.disablePlayer = function() {
  208.     if (!this._player)
  209.         return this;
  210.  
  211.     this.removeAttribute('tabindex');
  212.  
  213.     this.removeEventListener('click', this._click);
  214.  
  215.     this.removeEventListener('keydown', this._keydown);
  216.  
  217.     this.removeEventListener('mouseenter', this._mouseenter);
  218.  
  219.     this.removeEventListener('mouseleave', this._mouseleave);
  220.  
  221.     this.setStyle('cursor', 'default');
  222.  
  223.     this._player = false;
  224.  
  225.     return this;
  226. };
  227.  
  228. Clip.prototype.setWidget = function(w) {
  229.     View.prototype.setWidget.call(this, w);
  230.  
  231.     this._width = w.offsetWidth;
  232.     this._height = w.offsetHeight;
  233.  
  234.     return this;
  235. };
  236.  
  237. Clip.prototype.reset = function() {
  238.     if (this._widget) {
  239.         this._width = this._widget.width;
  240.         this._height = this._widget.height;
  241.     }
  242.  
  243.     return this;
  244. };
SEE ALSO

View, AnimateClip, ProgramClip, VideoClip

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].