From b41cc98a53263b88d6f595e50522dc0bc504037b Mon Sep 17 00:00:00 2001
From: Donald Silveira <donald.silveira@lighthouseit.com.br>
Date: Mon, 18 Sep 2017 17:40:16 -0300
Subject: [PATCH] feat: Added example to customize ui icons

---
 demo/index.html | 122 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 105 insertions(+), 17 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 1214d38..3226235 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
     <title>DPlayer Demo</title>
@@ -10,6 +11,7 @@
     <script src="https://unpkg.com/hls.js/dist/hls.min.js"></script>
     <script src="DPlayer.js"></script>
 </head>
+
 <body class="markdown-body">
     <h2 id="quick-start">Quick Start</h2>
     <div class="example">
@@ -122,7 +124,7 @@
             var eventsEle = document.getElementById('events');
             for (let i = 0; i < events.length; i++) {
                 dp2.on(events[i], (info) => {
-                    eventsEle.innerHTML += '<p>Event: ' + events[i] +  '</p>';
+                    eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>';
                     eventsEle.scrollTop = eventsEle.scrollHeight;
                 })
             }
@@ -134,22 +136,22 @@
         <button class="btn" onclick="dp3.switchQuality(1)">Switch quality</button>
         <div id="dplayer3"></div>
         <script>
-        var dp3 = new DPlayer({
-            container: document.getElementById('dplayer3'),
-            video: {
-                quality: [{
-                    name: 'HD',
-                    url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
-                    type: 'hls'
-                }, {
-                    name: 'SD',
-                    url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
-                    type: 'normal'
-                }],
-                defaultQuality: 0,
-                pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
-            }
-        });
+            var dp3 = new DPlayer({
+                container: document.getElementById('dplayer3'),
+                video: {
+                    quality: [{
+                        name: 'HD',
+                        url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
+                        type: 'hls'
+                    }, {
+                        name: 'SD',
+                        url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
+                        type: 'normal'
+                    }],
+                    defaultQuality: 0,
+                    pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
+                }
+            });
         </script>
     </div>
 
@@ -221,6 +223,91 @@
         </script>
     </div>
 
+    <h2 id="customize-ui-icons">Customize UI icons</h2>
+    <div class="example">
+        <div id="dplayer9"></div>
+        <script>
+            var dp9 = new DPlayer({
+                container: document.getElementById('dplayer9'),
+                screenshot: false,
+                video: {
+                    url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
+                },
+                icons: {
+                    play: [
+                        '0 0 24 24',
+                        'M8 5v14l11-7z',
+                        '24'
+                    ],
+                    pause: [
+                        '0 0 24 24',
+                        'M6 19h4V5H6v14zm8-14v14h4V5h-4z',
+                        '24'
+                    ],
+                    'volume-up': [
+                        '0 0 24 24',
+                        'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
+                        '24'
+                    ],
+                    'volume-down': [
+                        '0 0 24 24',
+                        'M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z',
+                        '24'
+                    ],
+                    'volume-off': [
+                        '0 0 24 24',
+                        'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z',
+                        '24'
+                    ],
+                    loop: [
+                        '0 0 32 32',
+                        'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'
+                    ],
+                    full: [
+                        '0 0 24 24',
+                        'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z',
+                        '24'
+                    ],
+                    'full-in': [
+                        '0 0 32 33',
+                        'M24.965 24.38h-18.132c-1.366 0-2.478-1.113-2.478-2.478v-11.806c0-1.364 1.111-2.478 2.478-2.478h18.132c1.366 0 2.478 1.113 2.478 2.478v11.806c0 1.364-1.11 2.478-2.478 2.478zM6.833 10.097v11.806h18.134l-0.002-11.806h-18.132zM2.478 28.928h5.952c0.684 0 1.238-0.554 1.238-1.239 0-0.684-0.554-1.238-1.238-1.238h-5.952v-5.802c0-0.684-0.554-1.239-1.238-1.239s-1.239 0.556-1.239 1.239v5.802c0 1.365 1.111 2.478 2.478 2.478zM30.761 19.412c-0.684 0-1.238 0.554-1.238 1.238v5.801h-5.951c-0.686 0-1.239 0.554-1.239 1.238 0 0.686 0.554 1.239 1.239 1.239h5.951c1.366 0 2.478-1.111 2.478-2.478v-5.801c0-0.683-0.554-1.238-1.239-1.238zM0 5.55v5.802c0 0.683 0.554 1.238 1.238 1.238s1.238-0.555 1.238-1.238v-5.802h5.952c0.684 0 1.238-0.554 1.238-1.238s-0.554-1.238-1.238-1.238h-5.951c-1.366-0.001-2.478 1.111-2.478 2.476zM32 11.35v-5.801c0-1.365-1.11-2.478-2.478-2.478h-5.951c-0.686 0-1.239 0.554-1.239 1.238s0.554 1.238 1.239 1.238h5.951v5.801c0 0.683 0.554 1.237 1.238 1.237 0.686 0.002 1.239-0.553 1.239-1.236z'
+                    ],
+                    setting: [
+                        '0 0 24 24',
+                        'M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z',
+                        '24'
+                    ],
+                    right: [
+                        '0 0 32 32',
+                        'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'
+                    ],
+                    comment: [
+                        '0 0 24 24',
+                        'M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z',
+                        '24'
+                    ],
+                    'comment-off': [
+                        '0 0 32 32',
+                        'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z'
+                    ],
+                    send: [
+                        '0 0 32 32',
+                        'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'
+                    ],
+                    menu: [
+                        '0 0 22 32',
+                        'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'
+                    ],
+                    camera: [
+                        '0 0 32 32',
+                        'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
+                    ]
+                },
+                iconColor: 'orange'
+            });
+        </script>
+    </div>
+
     <h2 id="html5-check">HTML5 check</h2>
     <ul>
         <li class="video">Video</li>
@@ -239,4 +326,5 @@
     <script src="demo.js"></script>
     <script src="modernizr.js"></script>
 </body>
+
 </html>
\ No newline at end of file
