forEach => for

packages/artplayer/src/contextmenu/index.js

@@ -61,7 +61,9 @@ export default class Contextmenu extends Component {
                 }),
             );
 
-            option.contextmenu.forEach((item) => this.add(item));
+            for (let index = 0; index < option.contextmenu.length; index++) {
+                this.add(option.contextmenu[index]);
+            }
 
             proxy($player, 'contextmenu', (event) => {
                 event.preventDefault();

packages/artplayer/src/control/index.js

@@ -160,7 +160,9 @@ export default class Control extends Component {
                 }),
             );
 
-            option.controls.forEach((item) => this.add(item));
+            for (let index = 0; index < option.controls.length; index++) {
+                this.add(option.controls[index]);
+            }
         });
     }
 

packages/artplayer/src/control/progress.js

@@ -93,13 +93,14 @@ export default function progress(options) {
                     }
                 }
 
-                option.highlight.forEach((item) => {
+                for (let index = 0; index < option.highlight.length; index++) {
+                    const item = option.highlight[index];
                     const left = (clamp(item.time, 0, art.duration) / art.duration) * 100;
                     append(
                         $highlight,
                         `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left}%"></span>`,
                     );
-                });
+                }
 
                 setBar('loaded', art.loaded);
 

packages/artplayer/src/control/time.js

