add flip in menu

packages/artplayer/src/contextmenu/flip.js

@@ -0,0 +1,30 @@
+import { inverseClass, queryAll } from '../utils';
+
+export default function flip(option) {
+    return (art) => {
+        const { i18n } = art;
+        return {
+            ...option,
+            html: `${i18n.get('Video Flip')}:
+                <span data-flip="normal" class="art-current">${i18n.get('Normal')}</span>
+                <span data-flip="horizontal">${i18n.get('Horizontal')}</span>
+                <span data-flip="vertical">${i18n.get('Vertical')}</span>
+            `,
+            click: (contextmenu, event) => {
+                const { flip } = event.target.dataset;
+                if (flip) {
+                    art.flip = flip;
+                    contextmenu.show = false;
+                }
+            },
+            mounted: ($menu) => {
+                art.on('flip', (flip) => {
+                    const $current = queryAll('span', $menu).find((item) => item.dataset.flip === flip);
+                    if ($current) {
+                        inverseClass($current, 'art-current');
+                    }
+                });
+            },
+        };
+    };
+}

packages/artplayer/src/contextmenu/index.js

@@ -2,6 +2,7 @@ import { setStyles, includeFromEvent, isMobile } from '../utils';
 import Component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
+import flip from './flip';
 import info from './info';
 import version from './version';
 import close from './close';
@@ -44,11 +45,19 @@ export default class Contextmenu extends Component {
             }),
         );
 
+        this.add(
+            flip({
+                disable: !option.flip,
+                name: 'flip',
+                index: 30,
+            }),
+        );
+
         this.add(
             info({
                 disable: false,
                 name: 'info',
-                index: 30,
+                index: 40,
             }),
         );
 
@@ -56,7 +65,7 @@ export default class Contextmenu extends Component {
             version({
                 disable: false,
                 name: 'version',
-                index: 40,
+                index: 50,
             }),
         );