1

Clip

Objective
  • Responder
    • View
      • Clip
  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.hasPlayer())
  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 (ms >= duration)
  166.                     this.seek(ms % d);
  167.                 else
  168.                     this.seek(ms);
  169.                 break;
  170.             case 'ArrowLeft':
  171.             case 'ArrowDown':
  172.                 duration = this.duration;
  173.                 currentTime = this.currentTime;
  174.                 d = e.shiftKey ? 10000 : (e.ctrlKey ? 100 : 1000);
  175.                 ms = currentTime - d;
  176.                 if (ms < 0) {
  177.                     ms = Math.floor(duration / d) * d + currentTime;
  178.                     while (ms >= duration)
  179.                         ms -= d;
  180.                     this.seek(ms)
  181.                 }
  182.                 else
  183.                     this.seek(ms);
  184.                 break;
  185.             }
  186.         }
  187.     }
  188.  
  189.     this.setAttribute('tabindex', 0);
  190.  
  191.     this.addEventListener('click', this._click);
  192.  
  193.     this.addEventListener('keydown', this._keydown);
  194.  
  195.     this.addEventListener('mouseenter', this._mouseenter);
  196.  
  197.     this.addEventListener('mouseleave', this._mouseleave);
  198.  
  199.     this.setStyle('cursor', 'pointer');
  200.  
  201.     this._player = true;
  202.  
  203.     return this;
  204. }
  205.  
  206. Clip.prototype.disablePlayer = function() {
  207.     if (!this.hasPlayer())
  208.         return this;
  209.  
  210.     this.removeAttribute('tabindex');
  211.  
  212.     this.removeEventListener('click', this._click);
  213.  
  214.     this.removeEventListener('keydown', this._keydown);
  215.  
  216.     this.removeEventListener('mouseenter', this._mouseenter);
  217.  
  218.     this.removeEventListener('mouseleave', this._mouseleave);
  219.  
  220.     this.setStyle('cursor', 'default');
  221.  
  222.     this._player = false;
  223.  
  224.     return this;
  225. }
  226.  
  227. Clip.prototype.setWidget = function(w) {
  228.     View.prototype.setWidget.call(this, w);
  229.  
  230.     this._width = w.offsetWidth;
  231.     this._height = w.offsetHeight;
  232.  
  233.     return this;
  234. }
  235.  
  236. Clip.prototype.reset = function() {
  237.     if (this._widget) {
  238.         this._width = this._widget.width;
  239.         this._height = this._widget.height;
  240.     }
  241.  
  242.     return this;
  243. }
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].