@@ -1,9 +1,9 @@
 import { secondToTime } from '../utils';
 
 export default function time(option) {
-    return art => ({
+    return (art) => ({
         ...option,
-        mounted: $control => {
+        mounted: ($control) => {
             function getTime() {
                 const newTime = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
                 if (newTime !== $control.innerText) {
@@ -12,9 +12,11 @@ export default function time(option) {
             }
 
             getTime();
-            ['video:loadedmetadata', 'video:timeupdate', 'video:progress'].forEach(event => {
-                art.on(event, getTime);
-            });
+
+            const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];
+            for (let index = 0; index < events.length; index++) {
+                art.on(events[index], getTime);
+            }
         },
     });
 }

packages/artplayer/src/events/index.js

@@ -68,6 +68,8 @@ export default class Events {
     }
 
     destroy() {
-        this.destroyEvents.forEach((event) => event());
+        for (let index = 0; index < this.destroyEvents.length; index++) {
+            this.destroyEvents[index]();
+        }
     }
 }

packages/artplayer/src/hotkey.js

@@ -43,7 +43,9 @@ export default class Hotkey {
                             const events = this.keys[event.keyCode];
                             if (events) {
                                 event.preventDefault();
-                                events.forEach((fn) => fn.call(art, event));
+                                for (let index = 0; index < events.length; index++) {
+                                    events[index].call(art, event);
+                                }
                                 art.emit('hotkey', event);
                             }
                         }

packages/artplayer/src/info.js

@@ -5,15 +5,15 @@ export default class Info extends Component {
     constructor(art) {
         super(art);
         this.name = 'info';
-        if (this.art.template.$info) {
+        art.once('ready', () => {
             this.init();
-        }
+        });
     }
 
     init() {
         const {
-            template: { $infoPanel, $infoClose, $video },
             events: { proxy },
+            template: { $infoPanel, $infoClose, $video },
         } = this.art;
 
         proxy($infoClose, 'click', () => {
@@ -21,27 +21,24 @@ export default class Info extends Component {
         });
 
         let timer = null;
-        const types = queryAll('[data-video]', $infoPanel);
+        const types = queryAll('[data-video]', $infoPanel) || [];
 
         this.art.on('destroy', () => {
             clearTimeout(timer);
         });
 
         function loop() {
-            types.forEach((item) => {
+            for (let index = 0; index < types.length; index++) {
+                const item = types[index];
                 const value = $video[item.dataset.video];
                 item.innerText = typeof value === 'number' ? value.toFixed(2) : value;
-            });
+            }
+
             timer = setTimeout(() => {
                 loop();
             }, 1000);
         }
 
-        this.art.on('info', (value) => {
-            clearTimeout(timer);
-            if (value) {
-                loop();
-            }
-        });
+        loop();
     }
 }

packages/artplayer/src/layer.js

@@ -3,10 +3,19 @@ import Component from './utils/component';
 export default class Layer extends Component {
     constructor(art) {
         super(art);
+
+        const {
+            option,
+            template: { $layer },
+        } = art;
+
         this.name = 'layer';
-        this.$parent = art.template.$layer;
+        this.$parent = $layer;
+
         art.once('ready', () => {
-            art.option.layers.forEach((item) => this.add(item));
+            for (let index = 0; index < option.layers.length; index++) {
+                this.add(option.layers[index]);
+            }
         });
     }
 }

packages/artplayer/src/mobile.js

@@ -9,11 +9,11 @@ export default class Mobile {
             template: { $video },
         } = art;
 
-        config.events.forEach((eventName) => {
-            proxy($video, eventName, (event) => {
+        for (let index = 0; index < config.events.length; index++) {
+            proxy($video, config.events[index], (event) => {
                 art.emit(`video:${event.type}`, event);
             });
-        });
+        }
 
         Object.keys(option.moreVideoAttr).forEach((key) => {
             $video[key] = option.moreVideoAttr[key];

packages/artplayer/src/player/eventInit.js

@@ -21,11 +21,11 @@ export default function eventInit(art) {
         art.fullscreen = !art.fullscreen;
     });
 
-    config.events.forEach((eventName) => {
-        proxy($video, eventName, (event) => {
+    for (let index = 0; index < config.events.length; index++) {
+        proxy($video, config.events[index], (event) => {
             art.emit(`video:${event.type}`, event);
         });
-    });
+    }
 
     // art.on('video:abort', () => {
 

packages/artplayer/src/player/exclusiveMix.js

@@ -4,7 +4,8 @@ export default function exclusiveMix(art) {
     const sizeProps = ['mini', 'pip', 'fullscreen', 'fullscreenWeb'];
 
     function exclusive(props) {
-        props.forEach((name) => {
+        for (let index = 0; index < props.length; index++) {
+            const name = props[index];
             art.on(name, () => {
                 if (art[name]) {
                     props
@@ -16,7 +17,7 @@ export default function exclusiveMix(art) {
                         });
                 }
             });
-        });
+        }
     }
 
     exclusive(sizeProps);

packages/artplayer/src/player/playMix.js

@@ -21,7 +21,12 @@ export default function playMix(art) {
             }
 
             if (option.mutex) {
-                instances.filter((item) => item !== art).forEach((item) => item.pause());
+                for (let index = 0; index < instances.length; index++) {
+                    const instance = instances[index];
+                    if (instance !== art) {
+                        instance.pause();
+                    }
+                }
             }
 
             notice.show = i18n.get('Play');

packages/artplayer/src/player/rectMix.js

@@ -7,13 +7,15 @@ export default function rectMix(art) {
         },
     });
 
-    ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach((key) => {
+    const keys = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+    for (let index = 0; index < keys.length; index++) {
+        const key = keys[index];
         def(art, key, {
             get: () => {
                 return art.rect[key];
             },
         });
-    });
+    }
 
     def(art, 'x', {
         get: () => {

packages/artplayer/src/plugins/index.js

@@ -27,7 +27,9 @@ export default class Plugins {
             this.add(localSubtitle);
         }
 
-        art.option.plugins.forEach((plugin) => this.add(plugin));
+        for (let index = 0; index < option.plugins.length; index++) {
+            this.add(option.plugins[index]);
+        }
     }
 
     add(plugin) {

packages/artplayer/src/plugins/subtitleOffset.js

@@ -60,7 +60,9 @@ export default function subtitleOffset(art) {
             if (template.$track && template.$track.track) {
                 const cues = Array.from(template.$track.track.cues);
                 const time = clamp(value, -5, 5);
-                cues.forEach((cue, index) => {
+
+                for (let index = 0; index < cues.length; index++) {
+                    const cue = cues[index];
                     if (!cuesCache[index]) {
                         cuesCache[index] = {
                             startTime: cue.startTime,
@@ -69,7 +71,8 @@ export default function subtitleOffset(art) {
                     }
                     cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
                     cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
-                });
+                }
+
                 notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`;
                 art.emit('subtitleOffset', value);
             } else {

packages/artplayer/src/setting/index.js

@@ -54,7 +54,9 @@ export default class Setting extends Component {
                     }),
                 );
 
-                option.settings.forEach((item) => this.add(item));
+                for (let index = 0; index < option.settings.length; index++) {
+                    this.add(option.settings[index]);
+                }
             });
 
             art.on('blur', () => {