add airplay

packages/artplayer-document/docs/en/Options.mdx

@@ -1123,3 +1123,20 @@ var art = new Artplayer({
     autoOrientation: true,
 });
 ```
+
+## airplay
+
+-   Type: `Boolean`
+-   Default: `false`
+
+Whether to display the AirPlay button, only available in Safari currently
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});
+```

packages/artplayer-document/docs/zh-cn/Options.mdx

@@ -1120,4 +1120,21 @@ var art = new Artplayer({
     url: '/assets/sample/video.mp4',
     autoOrientation: true,
 });
+```
+
+## airplay
+
+-   Type: `Boolean`
+-   Default: `false`
+
+是否显示 airplay 按钮，当前只在 Safari 下可用
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});
 ```

packages/artplayer/src/control/airplay.js

@@ -0,0 +1,17 @@
+import { append } from '../utils';
+
+export default function pip(option) {
+    return (art) => ({
+        ...option,
+        tooltip: art.i18n.get('AirPlay'),
+        mounted: ($control) => {
+            const {
+                events: { proxy },
+                icons,
+            } = art;
+
+            append($control, icons.airplay);
+            proxy($control, 'click', () => art.airplay());
+        },
+    });
+}

packages/artplayer/src/control/index.js

@@ -12,6 +12,7 @@ import thumbnails from './thumbnails';
 import screenshot from './screenshot';
 import quality from './quality';
 import loop from './loop';
+import airplay from './airplay';
 
 export default class Control extends Component {
     constructor(art) {
@@ -138,12 +139,21 @@ export default class Control extends Component {
             }),
         );
 
+        this.add(
+            airplay({
+                name: 'airplay',
+                disable: !option.airplay || !window.WebKitPlaybackTargetAvailabilityEvent,
+                position: 'right',
+                index: 50,
+            }),
+        );
+
         this.add(
             fullscreenWeb({
                 name: 'fullscreenWeb',
                 disable: !option.fullscreenWeb,
                 position: 'right',
-                index: 50,
+                index: 60,
             }),
         );
 
@@ -152,7 +162,7 @@ export default class Control extends Component {
                 name: 'fullscreen',
                 disable: !option.fullscreen,
                 position: 'right',
-                index: 60,
+                index: 70,
             }),
         );
 

packages/artplayer/src/i18n/cs.json

@@ -32,5 +32,7 @@
     "Fullscreen Not Supported": "Režim celé obrazovky není podporován",
     "Subtitle Offset": "Posun titulků",
     "Last Seen": "Naposledy viděn",
-    "Jump Play": "Hra na skok"
+    "Jump Play": "Hra na skok",
+    "AirPlay": "AirPlay",
+    "AirPlay Not Available": "AirPlay není k dispozici"
 }

packages/artplayer/src/i18n/pl.json

@@ -32,5 +32,7 @@
     "Fullscreen Not Supported": "Pełny ekran nieobsługiwany",
     "Subtitle Offset": "Przesunięcie napisów",
     "Last Seen": "Ostatnio widziany",
-    "Jump Play": "Skocz do gry"
+    "Jump Play": "Skocz do gry",
+    "AirPlay": "AirPlay",
+    "AirPlay Not Available": "AirPlay nie jest dostępny"
 }

packages/artplayer/src/i18n/zh-cn.json

@@ -32,5 +32,7 @@
     "Fullscreen Not Supported": "不支持全屏",
     "Subtitle Offset": "字幕偏移",
     "Last Seen": "上次看到",
-    "Jump Play": "跳转播放"
+    "Jump Play": "跳转播放",
+    "AirPlay": "隔空播放",
+    "AirPlay Not Available": "隔空播放不可用"
 }

packages/artplayer/src/i18n/zh-tw.json

@@ -32,5 +32,7 @@
     "Fullscreen Not Supported": "不支持全屏",
     "Subtitle Offset": "字幕偏移",
     "Last Seen": "上次看到",
-    "Jump Play": "跳轉播放"
+    "Jump Play": "跳轉播放",
+    "AirPlay": "隔空播放",
+    "AirPlay Not Available": "隔空播放不可用"
 }

packages/artplayer/src/icons/airplay.svg

@@ -0,0 +1,6 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path fill="#fff" d="M16,1 L2,1 C1.447,1 1,1.447 1,2 L1,12 C1,12.553 1.447,13 2,13 L5,13 L5,11 L3,11 L3,3 L15,3 L15,11 L13,11 L13,13 L16,13 C16.553,13 17,12.553 17,12 L17,2 C17,1.447 16.553,1 16,1 L16,1 Z"></path>
+        <polygon fill="#fff" points="4 17 14 17 9 11"></polygon>
+    </g>
+</svg>

packages/artplayer/src/icons/index.js

@@ -25,6 +25,7 @@ import switchOff from 'bundle-text:./switch-off.svg';
 import flip from 'bundle-text:./flip.svg';
 import error from 'bundle-text:./error.svg';
 import close from 'bundle-text:./close.svg';
+import airplay from 'bundle-text:./airplay.svg';
 
 export default class Icons {
     constructor(art) {
@@ -55,6 +56,7 @@ export default class Icons {
             switchOff,
             error,
             close,
+            airplay,
             ...art.option.icons,
         };
 

packages/artplayer/src/index.js

@@ -150,6 +150,7 @@ export default class Artplayer extends Emitter {
             fastForward: false,
             autoPlayback: false,
             autoOrientation: false,
+            airplay: false,
             layers: [],
             contextmenu: [],
             controls: [],

packages/artplayer/src/player/airplayMix.js

@@ -0,0 +1,36 @@
+import { def } from '../utils';
+
+export default function airplayMix(art) {
+    const {
+        i18n,
+        notice,
+        events: { proxy },
+        template: { $video },
+    } = art;
+
+    let available = false;
+
+    if (window.WebKitPlaybackTargetAvailabilityEvent && $video.webkitShowPlaybackTargetPicker) {
+        proxy($video, 'webkitplaybacktargetavailabilitychanged', (event) => {
+            switch (event.availability) {
+                case 'available':
+                    available = true;
+                    break;
+                case 'not-available':
+                    available = false;
+                    break;
+            }
+        });
+    }
+
+    def(art, 'airplay', {
+        value() {
+            if (available) {
+                $video.webkitShowPlaybackTargetPicker();
+                art.emit('airplay');
+            } else {
+                notice.show = i18n.get('AirPlay Not Available');
+            }
+        },
+    });
+}

packages/artplayer/src/player/index.js

@@ -28,6 +28,7 @@ import themeMix from './themeMix';
 import titleMix from './titleMix';
 import normalSizeMix from './normalSizeMix';
 import subtitleOffsetMix from './subtitleOffsetMix';
+import airplayMix from './airplayMix';
 import optionInit from './optionInit';
 import eventInit from './eventInit';
 
@@ -63,6 +64,7 @@ export default class Player {
         titleMix(art);
         normalSizeMix(art);
         subtitleOffsetMix(art);
+        airplayMix(art);
         eventInit(art);
         optionInit(art);
     }

packages/artplayer/src/scheme/index.js

@@ -67,6 +67,7 @@ export default {
     fastForward: b,
     autoPlayback: b,
     autoOrientation: b,
+    airplay: b,
     plugins: [f],
     whitelist: [`${s}|${f}|${r}`],
     layers: [ComponentOption],

packages/artplayer/types/artplayer.d.ts

@@ -365,6 +365,11 @@ type Option = {
      */
     autoOrientation?: boolean;
 
+    /**
+     * Whether use airplay
+     */
+    airplay?: boolean;
+
     /**
      * Custom plugin list
      */