[Modern Media Controls] Placards
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 10 Oct 2016 21:17:47 +0000 (21:17 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 10 Oct 2016 21:17:47 +0000 (21:17 +0000)
https://bugs.webkit.org/show_bug.cgi?id=163110
<rdar://problem/28669342>

Patch by Antoine Quint <graouts@apple.com> on 2016-10-10
Reviewed by Dean Jackson.

Source/WebCore:

Inline media controls need to display placards when the video is no longer playing inline,
such as when the video is playing fullscreen or via AirPlay. To that end, we introduce a
new Placard class and two subclasses for display during fullscreen or AirPlay playback.
Note that localization will be done in a later patch.

Tests: media/modern-media-controls/airplay-placard/airplay-placard.html
       media/modern-media-controls/pip-placard/pip-placard.html
       media/modern-media-controls/placard/placard.html

* Modules/modern-media-controls/controls/airplay-placard.js:
(AirplayPlacard):
* Modules/modern-media-controls/controls/icon-service.js:
* Modules/modern-media-controls/controls/pip-placard.js:
(PiPPlacard):
* Modules/modern-media-controls/controls/placard.css:
(.placard):
(.placard .container):
(.placard .icon):
(.placard .title,):
(.placard .title):
(.placard .description):
* Modules/modern-media-controls/controls/placard.js:
(Placard.):
* Modules/modern-media-controls/images/iOS/airplay-placard@1x.png: Added.
* Modules/modern-media-controls/images/iOS/airplay-placard@2x.png: Added.
* Modules/modern-media-controls/images/iOS/airplay-placard@3x.png: Added.
* Modules/modern-media-controls/images/iOS/pip-placard@1x.png: Added.
* Modules/modern-media-controls/images/iOS/pip-placard@2x.png: Added.
* Modules/modern-media-controls/images/iOS/pip-placard@3x.png: Added.
* Modules/modern-media-controls/images/macOS/airplay-placard@1x.png: Added.
* Modules/modern-media-controls/images/macOS/airplay-placard@2x.png: Added.
* Modules/modern-media-controls/images/macOS/pip-placard@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pip-placard@2x.png: Added.

LayoutTests:

Testing the properties of the new Placard class and its subclasses.

* media/modern-media-controls/airplay-placard/airplay-placard-expected.txt: Added.
* media/modern-media-controls/airplay-placard/airplay-placard.html: Added.
* media/modern-media-controls/pip-placard/pip-placard-expected.txt: Added.
* media/modern-media-controls/pip-placard/pip-placard.html: Added.
* media/modern-media-controls/placard/placard-expected.txt: Added.
* media/modern-media-controls/placard/placard.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@207024 268f45cc-cd09-0410-ab3c-d52691b4dbfc

23 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/placard/placard-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/placard/placard.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/icon-service.js
Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/placard.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/placard.js [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png [new file with mode: 0644]

index ba0ac12..12d61b8 100644 (file)
@@ -1,3 +1,20 @@
+2016-10-10  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Placards
+        https://bugs.webkit.org/show_bug.cgi?id=163110
+        <rdar://problem/28669342>
+
+        Reviewed by Dean Jackson.
+
+        Testing the properties of the new Placard class and its subclasses.
+
+        * media/modern-media-controls/airplay-placard/airplay-placard-expected.txt: Added.
+        * media/modern-media-controls/airplay-placard/airplay-placard.html: Added.
+        * media/modern-media-controls/pip-placard/pip-placard-expected.txt: Added.
+        * media/modern-media-controls/pip-placard/pip-placard.html: Added.
+        * media/modern-media-controls/placard/placard-expected.txt: Added.
+        * media/modern-media-controls/placard/placard.html: Added.
+
 2016-10-10  Ryan Haddad  <ryanhaddad@apple.com>
 
         Marking fast/replaced/preferred-widths.html as flaky on mac.
diff --git a/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt b/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard-expected.txt
new file mode 100644 (file)
index 0000000..393b785
--- /dev/null
@@ -0,0 +1,13 @@
+Testing the AirplayPlacard class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Placard with all parameters
+PASS placard.children[0].children[0].iconName is Icons.AirplayPlacard
+PASS placard.children[0].children[1].element.innerText is "AirPlay"
+PASS placard.children[0].children[2].element.innerText is "This video is playing on your Apple TV"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html b/LayoutTests/media/modern-media-controls/airplay-placard/airplay-placard.html
new file mode 100644 (file)
index 0000000..e149e56
--- /dev/null
@@ -0,0 +1,29 @@
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>AirplayPlacard</code> class.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+debug("Placard with all parameters");
+const placard = new AirplayPlacard({ layoutTraits: LayoutTraits.macOS });
+
+shouldBe("placard.children[0].children[0].iconName", "Icons.AirplayPlacard");
+shouldBeEqualToString("placard.children[0].children[1].element.innerText", "AirPlay");
+shouldBeEqualToString("placard.children[0].children[2].element.innerText", "This video is playing on your Apple TV");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt b/LayoutTests/media/modern-media-controls/pip-placard/pip-placard-expected.txt
new file mode 100644 (file)
index 0000000..f087df9
--- /dev/null
@@ -0,0 +1,12 @@
+Testing the PiPPlacard class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Placard with all parameters
+PASS placard.children[0].children[0].iconName is Icons.PiPPlacard
+PASS placard.children[0].children[1].element.innerText is "This video is playing in Picture in Picture"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html b/LayoutTests/media/modern-media-controls/pip-placard/pip-placard.html
new file mode 100644 (file)
index 0000000..beddf62
--- /dev/null
@@ -0,0 +1,28 @@
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>PiPPlacard</code> class.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+debug("Placard with all parameters");
+const placard = new PiPPlacard({ layoutTraits: LayoutTraits.macOS });
+
+shouldBe("placard.children[0].children[0].iconName", "Icons.PiPPlacard");
+shouldBeEqualToString("placard.children[0].children[1].element.innerText", "This video is playing in Picture in Picture");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/LayoutTests/media/modern-media-controls/placard/placard-expected.txt b/LayoutTests/media/modern-media-controls/placard/placard-expected.txt
new file mode 100644 (file)
index 0000000..4821227
--- /dev/null
@@ -0,0 +1,43 @@
+Testing the Placard class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Placard with all parameters
+PASS placard.element.localName is "div"
+PASS placard.element.className is "placard"
+PASS placard.children.length is 1
+PASS placard.children[0].element.localName is "div"
+PASS placard.children[0].element.className is "container"
+PASS placard.children[0].children.length is 3
+PASS placard.children[0].children[0] instanceof IconButton is true
+PASS placard.children[0].children[0].iconName is Icons.AirplayPlacard
+PASS placard.children[0].children[1] instanceof LayoutNode is true
+PASS placard.children[0].children[1].element.localName is "div"
+PASS placard.children[0].children[1].element.className is "title"
+PASS placard.children[0].children[1].element.innerText is "My title"
+PASS placard.children[0].children[2] instanceof LayoutNode is true
+PASS placard.children[0].children[2].element.localName is "div"
+PASS placard.children[0].children[2].element.className is "description"
+PASS placard.children[0].children[2].element.innerText is "My description"
+
+Placard without any parameter
+PASS defaultPlacard.children[0].children.length is 0
+
+Placard with only a description
+PASS onlyDescriptionPlacard.children[0].children.length is 1
+PASS onlyDescriptionPlacard.children[0].children[0] instanceof LayoutNode is true
+PASS onlyDescriptionPlacard.children[0].children[0].element.className is "description"
+
+Placard with only a title
+PASS onlyTitlePlacard.children[0].children.length is 1
+PASS onlyTitlePlacard.children[0].children[0] instanceof LayoutNode is true
+PASS onlyTitlePlacard.children[0].children[0].element.className is "title"
+
+Placard with only an icon
+PASS onlyIconPlacard.children[0].children.length is 1
+PASS onlyIconPlacard.children[0].children[0] instanceof IconButton is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/placard/placard.html b/LayoutTests/media/modern-media-controls/placard/placard.html
new file mode 100644 (file)
index 0000000..dd9afe3
--- /dev/null
@@ -0,0 +1,71 @@
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>Placard</code> class.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+debug("Placard with all parameters");
+const placard = new Placard({
+    iconName: Icons.AirplayPlacard,
+    title: "My title",
+    description: "My description",
+    layoutDelegate: { layoutTraits: LayoutTraits.macOS }
+});
+
+shouldBeEqualToString("placard.element.localName", "div");
+shouldBeEqualToString("placard.element.className", "placard");
+shouldBe("placard.children.length", "1");
+shouldBeEqualToString("placard.children[0].element.localName", "div");
+shouldBeEqualToString("placard.children[0].element.className", "container");
+shouldBe("placard.children[0].children.length", "3");
+shouldBeTrue("placard.children[0].children[0] instanceof IconButton");
+shouldBe("placard.children[0].children[0].iconName", "Icons.AirplayPlacard");
+shouldBeTrue("placard.children[0].children[1] instanceof LayoutNode");
+shouldBeEqualToString("placard.children[0].children[1].element.localName", "div");
+shouldBeEqualToString("placard.children[0].children[1].element.className", "title");
+shouldBeEqualToString("placard.children[0].children[1].element.innerText", "My title");
+shouldBeTrue("placard.children[0].children[2] instanceof LayoutNode");
+shouldBeEqualToString("placard.children[0].children[2].element.localName", "div");
+shouldBeEqualToString("placard.children[0].children[2].element.className", "description");
+shouldBeEqualToString("placard.children[0].children[2].element.innerText", "My description");
+
+debug("");
+debug("Placard without any parameter");
+const defaultPlacard = new Placard;
+shouldBe("defaultPlacard.children[0].children.length", "0");
+
+debug("");
+debug("Placard with only a description");
+const onlyDescriptionPlacard = new Placard({ description: "My description" });
+shouldBe("onlyDescriptionPlacard.children[0].children.length", "1");
+shouldBeTrue("onlyDescriptionPlacard.children[0].children[0] instanceof LayoutNode");
+shouldBeEqualToString("onlyDescriptionPlacard.children[0].children[0].element.className", "description");
+
+debug("");
+debug("Placard with only a title");
+const onlyTitlePlacard = new Placard({ title: "My title" });
+shouldBe("onlyTitlePlacard.children[0].children.length", "1");
+shouldBeTrue("onlyTitlePlacard.children[0].children[0] instanceof LayoutNode");
+shouldBeEqualToString("onlyTitlePlacard.children[0].children[0].element.className", "title");
+
+debug("");
+debug("Placard with only an icon");
+const onlyIconPlacard = new Placard({ iconName: Icons.AirplayPlacard, layoutDelegate: { layoutTraits: LayoutTraits.macOS } });
+shouldBe("onlyIconPlacard.children[0].children.length", "1");
+shouldBeTrue("onlyIconPlacard.children[0].children[0] instanceof IconButton");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 94c37a5..6d29a25 100644 (file)
@@ -1,3 +1,45 @@
+2016-10-10  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Placards
+        https://bugs.webkit.org/show_bug.cgi?id=163110
+        <rdar://problem/28669342>
+
+        Reviewed by Dean Jackson.
+
+        Inline media controls need to display placards when the video is no longer playing inline,
+        such as when the video is playing fullscreen or via AirPlay. To that end, we introduce a
+        new Placard class and two subclasses for display during fullscreen or AirPlay playback.
+        Note that localization will be done in a later patch.
+
+        Tests: media/modern-media-controls/airplay-placard/airplay-placard.html
+               media/modern-media-controls/pip-placard/pip-placard.html
+               media/modern-media-controls/placard/placard.html
+
+        * Modules/modern-media-controls/controls/airplay-placard.js:
+        (AirplayPlacard):
+        * Modules/modern-media-controls/controls/icon-service.js:
+        * Modules/modern-media-controls/controls/pip-placard.js:
+        (PiPPlacard):
+        * Modules/modern-media-controls/controls/placard.css:
+        (.placard):
+        (.placard .container):
+        (.placard .icon):
+        (.placard .title,):
+        (.placard .title):
+        (.placard .description):
+        * Modules/modern-media-controls/controls/placard.js:
+        (Placard.):
+        * Modules/modern-media-controls/images/iOS/airplay-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/iOS/airplay-placard@2x.png: Added.
+        * Modules/modern-media-controls/images/iOS/airplay-placard@3x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pip-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pip-placard@2x.png: Added.
+        * Modules/modern-media-controls/images/iOS/pip-placard@3x.png: Added.
+        * Modules/modern-media-controls/images/macOS/airplay-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/airplay-placard@2x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pip-placard@1x.png: Added.
+        * Modules/modern-media-controls/images/macOS/pip-placard@2x.png: Added.
+
 2016-10-10  Chris Dumez  <cdumez@apple.com>
 
         Add support for Navigator.languages attribute
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js b/Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js
new file mode 100644 (file)
index 0000000..17b8d91
--- /dev/null
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class AirplayPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.AirplayPlacard,
+            title: "AirPlay",
+            description: "This video is playing on your Apple TV",
+            layoutDelegate
+        });
+    }
+
+}
index 2dceb14..da931fb 100644 (file)
 
 const Icons = {
     Airplay         : "airplay",
+    AirplayPlacard  : "airplay-placard",
     EnterFullscreen : "enter-fullscreen",
     EnterPiP        : "pip-in",
     ExitFullscreen  : "exit-fullscreen",
     Forward         : "forward",
     Pause           : "pause",
+    PiPPlacard      : "pip-placard",
     Play            : "play",
     Rewind          : "rewind",
     ScaleToFill     : "scale-to-fill",
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js b/Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js
new file mode 100644 (file)
index 0000000..6f18b8e
--- /dev/null
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class PiPPlacard extends Placard
+{
+
+    constructor(layoutDelegate)
+    {
+        super({
+            iconName: Icons.PiPPlacard,
+            description: "This video is playing in Picture in Picture",
+            layoutDelegate
+        });
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/placard.css b/Source/WebCore/Modules/modern-media-controls/controls/placard.css
new file mode 100644 (file)
index 0000000..cc93c3b
--- /dev/null
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.placard {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    background-color: black;
+    color: rgb(164, 164, 164);
+    
+    font-family: -apple-system;
+}
+
+.placard .container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-width: 402px;
+
+    transform: translate(-50%, -50%);
+}
+
+.placard .icon {
+    position: relative;
+    left: 50%;
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgb(164, 164, 164) !important;
+
+    margin-bottom: 10px;
+
+    transform: translateX(-50%);
+}
+
+.placard .title,
+.placard .description {
+    text-align: center;
+}
+
+.placard .title {
+    font-size: 20px;
+}
+
+.placard .description {
+    font-size: 13px;
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/placard.js b/Source/WebCore/Modules/modern-media-controls/controls/placard.js
new file mode 100644 (file)
index 0000000..73ad5e1
--- /dev/null
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class Placard extends LayoutItem
+{
+
+    constructor({ iconName = null, title = "", description = "", layoutDelegate = null } = {})
+    {
+        super({
+            element: `<div class="placard"></div>`,
+            layoutDelegate
+        });
+
+        const container = this.addChild(new LayoutNode(`<div class="container"></div>`));
+        
+        if (iconName)
+            container.addChild(new IconButton(this)).iconName = iconName;
+
+        if (!!title)
+            container.addChild(new LayoutNode(`<div class="title">${title}</div>`));
+
+        if (!!description)
+            container.addChild(new LayoutNode(`<div class="description">${description}</div>`));
+    }
+
+}
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png
new file mode 100644 (file)
index 0000000..86061b2
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png
new file mode 100644 (file)
index 0000000..83c72ea
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png
new file mode 100644 (file)
index 0000000..b8aaef1
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/airplay-placard@3x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png
new file mode 100644 (file)
index 0000000..423963a
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png
new file mode 100644 (file)
index 0000000..bbd4cd8
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png b/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png
new file mode 100644 (file)
index 0000000..412eaba
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/iOS/pip-placard@3x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png
new file mode 100644 (file)
index 0000000..86061b2
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png
new file mode 100644 (file)
index 0000000..83c72ea
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/airplay-placard@2x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png
new file mode 100644 (file)
index 0000000..423963a
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@1x.png differ
diff --git a/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png b/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png
new file mode 100644 (file)
index 0000000..bbd4cd8
Binary files /dev/null and b/Source/WebCore/Modules/modern-media-controls/images/macOS/pip-placard@2x.png differ