1 : /**
2 :  * @file volume-level-tooltip.js
3 :  */
4 : import Component from '../../component';
5 : import * as Dom from '../../utils/dom.js';
6 : import * as Fn from '../../utils/fn.js';
7 : 
8 : /**
9 :  * Volume level tooltips display a volume above or side by side the volume bar.
10 :  *
11 :  * @extends Component
12 :  */
13 : class VolumeLevelTooltip extends Component {
14 : 
15 :   /**
16 :    * Creates an instance of this class.
17 :    *
18 :    * @param {Player} player
19 :    *        The {@link Player} that this class should be attached to.
20 :    *
21 :    * @param {Object} [options]
22 :    *        The key/value store of player options.
23 :    */
24 :   constructor(player, options) {
25 :     super(player, options);
26 :     this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
27 :   }
28 : 
29 :   /**
30 :    * Create the volume tooltip DOM element
31 :    *
32 :    * @return {Element}
33 :    *         The element that was created.
34 :    */
35 :   createEl() {
36 :     return super.createEl('div', {
37 :       className: 'vjs-volume-tooltip'
38 :     }, {
39 :       'aria-hidden': 'true'
40 :     });
41 :   }
42 : 
43 :   /**
44 :    * Updates the position of the tooltip relative to the `VolumeBar` and
45 :    * its content text.
46 :    *
47 :    * @param {Object} rangeBarRect
48 :    *        The `ClientRect` for the {@link VolumeBar} element.
49 :    *
50 :    * @param {number} rangeBarPoint
51 :    *        A number from 0 to 1, representing a horizontal/vertical reference point
52 :    *        from the left edge of the {@link VolumeBar}
53 :    *
54 :    * @param {boolean} vertical
55 :    *        Referees to the Volume control position
56 :    *        in the control bar{@link VolumeControl}
57 :    *
58 :    */
59 :   update(rangeBarRect, rangeBarPoint, vertical, content) {
60 :     if (!vertical) {
61 :       const tooltipRect = Dom.getBoundingClientRect(this.el_);
62 :       const playerRect = Dom.getBoundingClientRect(this.player_.el());
63 :       const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;
64 : 
65 :       if (!playerRect || !tooltipRect) {
66 :         return;
67 :       }
68 : 
69 :       const spaceLeftOfPoint = (rangeBarRect.left - playerRect.left) + volumeBarPointPx;
70 :       const spaceRightOfPoint = (rangeBarRect.width - volumeBarPointPx) +
71 :         (playerRect.right - rangeBarRect.right);
72 :       let pullTooltipBy = tooltipRect.width / 2;
73 : 
74 :       if (spaceLeftOfPoint < pullTooltipBy) {
75 :         pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
76 :       } else if (spaceRightOfPoint < pullTooltipBy) {
77 :         pullTooltipBy = spaceRightOfPoint;
78 :       }
79 : 
80 :       if (pullTooltipBy < 0) {
81 :         pullTooltipBy = 0;
82 :       } else if (pullTooltipBy > tooltipRect.width) {
83 :         pullTooltipBy = tooltipRect.width;
84 :       }
85 : 
86 :       this.el_.style.right = `-${pullTooltipBy}px`;
87 :     }
88 :     this.write(`${content}%`);
89 :   }
90 : 
91 :   /**
92 :    * Write the volume to the tooltip DOM element.
93 :    *
94 :    * @param {string} content
95 :    *        The formatted volume for the tooltip.
96 :    */
97 :   write(content) {
98 :     Dom.textContent(this.el_, content);
99 :   }
100 : 
101 :   /**
102 :    * Updates the position of the volume tooltip relative to the `VolumeBar`.
103 :    *
104 :    * @param {Object} rangeBarRect
105 :    *        The `ClientRect` for the {@link VolumeBar} element.
106 :    *
107 :    * @param {number} rangeBarPoint
108 :    *        A number from 0 to 1, representing a horizontal/vertical reference point
109 :    *        from the left edge of the {@link VolumeBar}
110 :    *
111 :    * @param {boolean} vertical
112 :    *        Referees to the Volume control position
113 :    *        in the control bar{@link VolumeControl}
114 :    *
115 :    * @param {number} volume
116 :    *        The volume level to update the tooltip to
117 :    *
118 :    * @param {Function} cb
119 :    *        A function that will be called during the request animation frame
120 :    *        for tooltips that need to do additional animations from the default
121 :    */
122 :   updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
123 :     this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
124 :       this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
125 :       if (cb) {
126 :         cb();
127 :       }
128 :     });
129 :   }
130 : }
131 : 
132 : Component.registerComponent('VolumeLevelTooltip', VolumeLevelTooltip);
133 : export default VolumeLevelTooltip;