Playback rate (#411)

* update

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,14 +1,17 @@
-import { inverseClass, queryAll } from '../utils';
+import { inverseClass, query, queryAll } from '../utils';
 
 export default function aspectRatio(option) {
     return (art) => {
-        const { i18n } = art;
+        const {
+            i18n,
+            constructor: { ASPECT_RATIO },
+        } = art;
         return {
             ...option,
             html: `${i18n.get('Aspect Ratio')}:
-                <span data-value="default" class="art-current">${i18n.get('Default')}</span>
-                <span data-value="4:3">4:3</span>
-                <span data-value="16:9">16:9</span>
+                ${ASPECT_RATIO.map(
+                    (item) => `<span data-value="${item}">${item === 'default' ? i18n.get('Default') : item}</span>`,
+                ).join('')}
             `,
             click: (contextmenu, event) => {
                 const { value } = event.target.dataset;
@@ -18,6 +21,8 @@ export default function aspectRatio(option) {
                 }
             },
             mounted: ($panel) => {
+                const $default = query('[data-value="default"]', $panel);
+                if ($default) inverseClass($default, 'art-current');
                 art.on('aspectRatio', (value) => {
                     const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
                     if ($current) {