hunk.code_window: package com.appsmith.external.models;
   import com.appsmith.external.dtos.DslExecutableDTO;
   import com.appsmith.external.dtos.LayoutExecutableUpdateDTO;
   import java.time.Instant;
   import java.util.List;
   import java.util.Set;
  
hunk.labels: keep keep keep add keep keep keep keep
hunk.after_edit: import com.fasterxml.jackson.annotation.JsonIgnore;
  
hunk.file_path: app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/Executable.java
hunk.type: add
file: import React from "react";
  import {
    Popover,
    PopoverInteractionKind,
    PopoverPosition,
  } from "@blueprintjs/core";
  import { Colors } from "constants/Colors";
  import type { VideoComponentProps } from "./";
  import VideoComponent from "./";
  import styled from "styled-components";
  import { ControlIcons } from "icons/ControlIcons";
  
  const PlayIcon = styled(ControlIcons.PLAY_VIDEO)`
    position: relative;
    cursor: pointer;
    &:hover {
      svg {
        path {
          fill: ${Colors.POMEGRANATE};
        }
      }
    }
  `;
  
  const PlayerWrapper = styled.div`
    width: 600px;
    height: 400px;
  `;
  
  function PopoverVideo(props: VideoComponentProps) {
    return (
      <div onClick={(e) => e.stopPropagation()}>
        <Popover
          enforceFocus={false}
          interactionKind={PopoverInteractionKind.CLICK}
          lazy
          minimal
          modifiers={{
            flip: {
              behavior: ["right", "left", "bottom", "top"],
            },
            keepTogether: {
              enabled: false,
            },
            arrow: {
              enabled: false,
            },
            preventOverflow: {
              enabled: true,
              boundariesElement: "viewport",
            },
          }}
          position={PopoverPosition.AUTO}
          usePortal
        >
          <PlayIcon className="play-icon" />
          <PlayerWrapper>
            <VideoComponent
              backgroundColor={props.backgroundColor}
              borderRadius={props.borderRadius}
              boxShadow={props.boxShadow}
              url={props.url}
            />
          </PlayerWrapper>
        </Popover>
      </div>
    );
  }
  
  export default PopoverVideo;
  