refactor(bem): replace Block/Elem with cn() in Video/HtxVideo.jsx

Migrated Video tag component from Block/Elem to cn() helper.
- Replaced Block/Elem imports with cn import
- Replaced <Block name="video-segmentation"> with <div className={cn("video-segmentation")...}>
- Replaced nested <Block name="video"> with <div className={cn("video")...}>
- Replaced <Elem name="main"> with <div className={cn("video").elem("main")...}>
  (Note: uses "video" as block, not "video-segmentation")
- Replaced <Elem name="timeline" tag={Timeline}> with <Timeline className={cn("video-segmentation").elem("timeline")...}>
  (Note: uses "video-segmentation" as block - outside nested "video" Block scope)
- Preserved refs for mainContentRef, videoBlockRef, videoContainerRef
- Added type assertions for all refs
- Nested Blocks create correct scope boundaries
- No behavior change, equivalent class strings

HtxVideo

Author: luarmr

web/libs/editor/src/tags/object/Video/HtxVideo.jsx

@@ -19,7 +19,7 @@ import {
 import { defaultStyle } from "../../../core/Constants";
 import { useFullscreen } from "../../../hooks/useFullscreen";
 import { useToggle } from "../../../hooks/useToggle";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import ResizeObserver from "../../../utils/resize-observer";
 import { clamp, isDefined } from "../../../utils/utilities";
 import "./Video.scss";
@@ -497,14 +497,14 @@ const HtxVideoView = ({ item, store }) => {
 
   return (
     <ObjectTag item={item}>
-      <Block name="video-segmentation" ref={mainContentRef} mod={{ fullscreen: isFullScreen }}>
+      <div className={cn("video-segmentation").mod({ fullscreen: isFullScreen }).toClassName()} ref={mainContentRef}>
         {item.errors?.map((error, i) => (
           <ErrorMessage key={`err-${i}`} error={error} />
         ))}
 
-        <Block name="video" mod={{ fullscreen: isFullScreen }} ref={videoBlockRef}>
-          <Elem
-            name="main"
+        <div className={cn("video").mod({ fullscreen: isFullScreen }).toClassName()} ref={videoBlockRef}>
+          <div
+            className={cn("video").elem("main").toClassName()}
             ref={videoContainerRef}
             style={{ height: Number(item.height) }}
             onMouseDown={handlePan}
@@ -553,13 +553,12 @@ const HtxVideoView = ({ item, store }) => {
                 />
               </>
             )}
-          </Elem>
-        </Block>
+          </div>
+        </div>
 
         {loaded && (
-          <Elem
-            name="timeline"
-            tag={Timeline}
+          <Timeline
+            className={cn("video-segmentation").elem("timeline").toClassName()}
             playing={isSyncedBuffering && item.isBuffering ? item.wasPlayingBeforeBuffering : playing}
             buffering={isSyncedBuffering ? item.isBuffering : false}
             length={videoLength}
@@ -612,7 +611,7 @@ const HtxVideoView = ({ item, store }) => {
             onAction={handleAction}
           />
         )}
-      </Block>
+      </div>
     </ObjectTag>
   );
 };