[MediaControls][iOS] Start playback button is visible when playing embedded YouTube
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsiOS.js
1 function createControls(root, video, host)
2 {
3     return new ControllerIOS(root, video, host);
4 };
5
6 function ControllerIOS(root, video, host)
7 {
8     Controller.call(this, root, video, host);
9 };
10
11 /* Enums */
12 ControllerIOS.StartPlaybackControls = 2;
13
14 ControllerIOS.prototype = {
15     inheritFrom: function(parent) {
16         for (var property in parent) {
17             if (!this.hasOwnProperty(property))
18                 this[property] = parent[property];
19         }
20     },
21
22     addVideoListeners: function() {
23         Controller.prototype.addVideoListeners.call(this);
24
25         this.listenFor(this.video, 'webkitbeginfullscreen', this.handleFullscreenChange);
26         this.listenFor(this.video, 'webkitendfullscreen', this.handleFullscreenChange);
27     },
28
29     removeVideoListeners: function() {
30         Controller.prototype.removeVideoListeners.call(this);
31
32         this.stopListeningFor(this.video, 'webkitbeginfullscreen', this.handleFullscreenChange);
33         this.stopListeningFor(this.video, 'webkitendfullscreen', this.handleFullscreenChange);
34     },
35
36
37     createBase: function() {
38         Controller.prototype.createBase.call(this);
39
40         var startPlaybackButton = this.controls.startPlaybackButton = document.createElement('button');
41         startPlaybackButton.setAttribute('pseudo', '-webkit-media-controls-start-playback-button');
42         startPlaybackButton.setAttribute('aria-label', this.UIString('Start Playback'));
43
44         this.listenFor(this.base, 'touchstart', this.handleWrapperTouchStart);
45         this.stopListeningFor(this.base, 'mousemove', this.handleWrapperMouseMove);
46         this.stopListeningFor(this.base, 'mouseout', this.handleWrapperMouseOut);
47     },
48
49     shouldHaveStartPlaybackButton: function() {
50         var allowsInline = this.host.mediaPlaybackAllowsInline;
51
52         if (this.isAudio() && allowsInline)
53             return false;
54
55         if (this.isFullScreen())
56             return false;
57
58         if (!this.video.currentSrc && this.video.error)
59             return false;
60
61         if (!this.video.controls && allowsInline)
62             return false;
63
64         if (!this.host.userGestureRequired && allowsInline)
65             return false;
66
67         return true;
68     },
69
70     shouldHaveControls: function() {
71         if (this.shouldHaveStartPlaybackButton())
72             return false;
73
74         return Controller.prototype.shouldHaveControls.call(this);
75     },
76
77     shouldHaveAnyUI: function() {
78         return this.shouldHaveStartPlaybackButton() || Controller.prototype.shouldHaveAnyUI.call(this);
79     },
80
81     createControls: function() {
82         Controller.prototype.createControls.call(this);
83
84         this.listenFor(this.controls.startPlaybackButton, 'touchstart', this.handleStartPlaybackButtonTouchStart);
85         this.listenFor(this.controls.startPlaybackButton, 'touchend', this.handleStartPlaybackButtonTouchEnd);
86         this.listenFor(this.controls.startPlaybackButton, 'touchcancel', this.handleStartPlaybackButtonTouchCancel);
87
88         this.listenFor(this.controls.panel, 'touchstart', this.handlePanelTouchStart);
89         this.listenFor(this.controls.panel, 'touchend', this.handlePanelTouchEnd);
90         this.listenFor(this.controls.panel, 'touchcancel', this.handlePanelTouchCancel);
91         this.listenFor(this.controls.playButton, 'touchstart', this.handlePlayButtonTouchStart);
92         this.listenFor(this.controls.playButton, 'touchend', this.handlePlayButtonTouchEnd);
93         this.listenFor(this.controls.playButton, 'touchcancel', this.handlePlayButtonTouchCancel);
94         this.listenFor(this.controls.fullscreenButton, 'touchstart', this.handleFullscreenTouchStart);
95         this.listenFor(this.controls.fullscreenButton, 'touchend', this.handleFullscreenTouchEnd);
96         this.listenFor(this.controls.fullscreenButton, 'touchcancel', this.handleFullscreenTouchCancel);
97         this.stopListeningFor(this.controls.playButton, 'click', this.handlePlayButtonClicked);
98     },
99
100     setControlsType: function(type) {
101         if (type === this.controlsType)
102             return;
103         Controller.prototype.setControlsType.call(this, type);
104
105         if (type === ControllerIOS.StartPlaybackControls)
106             this.addStartPlaybackControls();
107         else
108             this.removeStartPlaybackControls();
109     },
110
111     addStartPlaybackControls: function() {
112         this.base.appendChild(this.controls.startPlaybackButton);
113     },
114
115     removeStartPlaybackControls: function() {
116         if (this.controls.startPlaybackButton.parentNode)
117             this.controls.startPlaybackButton.parentNode.removeChild(this.controls.startPlaybackButton);
118     },
119
120     configureInlineControls: function() {
121         this.controls.panel.appendChild(this.controls.playButton);
122         this.controls.panel.appendChild(this.controls.statusDisplay);
123         this.controls.panel.appendChild(this.controls.timelineBox);
124         this.controls.timelineBox.appendChild(this.controls.currentTime);
125         this.controls.timelineBox.appendChild(this.controls.timeline);
126         this.controls.timelineBox.appendChild(this.controls.remainingTime);
127         if (!this.isAudio())
128             this.controls.panel.appendChild(this.controls.fullscreenButton);
129     },
130
131     configureFullScreenControls: function() {
132         // Do nothing
133     },
134
135     updateControls: function() {
136         if (this.shouldHaveStartPlaybackButton())
137             this.setControlsType(ControllerIOS.StartPlaybackControls);
138         else if (this.isFullScreen())
139             this.setControlsType(Controller.FullScreenControls);
140         else
141             this.setControlsType(Controller.InlineControls);
142
143     },
144
145     progressFillStyle: function() {
146         return 'rgb(0, 0, 0)';
147     },
148
149     handlePlayButtonTouchStart: function() {
150         this.controls.playButton.classList.add('active');
151     },
152
153     handlePlayButtonTouchEnd: function(event) {
154         this.controls.playButton.classList.remove('active');
155
156         if (this.canPlay())
157             this.video.play();
158         else
159             this.video.pause();
160
161         event.stopPropagation();
162     },
163
164     handlePlayButtonTouchCancel: function(event) {
165         this.controls.playButton.classList.remove('active');
166         event.stopPropagation();
167     },
168
169     handleWrapperTouchStart: function(event) {
170         if (event.target != this.base)
171             return;
172
173         if (this.controlsAreHidden()) {
174             this.showControls();
175             if (this.hideTimer)
176                 clearTimeout(this.hideTimer);
177             this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
178         } else if (!this.canPlay())
179             this.hideControls();
180     },
181
182     handlePanelTouchStart: function(event) {
183         this.video.style.webkitUserSelect = 'none';
184     },
185
186     handlePanelTouchEnd: function(event) {
187         this.video.style.removeProperty('-webkit-user-select');
188     },
189
190     handlePanelTouchCancel: function(event) {
191         this.video.style.removeProperty('-webkit-user-select');
192     },
193
194     isFullScreen: function()
195     {
196         return this.video.webkitDisplayingFullscreen;
197     },
198
199     handleFullscreenButtonClicked: function(event)
200     {
201         console.trace();
202         if (this.isFullScreen())
203             this.video.webkitExitFullscreen();
204         else
205             this.video.webkitEnterFullscreen();
206     },
207
208     handleFullscreenTouchStart: function() {
209         this.controls.fullscreenButton.classList.add('active');
210     },
211
212     handleFullscreenTouchEnd: function(event) {
213         this.controls.fullscreenButton.classList.remove('active');
214
215         this.handleFullscreenButtonClicked();
216
217         event.stopPropagation();
218     },
219
220     handleFullscreenTouchCancel: function(event) {
221         this.controls.fullscreenButton.classList.remove('active');
222         event.stopPropagation();
223     },
224
225     handleStartPlaybackButtonTouchStart: function(event) {
226         this.controls.fullscreenButton.classList.add('active');
227     },
228
229     handleStartPlaybackButtonTouchEnd: function(event) {
230         this.controls.fullscreenButton.classList.remove('active');
231         if (this.video.error)
232             return;
233
234         this.video.play();
235         event.stopPropagation();
236     },
237
238     handleStartPlaybackButtonTouchCancel: function(event) {
239         this.controls.fullscreenButton.classList.remove('active');
240         event.stopPropagation();
241     },
242
243     handleReadyStateChange: function(event) {
244         Controller.prototype.handleReadyStateChange.call(this, event);
245         this.updateControls();
246     },
247
248 };
249
250 ControllerIOS.prototype.inheritFrom(Object.create(Controller.prototype));
251 Object.defineProperty(ControllerIOS.prototype, 'constructor', { enumerable:false, value:ControllerIOS });