feat: add markers (#2386)

Co-authored-by: fengshuo <fengshuo@bilibili.com>

src/js/controls.js

@@ -796,6 +796,10 @@ const controls = {
       controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);
     }
 
+    if (this.config.markers.enabled) {
+      controls.setMarkers.call(this);
+    }
+
     // Update the tooltip (if visible)
     controls.updateSeekTooltip.call(this);
   },
@@ -1745,6 +1749,66 @@ const controls = {
       });
     }
   },
+  setMarkers() {
+    if (this.duration > 0 && !this.elements.markers) {
+      const { points } = this.config.markers;
+      const markersContainerFragment = document.createDocumentFragment();
+      const markersPointsFragment = document.createDocumentFragment();
+      const markerTipElement = createElement(
+        'span',
+        {
+          class: this.config.classNames.markers.tip,
+        },
+        '',
+      );
+
+      points.forEach((point) => {
+        if (point < 0 || point > this.duration) {
+          return;
+        }
+
+        const markerPointElement = createElement(
+          'span',
+          {
+            class: this.config.classNames.markers.points,
+          },
+          '',
+        );
+
+        const left = `${(point.time / this.duration) * 100}%`;
+        const tipVisible = `${this.config.classNames.markers.tip}--visible`;
+        const toggle = (show) => toggleClass(markerTipElement, tipVisible, show);
+
+        markerPointElement.addEventListener('mouseenter', () => {
+          markerTipElement.style.left = left;
+          if (point.tipHTML) {
+            markerTipElement.innerHTML = point.tipHTML;
+          } else {
+            markerTipElement.innerText = point.tip;
+          }
+          toggle(true);
+        });
+        markerPointElement.addEventListener('mouseleave', () => {
+          toggle(false);
+        });
+        markerPointElement.addEventListener('click', () => {
+          this.currentTime = point.time;
+        });
+
+        markerPointElement.style.left = left;
+        markersPointsFragment.appendChild(markerPointElement);
+      });
+
+      markersContainerFragment.appendChild(markersPointsFragment);
+      markersContainerFragment.appendChild(markerTipElement);
+
+      this.elements.markers = {
+        points: markersPointsFragment,
+        tip: markerTipElement,
+      };
+      this.elements.progress.appendChild(markersContainerFragment);
+    }
+  },
 };
 
 export default controls;