[Modern Media Controls] Show a loading indicator after pressing the play button in...
[WebKit-https.git] / Source / WebCore / Modules / modern-media-controls / controls / compact-activity-indicator.js
1 /*
2  * Copyright (C) 2018 Apple Inc. All Rights Reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 class CompactActivityIndicator extends Button
27 {
28
29     constructor(layoutDelegate)
30     {
31         super({
32             cssClassName: "compact-activity-indicator",
33             iconName: Icons.SpinnerCompact,
34             layoutDelegate
35         });
36     }
37
38     // Public
39
40     show()
41     {
42         const classList = this.element.classList;
43         classList.add("spins");
44         classList.remove("fades-out");
45     }
46
47     hide()
48     {
49         const classList = this.element.classList;
50         if (!classList.contains("spins") || classList.contains("fades-out"))
51             return;
52
53         classList.add("fades-out");
54         this.image.element.addEventListener("animationend", event => {
55             if (event.animationName !== "compact-activity-indicator-fades-out")
56                 return;
57             classList.remove("spins");
58             classList.remove("fades-out");
59         }, { once: true });
60     }
61     
62 }