Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-front!1291

@@ -72,14 +72,16 @@
     "sortablejs": "^1.14.0",
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
-    "video.js": "^7.20.3",
-    "videojs-flvjs-es6": "^1.0.1",
     "vue": "3.3.4",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",
     "vue-types": "^4.0.3",
     "vue3-grid-layout": "^1.0.0",
+    "xgplayer": "^3.0.14",
+    "xgplayer-flv": "^3.0.14",
+    "xgplayer-hls": "^3.0.14",
+    "xgplayer-mp4": "^3.0.14",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {
@@ -101,7 +103,6 @@
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.10.7",
-    "@types/video.js": "^7.3.49",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "@vitejs/plugin-legacy": "^1.5.1",

@@ -109,7 +109,7 @@ export const deleteStreamingMediaRecord = (params: StreamingMediaDeleteParam) =>
  * @returns
  */
 export const getStreamingPlayUrl = (entityId: string) => {
-  return defHttp.get(
+  return defHttp.get<{ data: { url: string } }>(
     {
       url: `${CameraManagerApi.STREAMING_PLAY_GET_URL}/${entityId}`,
     },

@@ -35,6 +35,7 @@ export interface CameraModel {
     deviceId: string;
     deviceName: string;
   };
+  playProtocol?: number;
 }
 
 export interface StreamingManageRecord {
@@ -106,4 +107,14 @@ export interface CameraRecord {
     channelNo: string;
     deviceId: string;
   };
+  videoPlatformDTO?: VideoPlatformDTO;
+}
+
+interface VideoPlatformDTO {
+  enabled: boolean;
+  type: number;
+  host: string;
+  appKey: string;
+  appSecret: string;
+  ssl: number;
 }

-import { RuleChainPaginationItemType } from './model/type';
+import { ClearEventsParam, RuleChainPaginationItemType } from './model/type';
 import { TBPaginationResult } from '/#/axios';
 import { defHttp } from '/@/utils/http/axios';
 import { RuleChainDetail, RuleChainType } from '/@/views/rule/designer/types/ruleNode';
@@ -75,3 +75,26 @@ export const getRuleNodeEventList = (
     { joinPrefix: false }
   );
 };
+
+export const doClearEvents = ({
+  tenantId,
+  startTime,
+  endTime,
+  eventType,
+  ruleId,
+}: ClearEventsParam) => {
+  return defHttp.post(
+    {
+      url: `${Api.GET_RULE_NODE_EVENTS}/${ruleId}/clear`,
+      params: {
+        startTime,
+        endTime,
+        tenantId,
+      },
+      data: {
+        eventType,
+      },
+    },
+    { joinPrefix: false }
+  );
+};

+import { EventTypeEnum } from '/@/views/rule/designer/src/components/UpdateNodeDrawer/EventSelect/config';
+
 export interface RuleChainPaginationItemType {
   id: Id;
   createdTime: number;
@@ -19,3 +21,11 @@ export interface Id {
 export interface AdditionalInfo {
   description: string;
 }
+
+export interface ClearEventsParam {
+  ruleId: string;
+  tenantId: string;
+  startTime: string;
+  endTime: string;
+  eventType: EventTypeEnum;
+}

 <template>
-  <a-tree-select v-bind="getAttrs" @change="handleChange">
+  <a-tree-select
+    v-bind="getAttrs"
+    @change="handleChange"
+    :showSearch="true"
+    :filterTreeNode="filterTreeNode"
+  >
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
@@ -60,6 +65,18 @@
         props.immediate && fetch();
       });
 
+      function filterTreeNode(value, options) {
+        const { props } = options || {};
+
+        if (!value) {
+          return true;
+        }
+        let { name } = props || {};
+        value = value.toLowerCase();
+        name = name.toLowerCase();
+        return name.includes(value);
+      }
+
       async function fetch() {
         const { api } = props;
         if (!api || !isFunction(api)) return;
@@ -80,7 +97,7 @@
         isFirstLoaded.value = true;
         emit('options-change', treeData.value);
       }
-      return { getAttrs, loading, handleChange };
+      return { getAttrs, loading, handleChange, filterTreeNode };
     },
   });
 </script>

-import { withInstall } from '/@/utils/index';
-import VideoPlay from './src/VideoPlay.vue';
+export { default as XGPlayer } from './src/XGPlayer.vue';
 
 export { getVideoTypeByUrl } from './src/utils';
-
-export const BasicVideoPlay = withInstall(VideoPlay);

-<script lang="ts" setup>
-  import { isNumber } from 'lodash';
-  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
-  import 'video.js/dist/video-js.css';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, toRaw, unref } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { isShareMode } from '/@/views/sys/share/hook';
-  import 'videojs-flvjs-es6';
-  const { prefixCls } = useDesign('basic-video-play');
-
-  const props = withDefaults(
-    defineProps<{
-      options?: VideoJsPlayerOptions;
-      withToken?: boolean;
-      immediateInitOnMounted?: boolean;
-    }>(),
-    {
-      immediateInitOnMounted: true,
-    }
-  );
-
-  const emit = defineEmits<{
-    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
-    (event: 'onUnmounted'): void;
-  }>();
-
-  const videoPlayEl = ref<HTMLVideoElement>();
-
-  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
-
-  const getOptions = computed(() => {
-    const { options, withToken } = props;
-
-    const defaultOptions: VideoJsPlayerOptions & Recordable = {
-      language: 'zh',
-      muted: true,
-      liveui: true,
-      controls: true,
-      techOrder: ['html5', 'flvjs'],
-      flvjs: {
-        mediaDataSource: {
-          isLive: true,
-          cors: true,
-          hasAudio: false,
-          withCredentials: false,
-        },
-        config: {
-          headers: {
-            ...(withToken
-              ? {
-                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-                }
-              : {}),
-          },
-          autoCleanupSourceBuffer: true,
-        },
-      },
-    };
-    return videoJs.mergeOptions(defaultOptions, options);
-  });
-
-  const getWidthHeight = computed(() => {
-    let { width = 300, height = 150 } = unref(getOptions);
-    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
-    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
-    return { width, height } as CSSProperties;
-  });
-
-  const init = () => {
-    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
-      emit('ready', unref(videoPlayInstance));
-    });
-    //fix 修复videojs解决直播延时的问题
-    videoPlayInstance.value?.on('timeupdate', function () {
-      // 计算表最新推流的时间和现在播放器播放推流的时间
-      let differTime =
-        (videoPlayInstance.value as any as VideoJsPlayer)?.buffered()?.end(0) -
-        (videoPlayInstance.value as any as VideoJsPlayer)?.currentTime();
-      // 差值小于1.5s时根据1倍速进行播放
-      if (differTime < 1.5) {
-        videoPlayInstance.value?.playbackRate(1);
-      }
-      // 差值大于1.5s小于10s根据1.2倍速进行播放
-      if (differTime < 10 && differTime > 1.5) {
-        videoPlayInstance.value?.playbackRate(1.2);
-      }
-      // 差值大于10s时进行重新加载直播流
-      if (differTime > 10) {
-        init();
-      }
-    });
-    //
-  };
-
-  const customInit = (getOptionsFn: (optios: VideoJsPlayerOptions) => VideoJsPlayerOptions) => {
-    return (videoPlayInstance.value = videoJs(
-      unref(videoPlayEl)!,
-      getOptionsFn(toRaw(unref(getOptions))),
-      () => {
-        emit('ready', unref(videoPlayInstance));
-      }
-    ));
-  };
-
-  onMounted(() => {
-    props.immediateInitOnMounted && init();
-  });
-
-  onUnmounted(() => {
-    unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = null;
-    emit('onUnmounted');
-  });
-
-  defineExpose({
-    customInit,
-    reloadPlayer: init,
-    getInstance: () => unref(videoPlayInstance),
-  });
-</script>
-
-<template>
-  <div :class="prefixCls" class="!w-full h-full" :style="getWidthHeight" style="min-height: 100%">
-    <video
-      ref="videoPlayEl"
-      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-full !h-full"
-      muted
-    >
-    </video>
-  </div>
-</template>
-
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-video-play';
-
-  .@{prefix-cls} {
-    .vjs-error-display {
-      .vjs-modal-dialog-content::after {
-        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
-      }
-    }
-  }
-</style>

+<script setup lang="ts">
+  import Player, { Events, IError } from 'xgplayer';
+  import { FlvPlugin } from 'xgplayer-flv';
+  import Mp4Plugin from 'xgplayer-mp4';
+  import { HlsPlugin } from 'xgplayer-hls';
+  import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue';
+  import PresetPlayer from 'xgplayer';
+  import { IPlayerOptions } from 'xgplayer/es/player';
+  import 'xgplayer/dist/index.min.css';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  import { XGPlayerProps } from '/@/components/Video/src/types';
+  import { StreamType } from './types';
+
+  const props = withDefaults(defineProps<XGPlayerProps>(), {
+    streamType: 'auto',
+    autoPlay: true,
+    config: () => ({}),
+  });
+
+  const emits = defineEmits<{
+    (eventName: 'ready', player: PresetPlayer): void;
+    (eventName: 'play', player: PresetPlayer): void;
+    (eventName: 'pause', player: PresetPlayer): void;
+    (eventName: 'ended', player: PresetPlayer): void;
+    (eventName: 'onUnmounted', player: PresetPlayer): void;
+  }>();
+
+  function getStreamTypeByUrl(url = ''): StreamType | undefined {
+    url = url || '';
+    if (url.endsWith('.m3u8')) return 'hls';
+    else if (url.endsWith('.mp4')) return 'mp4';
+    else if (url.endsWith('.flv')) {
+      return 'flv';
+    } else return;
+  }
+
+  const getPluginByStreamType = (): IPlayerOptions => {
+    let { url, withToken } = props;
+    let { streamType } = props;
+    streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
+
+    const liveConfig = {
+      targetLatency: 10,
+      maxLatency: 20,
+      disconnectTime: 0,
+      fetchOptions: withToken
+        ? {
+            headers: {
+              'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+            },
+          }
+        : {},
+    };
+    const config: IPlayerOptions = {
+      flv: liveConfig,
+      hls: liveConfig,
+    };
+    switch (streamType) {
+      case 'hls':
+        config.plugins = [HlsPlugin];
+        break;
+      case 'mp4':
+        config.plugins = [Mp4Plugin];
+        break;
+      case 'flv':
+        config.plugins = [FlvPlugin];
+        break;
+    }
+    return config;
+  };
+
+  const videoElRef = shallowRef<Nullable<HTMLDivElement>>();
+
+  const playerRef = shallowRef<Nullable<PresetPlayer>>();
+
+  const propsRef = ref<XGPlayerProps>({});
+
+  const getPlayerConfig = computed<IPlayerOptions>(() => {
+    const { url, autoPlay, config } = props;
+
+    const basicConfig: IPlayerOptions = {
+      ...config,
+      ...propsRef,
+      url,
+      lang: 'zh',
+      isLive: true,
+      autoplay: autoPlay,
+      autoplayMuted: autoPlay,
+      ...getPluginByStreamType(),
+    };
+    return basicConfig;
+  });
+
+  function onDecodeError() {
+    console.warn('player happend decode error');
+    // playerRef.value?.destroy?.();
+    // initializePlayer();
+    playerRef.value?.switchURL(props.url!);
+  }
+
+  function initializePlayer() {
+    if (unref(playerRef)) {
+      playerRef.value?.destroy?.();
+      playerRef.value = null;
+    }
+
+    const config = toRaw(unref(getPlayerConfig));
+
+    if (!unref(videoElRef)) return;
+
+    const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })));
+
+    player.on(Events.READY, () => {
+      emits('ready', player);
+    });
+
+    player.setEventsMiddleware({
+      error: (event, callback) => {
+        const code = (
+          event as unknown as {
+            error: MediaError;
+          }
+        ).error.code;
+        if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+          if (!props.url) {
+            return;
+          }
+          callback();
+          return;
+        }
+
+        if (code === MediaError.MEDIA_ERR_DECODE) {
+          // 视频流可以播放 中途解码失败重载
+          if (playerRef.value?.isPlaying) {
+            onDecodeError();
+          }
+          return;
+        }
+
+        callback();
+      },
+    });
+
+    player.on(Events.PAUSE, () => {
+      emits('pause', player);
+    });
+
+    player.on(Events.ENDED, () => {
+      emits('ended', player);
+    });
+
+    player.on(Events.PLAY, () => {
+      emits('play', player);
+    });
+  }
+
+  onMounted(() => {
+    initializePlayer();
+  });
+
+  onUnmounted(() => {
+    emits('onUnmounted', unref(playerRef)!);
+    playerRef.value?.destroy?.();
+  });
+
+  watch(
+    () => props.url,
+    () => {
+      initializePlayer();
+    }
+  );
+
+  defineExpose({
+    getPlayerInstance: () => unref(playerRef),
+  });
+</script>
+
+<template>
+  <div ref="videoElRef"></div>
+</template>

+import { IPlayerOptions } from 'xgplayer/es/player';
+
+export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto';
+export interface XGPlayerProps {
+  streamType?: StreamType;
+  autoPlay?: boolean;
+  url?: string;
+  withToken?: boolean;
+  config?: Omit<IPlayerOptions, 'url'>;
+}

+export const createOrganizationSearch = () => {
+  return {
+    showSearch: true,
+    filterTreeNode: (value, options) => {
+      const { props } = options || {};
+
+      if (!value) {
+        return true;
+      }
+      let { name } = props || {};
+      value = value?.toLowerCase();
+      name = name?.toLowerCase();
+      return name.includes(value);
+    },
+  };
+};

-<template>
-  <div>
-    <BasicModal
-      v-bind="$attrs"
-      width="55rem"
-      destroyOnClose
-      :height="heightNum"
-      @register="register"
-      title="视频预览"
-      :showOkBtn="false"
-      @cancel="handleCancel"
-    >
-      <div
-        class="flex items-center justify-center bg-dark-900 w-full h-full min-h-96 video-container"
-      >
-        <BasicVideoPlay
-          v-if="showVideo"
-          :options="(options as any)"
-          :withToken="withToken"
-          @on-unmounted="handleCloseFlvPlayUrl"
-        />
-      </div>
-    </BasicModal>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, reactive, unref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
-  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { AccessMode } from './config.data';
-  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-  import { isRtspProtocol } from '/@/components/Video/src/utils';
-  import { VideoJsPlayerOptions } from 'video.js';
-  import { useFingerprint } from '/@/utils/useFingerprint';
-  import { GetResult } from '@fingerprintjs/fingerprintjs';
-
-  const heightNum = ref(800);
-  const showVideo = ref(false);
-
-  const playUrl = ref('');
-
-  const withToken = ref(false);
-
-  const videoId = ref<string>();
-
-  const fingerprintResult = ref<Nullable<GetResult>>(null);
-
-  const options = reactive<VideoJsPlayerOptions>({
-    width: '100%' as unknown as number,
-    height: 384 as unknown as number,
-    autoplay: true,
-  });
-
-  const setSources = (url: string, fingerprintResult: GetResult) => {
-    const flag = isRtspProtocol(url);
-    options.sources = [
-      {
-        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
-        type: getVideoTypeByUrl(url),
-      },
-    ];
-  };
-
-  const { getResult } = useFingerprint();
-  const [register] = useModalInner(
-    async (data: { record: CameraModel | StreamingManageRecord }) => {
-      const { record } = data;
-      videoId.value = record.id || '';
-      const result = await getResult();
-      fingerprintResult.value = result;
-      if (record.accessMode === AccessMode.ManuallyEnter) {
-        if ((record as CameraModel).videoUrl) {
-          if (isRtspProtocol((record as CameraModel).videoUrl)) {
-            playUrl.value = (record as CameraModel).videoUrl;
-            closeFlvPlay(unref(playUrl), result.visitorId);
-            withToken.value = true;
-          }
-          setSources((record as CameraModel).videoUrl, result);
-        }
-      } else {
-        try {
-          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-          setSources(url, result);
-        } catch (error) {}
-      }
-      showVideo.value = true;
-    }
-  );
-
-  const handleCloseFlvPlayUrl = () => {
-    if (isRtspProtocol(unref(playUrl))) {
-      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
-    }
-  };
-
-  const handleCancel = () => {
-    showVideo.value = false;
-    withToken.value = false;
-  };
-</script>
-
-<style lang="less" scoped>
-  .video-container:deep(.vben-basic-video-play) {
-    min-height: 13rem;
-  }
-
-  .video-container:deep(.video-js) {
-    min-height: 13rem;
-  }
-</style>

@@ -80,8 +80,7 @@
       </BasicTable>
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
-    <VideoPreviewModal @register="registerModal" />
-    <VideoModal @register="registerModal1" />
+    <VideoModal @register="registerModal" />
     <GBTDrawer @register="registerGBTDrawer" @success="handleGBTSuccess" />
   </div>
 </template>
@@ -103,14 +102,16 @@
     CameraPermission,
     VideoPlatformEnum,
     accessModeConfig,
+    getPlayUrl,
   } from './config.data';
-  import VideoPreviewModal from './DialogPreviewVideo.vue';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { Tag } from 'ant-design-vue';
   import VideoModal from '/@/views/device/list/cpns/tabs/VideoChannel/videoModal.vue';
+  import { VideoCancelModalParamsType } from '/@/views/device/list/cpns/tabs/VideoChannel/config';
+  import { CameraRecord } from '/@/api/camera/model/cameraModel';
 
   export default defineComponent({
     components: {
@@ -119,7 +120,6 @@
       BasicTable,
       TableAction,
       CameraDrawer,
-      VideoPreviewModal,
       VideoModal,
       TableImg,
       Authority,
@@ -131,9 +131,8 @@
     setup(_, { emit }) {
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      const [registerModal, { openModal }] = useModal(); //手动输入
 
-      const [registerModal1, { openModal: openModal1 }] = useModal(); //流媒体获取
+      const [registerModal, { openModal }] = useModal(); //流媒体获取
       // 表格hooks
       const [registerTable, { reload, setProps, clearSelectedRowKeys }] = useTable({
         title: '视频列表',
@@ -197,28 +196,25 @@
         searchInfo.organizationId = organizationId;
         handleSuccess();
       };
-      const handleViewVideo = (record) => {
-        const { videoPlatformDTO } = record;
+      const handleViewVideo = (record: CameraRecord) => {
+        const { videoPlatformDTO, params } = record;
         const { type } = videoPlatformDTO || {};
-        const commonRecord = {
-          isUpdate: true,
-          record,
-        };
-        // 新增一个判断，GBT28181也弹出云台控制界面
-        // if (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.ISC) {
-        //   openModal1(true, commonRecord);
-        // } else if (record.accessMode === AccessMode.GBT28181) {
-        //   openModal1(true, { ...commonRecord, ifShowGBT: true });
-        // } else openModal(true, commonRecord);
 
-        if (
-          record.accessMode === AccessMode.ManuallyEnter ||
-          (record.accessMode === AccessMode.Streaming && type === VideoPlatformEnum.FLUORITE)
-        ) {
-          openModal(true, commonRecord);
-        } else if (record.accessMode === AccessMode.GBT28181) {
-          openModal1(true, { ...commonRecord, ifShowGBT: true });
-        } else openModal1(true, commonRecord);
+        openModal(true, {
+          record: {
+            id: record.id,
+            canControl:
+              [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode) &&
+              type !== VideoPlatformEnum.FLUORITE,
+            isGBT: record.accessMode === AccessMode.GBT28181,
+            channelId: params?.channelNo,
+            tbDeviceId: params?.deviceId,
+            getPlayUrl: async () => {
+              const result = await getPlayUrl(record);
+              return result;
+            },
+          } as VideoCancelModalParamsType,
+        });
       };
 
       const handleSwitchMode = () => {
@@ -252,7 +248,6 @@
         organizationIdTreeRef,
         handleViewVideo,
         registerModal,
-        registerModal1,
         AccessMode,
         handleSwitchMode,
         CameraPermission,

@@ -3,24 +3,21 @@
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
   import { onMounted, reactive, Ref, ref, unref, watch } from 'vue';
   import { Spin, Button, Pagination, Space, List } from 'ant-design-vue';
-  import { cameraPage, closeFlvPlay, getFlvPlayUrl } from '/@/api/camera/cameraManager';
+  import { cameraPage, closeFlvPlay } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import GBTDrawer from './components/GBTDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { AccessMode, CameraPermission, PageMode } from './config.data';
+  import { CameraPermission, getPlayUrl, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
   import { buildUUID } from '/@/utils/uuid';
-  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { VideoJsPlayerOptions } from 'video.js';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import { Authority } from '/@/components/Authority';
   import { isRtspProtocol } from '/@/components/Video/src/utils';
   import { useFingerprint } from '/@/utils/useFingerprint';
   import { GetResult } from '@fingerprintjs/fingerprintjs';
-  import { getVideoControlStart } from '/@/api/device/videoChannel';
+  import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
 
   const props = defineProps({
     mode: {
@@ -29,17 +26,12 @@
     },
   });
   type CameraRecordItem = CameraRecord & {
+    placeholder?: boolean;
     canPlay?: boolean;
     isTransform?: boolean;
     withToken?: boolean;
-    videoPlayerOptions?: VideoJsPlayerOptions;
     playSourceUrl?: string;
-  };
-
-  const basicVideoPlayOptions: VideoJsPlayerOptions = {
-    width: '100%' as unknown as number,
-    height: '100%' as unknown as number,
-    autoplay: true,
+    streamType?: string;
   };
 
   const emit = defineEmits(['switchMode']);
@@ -88,10 +80,7 @@
 
       for (const item of unref(cameraList)) {
         (item as CameraRecordItem).isTransform = false;
-        (item as CameraRecordItem).videoPlayerOptions = {
-          ...basicVideoPlayOptions,
-        };
-        beforeVideoPlay(item as CameraRecordItem, result);
+        beforeVideoPlay(item as CameraRecordItem);
       }
     } catch (error) {
     } finally {
@@ -100,75 +89,12 @@
   };
 
   const { getResult } = useFingerprint();
-  const beforeVideoPlay = async (record: CameraRecordItem, fingerprintResult: GetResult) => {
-    if (record.accessMode === AccessMode.ManuallyEnter) {
-      if (record.videoUrl) {
-        const isFlvPlay = isRtspProtocol(record.videoUrl);
-        const type = getVideoTypeByUrl(record.videoUrl);
-        record.playSourceUrl = record.videoUrl;
-        if (isFlvPlay) {
-          // handleFlvPlayerUnload(record, fingerprintResult!.visitorId);
-          record.playSourceUrl = getFlvPlayUrl(record.videoUrl, fingerprintResult.visitorId);
-          record.withToken = true;
-        }
-
-        (record as CameraRecordItem).videoPlayerOptions = {
-          ...basicVideoPlayOptions,
-          sources: [
-            {
-              src: record.playSourceUrl,
-              type,
-            },
-          ],
-        };
-        record.isTransform = true;
-      }
-    }
-    if (record.accessMode === AccessMode.GBT28181) {
-      try {
-        const { params } = record;
-        if (params?.channelNo && params.deviceId) {
-          const result = await getVideoControlStart({
-            deviceId: params.deviceId,
-            channelId: params.channelNo,
-          });
-
-          (record as CameraRecordItem).videoPlayerOptions = {
-            ...basicVideoPlayOptions,
-            sources: [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }],
-          };
-        }
-      } finally {
-        record.isTransform = true;
-      }
-    }
-    if (record.accessMode === AccessMode.Streaming) {
-      try {
-        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-        const index = unref(cameraList).findIndex((item) => item.id === record.id);
-        if (~index) {
-          const oldRecord = unref(cameraList).at(index)!;
-          unref(cameraList)[index] = {
-            ...oldRecord,
-
-            videoPlayerOptions: {
-              ...basicVideoPlayOptions,
-              sources: [
-                {
-                  src: url,
-                  type: getVideoTypeByUrl(url),
-                },
-              ],
-            } as any,
-            isTransform: true,
-          };
-        }
-      } catch (error) {
-      } finally {
-        const index = unref(cameraList).findIndex((item) => item.id === record.id);
-        if (~index) unref(cameraList)[index].isTransform = true;
-      }
-    }
+  const beforeVideoPlay = async (record: CameraRecordItem) => {
+    if (!record.accessMode) return;
+    const { url, type } = await getPlayUrl(record);
+    record.playSourceUrl = url;
+    record.streamType = type;
+    record.isTransform = true;
   };
 
   const gridLayout = ref({ gutter: 1, column: 2 });
@@ -312,11 +238,11 @@
             ref="listEl"
             :loading="loading"
             :data-source="cameraList"
-            class="bg-light-50 w-full !h-full dark:bg-dark-900 split-mode-list"
+            class="bg-light-50 w-full !h-full dark:bg-dark-900 split-mode-list full"
             :grid="(gridLayout as any)"
             :style="{ '--height': `${100 / pagination.colNumber}%` }"
           >
-            <template #renderItem="{ item }">
+            <template #renderItem="{ item }: { item: CameraRecordItem }">
               <List.Item>
                 <div class="box-border w-full !h-full p-1px">
                   <div
@@ -332,17 +258,19 @@
                       v-show="!item.isTransform"
                       :spinning="!item.isTransform"
                     />
-                    <BasicVideoPlay
+                    <XGPlayer
                       v-if="item.isTransform"
-                      :options="item.videoPlayerOptions"
+                      :url="item.playSourceUrl"
+                      :stream-type="item.streamType"
                       :with-token="item.withToken"
+                      :config="{ width: '100%', height: '100%' }"
                       @on-unmounted="handleCloseFlvPlayUrl(item)"
                     />
                     <div
                       class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center"
                       style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
                     >
-                      <span>{{ item.name }}</span>
+                      <span>{{ item.name }}{{ pagination.colNumber }}</span>
                     </div>
                   </div>
                 </div>
@@ -366,8 +294,10 @@
     height: 100%;
   }
 
-  .split-screen-mode:deep(.ant-spin-container) {
-    height: 100% !important;
+  .full {
+    :deep(.ant-spin-container) {
+      height: 100% !important;
+    }
   }
 
   .video-container {

@@ -6,7 +6,6 @@ import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import SnHelpMessage1 from './SnHelpMessage1.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
-import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import { findDictItemByCode } from '/@/api/system/dict';
@@ -15,7 +14,24 @@ import { DataSourceField } from '../../visual/packages/config/common.config';
 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const';
-import { getDeviceChannelList } from '/@/api/camera/cameraManager';
+import {
+  getDeviceChannelList,
+  getFlvPlayUrl,
+  getStreamingPlayUrl,
+} from '/@/api/camera/cameraManager';
+import { CameraRecord } from '/@/api/camera/model/cameraModel';
+import { isRtspProtocol } from '/@/components/Video/src/utils';
+import { useFingerprint } from '/@/utils/useFingerprint';
+import { getVideoControlStart } from '/@/api/device/videoChannel';
+import { StreamType as PlayerStreamType } from '/@/components/Video/src/types';
+
+interface FileItem {
+  uid: string;
+  name: string;
+  status?: string;
+  response?: string;
+  url?: string;
+}
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -321,7 +337,7 @@ export const formSchema: QFormSchema[] = [
               if (data)
                 return data.map((item) => ({
                   ...item,
-                  label: item.name,
+                  label: item.name || item.channelId,
                   value: item.channelId,
                 }));
             } catch (error) {}
@@ -604,3 +620,37 @@ export const formGBTSchema: QFormSchema[] = [
       values.allDevice === GBT28181DeviceSelectMethod.PARTIAL,
   },
 ];
+
+export async function getPlayUrl(
+  params: CameraRecord
+): Promise<{ url: string; type: PlayerStreamType }> {
+  const { accessMode } = params;
+  if (accessMode === AccessMode.ManuallyEnter) {
+    const { videoUrl } = params;
+    if (params.videoUrl) {
+      const isRTSPPlay = isRtspProtocol(videoUrl);
+
+      if (isRTSPPlay) {
+        const { getResult } = useFingerprint();
+        const fingerprint = await getResult();
+        return { url: getFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' };
+      } else {
+        return { url: videoUrl, type: 'auto' };
+      }
+    }
+  } else if (accessMode === AccessMode.GBT28181) {
+    const { deviceId, channelNo } = params?.params || {};
+    const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
+    return { url: result.data.flv, type: 'flv' };
+  } else {
+    const { id, playProtocol } = params;
+    const result = await getStreamingPlayUrl(id);
+    const type: PlayerStreamType =
+      playProtocol === FluoriteMideaProtocolEnum.FLV
+        ? 'flv'
+        : playProtocol === FluoriteMideaProtocolEnum.HLS
+        ? 'hls'
+        : 'auto';
+    return { url: result.data.url, type };
+  }
+}

@@ -165,6 +165,14 @@
             values.icon = file.url || null;
           }
           values = { ...positionState, ...values };
+
+          Object.assign(values, {
+            code:
+              values?.tcpDeviceProtocol === TCPProtocolTypeEnum.CUSTOM
+                ? values?.code
+                : values?.addressCode,
+          });
+
           delete values.deviceAddress;
           emit('next', values);
           // 获取输入的数据
@@ -419,6 +427,7 @@
           const file = (value.icon || []).at(0) || {};
           value.icon = file.url || null;
         }
+
         return {
           ...value,
           ...(value?.code || value?.addressCode

 import { h } from 'vue';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
-import { withInstall } from '/@/utils/index';
-
-import VideoPlay from './video.vue';
-export const Video = withInstall(VideoPlay);
+export type VideoCancelModalParamsType = {
+  canControl?: boolean;
+  isGBT?: boolean;
+  tbDeviceId?: string;
+  channelId?: string;
+  id?: string;
+  playerProps?: Recordable;
+  getPlayUrl: () => Promise<Record<'url' | 'type', string>>;
+};
 
 //视频通道权限标识枚举
 export enum GBT28181_DEVICE_PERMISSION_ENUM {
@@ -50,7 +55,7 @@ export const configColumns: BasicColumn[] = [
       return h(
         Tag,
         {
-          color: text === ChannelStatusEnum.ONLINE ? 'green' : 'blue',
+          color: text === ChannelStatusEnum.ONLINE ? 'green' : 'red',
         },
         () => (text === ChannelStatusEnum.ONLINE ? '在线' : '离线')
       );

@@ -8,7 +8,7 @@
         <a-button type="primary" @click="handleSyncPlay">通道同步</a-button>
       </Authority>
     </template>
-    <template #hasAudio="{ record }">
+    <template #hasAudio="{ record }: { record: VideoChannelItemType }">
       <Switch
         :checked="record.status === 1"
         :loading="record.pendingStatus"
@@ -25,6 +25,7 @@
             auth: GBT28181_DEVICE_PERMISSION_ENUM.PLAY_SYNC,
             icon: 'ant-design:play-circle-outlined',
             onClick: handlePlay.bind(null, record),
+            ifShow: record?.status === 'ONLINE', //在线则显示播放按钮
           },
           {
             label: '停止',
@@ -41,16 +42,22 @@
 </template>
 
 <script lang="ts" setup>
-  import { configColumns, searchFormSchema, GBT28181_DEVICE_PERMISSION_ENUM } from './config';
+  import {
+    configColumns,
+    searchFormSchema,
+    GBT28181_DEVICE_PERMISSION_ENUM,
+    VideoCancelModalParamsType,
+  } from './config';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { Switch } from 'ant-design-vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import VideoModal from './videoModal.vue';
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { getVideoChannelList } from '/@/api/device/videoChannel';
+  import { getVideoChannelList, getVideoControlStart } from '/@/api/device/videoChannel';
   import { stopOnDemandVideoApiGet, syncVideoApiGet } from '/@/api/camera/cameraManager';
   import { Authority } from '/@/components/Authority';
+  import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
 
   const props = defineProps<{ deviceDetail: DeviceRecord }>();
 
@@ -91,10 +98,20 @@
     }
   };
 
-  const handlePlay = (record: Recordable) => {
+  const handlePlay = (record: VideoChannelItemType) => {
+    const { channelId } = record;
     openModal(true, {
-      record,
-      ifShowGBT: true,
+      record: {
+        canControl: true,
+        isGBT: true,
+        channelId,
+        tbDeviceId: props.deviceDetail.tbDeviceId,
+        getPlayUrl: async () => {
+          const { deviceId, channelId } = record;
+          const result = await getVideoControlStart({ deviceId, channelId });
+          return { type: 'flv', url: result.data.flv };
+        },
+      } as VideoCancelModalParamsType,
     });
   };
 

 <script lang="ts" setup>
-  import { isNumber } from 'lodash';
-  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
-  import 'video.js/dist/video-js.css';
   import { Tooltip } from 'ant-design-vue';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { isShareMode } from '/@/views/sys/share/hook';
-  import 'videojs-flvjs-es6';
+  import { ref, unref } from 'vue';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   import {
     CaretUpOutlined,
@@ -19,106 +12,50 @@
     ZoomOutOutlined,
   } from '@ant-design/icons-vue';
   import { Button, Slider } from 'ant-design-vue';
-  import { nextTick } from 'vue';
   import { controlling } from '/@/api/camera/cameraManager';
   import { setVideoControl } from '/@/api/device/videoChannel';
-
-  const { prefixCls } = useDesign('basic-video-play');
-  interface IGbtOption {
-    tbDeviceId: string;
-    channelId: string;
-  }
+  import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
+  import PresetPlayer from 'xgplayer';
 
   const props = defineProps<{
-    options?: VideoJsPlayerOptions;
-    withToken?: boolean;
-    isGBT?: boolean;
-    GBTOption: IGbtOption;
-  }>();
-
-  const emit = defineEmits<{
-    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
-    (event: 'onUnmounted'): void;
-  }>();
-
-  const videoPlayEl = ref<HTMLVideoElement>();
-
-  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
-
-  const getGBT = computed(() => {
-    const { isGBT } = props;
-    return isGBT;
-  });
-
-  const getOptions = computed(() => {
-    const { options, withToken } = props;
-
-    const defaultOptions: VideoJsPlayerOptions & Recordable = {
-      language: 'zh',
-      muted: true,
-      liveui: true,
-      controls: true,
-      techOrder: ['html5', 'flvjs'],
-      flvjs: {
-        mediaDataSource: {
-          isLive: true,
-          cors: true,
-          hasAudio: false,
-          withCredentials: false,
-        },
-        config: {
-          headers: {
-            ...(withToken
-              ? {
-                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-                }
-              : {}),
-          },
-          autoCleanupSourceBuffer: true,
-        },
-      },
+    playUrl?: string;
+    options?: {
+      canControl?: boolean;
+      isGBT?: boolean;
+      tbDeviceId?: string;
+      channelId?: string;
+      id?: string;
+      playerProps?: Recordable;
     };
-    return videoJs.mergeOptions(defaultOptions, options);
-  });
+  }>();
 
-  const getWidthHeight = computed(() => {
-    let { width = 300, height = 150 } = unref(getOptions);
-    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
-    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
-    return { width, height } as CSSProperties;
-  });
+  const playerRef = ref<InstanceType<typeof XGPlayer>>();
 
   // 控制云台控制速度
   const sliderValue = ref<number>(123);
 
-  const init = () => {
-    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
-      emit('ready', unref(videoPlayInstance));
-    });
-  };
+  const isPlay = ref(false);
 
   //播放/暂停
   const handleClick = () => {
-    // unref(isPlay) ((true,停止),(false,开启))
-    if (unref(isPlay)) unref(videoPlayInstance)?.pause();
-    else unref(videoPlayInstance)?.play();
-  };
-
-  const getId = () => {
-    const { options } = props || {};
-    const { sources }: any = options || {};
-    return sources?.[0]?.id;
+    const playerInstance = unref(playerRef)?.getPlayerInstance();
+    if (playerInstance && playerInstance.paused) {
+      unref(playerRef)?.getPlayerInstance()?.play();
+      isPlay.value = true;
+    } else {
+      unref(playerRef)?.getPlayerInstance()?.pause();
+      isPlay.value = false;
+    }
   };
 
   const handleControl = (action: number, direction: string) => {
-    const organizationId = getId();
-    controlling({ cameraIndexCode: organizationId, action, command: direction });
+    const { options } = props;
+    controlling({ cameraIndexCode: options?.id, action, command: direction });
   };
 
   // 国标控制
   const handleGBTControl = (command: string, action?: number | string) => {
-    const { tbDeviceId, channelId } = props.GBTOption;
+    const { tbDeviceId, channelId } = props.options || {};
     setVideoControl(tbDeviceId, channelId, {
       command,
       horizonSpeed: action,
@@ -127,33 +64,9 @@
     });
   };
 
-  const isPlay = ref<Boolean | null | undefined>(false);
-
-  onMounted(async () => {
-    init();
-    await nextTick();
-    // isPlay.value = unref(videoPlayInstance)?.paused();
-    videoPlayInstance.value?.on('loadedmetadata', () => {});
-    videoPlayInstance.value?.on('waiting', () => {
-      isPlay.value = false;
-    });
-    videoPlayInstance.value?.on('play', () => {
-      isPlay.value = true;
-    });
-    videoPlayInstance.value?.on('playing', () => {
-      isPlay.value = true;
-    });
-    videoPlayInstance.value?.on('pause', () => {
-      isPlay.value = false;
-    });
-    videoPlayInstance.value?.on('ended', () => {
-      isPlay.value = false;
-    });
-  });
-
   //长按开始
-  const moveStart = (action) => {
-    if (unref(getGBT)) {
+  const moveStart = (action: string) => {
+    if (unref(props.options?.isGBT)) {
       handleGBTControl(action, unref(sliderValue));
       return;
     }
@@ -161,46 +74,40 @@
   };
 
   // 长按结束
-  const moveStop = (action) => {
-    if (unref(getGBT)) {
+  const moveStop = (action: string) => {
+    if (unref(props.options?.isGBT)) {
       handleGBTControl('STOP', unref(sliderValue));
       return;
     }
     handleControl(1, action);
   };
 
-  //页面卸载
-  onUnmounted(() => {
-    unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = null;
-    emit('onUnmounted');
-  });
-
-  defineExpose({
-    reloadPlayer: init,
-    getInstance: () => unref(videoPlayInstance),
-  });
+  const handleVideoStatus = (flag: boolean) => {
+    isPlay.value = flag;
+  };
 </script>
 
 <template>
-  <div
-    :class="prefixCls"
-    class="!w-full h-full flex"
-    :style="getWidthHeight"
-    style="min-height: 100%"
-  >
-    <video
-      ref="videoPlayEl"
-      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"
-      muted
+  <div class="!w-full h-full flex" style="min-height: 100%">
+    <XGPlayer
+      ref="playerRef"
+      v-bind="options?.playerProps"
+      :url="playUrl"
+      auto-play
+      :config="{ fluid: true }"
+      @play="handleVideoStatus(true)"
+      @pause="handleVideoStatus(false)"
+      @ended="handleVideoStatus(false)"
+    />
+
+    <div
+      v-if="options?.canControl"
+      class="!w-2/10 px-4 bg-white flex justify-center items-center flex-col"
     >
-    </video>
-
-    <div class="!w-2/10 bg-white flex items-center flex-col">
       <Tooltip>
-        <template #title
-          >长按按钮调用API，由于视频流媒体提供的流，有一定时延，请耐心等待。</template
-        >
+        <template #title>
+          长按按钮调用API，由于视频流媒体提供的流，有一定时延，请耐心等待。
+        </template>
         <label class="validate-dot">云台控制</label>
         <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
       </Tooltip>
@@ -248,7 +155,7 @@
           <Button class="circle" @click="handleClick" />
         </div>
       </div>
-      <div class="mt-5" v-if="getGBT">
+      <div class="mt-5" v-if="options.isGBT">
         <Slider v-model:value="sliderValue" :min="0" :max="255" style="width: 130px" />
       </div>
       <div class="flex justify-center mt-8">
@@ -274,16 +181,6 @@
 </template>
 
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-basic-video-play';
-
-  .@{prefix-cls} {
-    .vjs-error-display {
-      .vjs-modal-dialog-content::after {
-        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
-      }
-    }
-  }
-
   .child {
     position: absolute;
     width: 3rem;

 <template>
-  <div>
-    <BasicModal
-      v-bind="$attrs"
-      width="60rem"
-      destroyOnClose
-      :height="heightNum"
-      @register="register"
-      title="视频预览"
-      :showOkBtn="false"
-      @cancel="handleCancel"
-    >
-      <div
-        class="flex items-center justify-center w-full h-full min-h-96 video-container bg-dark-50"
-      >
-        <VideoPlayer
-          ref="videoInstance"
-          v-if="showVideo"
-          :options="(options as VideoJsPlayerOptions)"
-          :withToken="withToken"
-          :isGBT="isGBT"
-          :GBTOption="GBTOption"
-        />
-      </div>
-    </BasicModal>
-  </div>
+  <BasicModal
+    v-bind="$attrs"
+    width="60rem"
+    destroyOnClose
+    :height="800"
+    @register="register"
+    title="视频预览"
+    :showOkBtn="false"
+    @cancel="handleCancel"
+  >
+    <div class="flex items-center justify-center w-full h-full min-h-96 video-container bg-dark-50">
+      <VideoPlayer :play-url="playUrl" :options="options" />
+    </div>
+  </BasicModal>
 </template>
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
+  import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { VideoJsPlayerOptions } from 'video.js';
   import VideoPlayer from './video.vue';
-  import { getVideoControlStart } from '/@/api/device/videoChannel';
-  import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
-  import { getVideoTypeByUrl } from '/@/components/Video';
-  import { AccessMode } from '/@/views/camera/manage/config.data';
-  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-
+  import { VideoCancelModalParamsType } from '/@/views/device/list/cpns/tabs/VideoChannel/config';
   const emit = defineEmits(['reloadTable', 'register']);
 
-  const heightNum = ref(800);
-  const showVideo = ref(false);
-
-  const videoInstance = ref<InstanceType<typeof VideoPlayer>>();
-
-  const videoId = ref<string>();
-
-  const withToken = ref(false);
-
-  const options = reactive<VideoJsPlayerOptions>({
-    width: '100%' as unknown as number,
-    height: 384 as unknown as number,
-    autoplay: true,
-  });
-  const GBTOption = ref({
-    tbDeviceId: '',
-    channelId: '',
-  });
-  const isGBT = ref<boolean>(false);
-
+  const playUrl = ref<Nullable<string>>();
+  const options = ref<Nullable<VideoCancelModalParamsType>>();
   const [register, { setModalProps }] = useModalInner(
-    async (data: { record: VideoChannelItemType }) => {
-      const { record, ifShowGBT = false } = data;
-      const { params } = record as Recordable;
-      videoId.value = record.id || '';
-      isGBT.value = ifShowGBT;
-      GBTOption.value.tbDeviceId = params?.deviceId ? params?.deviceId : record?.deviceId;
-      GBTOption.value.channelId = params?.channelNo ? params?.channelNo : record?.channelId;
+    async (data: ModalParamsType<VideoCancelModalParamsType>) => {
+      const { record } = data;
       try {
+        playUrl.value = null;
+        options.value = null;
         setModalProps({ loading: true, loadingTip: '视频加载中...' });
-        // getStreamingPlayUrl
-        let result: any = null;
-        if (record.accessMode === AccessMode.GBT28181 || ifShowGBT) {
-          result = await getVideoControlStart({
-            deviceId: params?.deviceId ? params?.deviceId : record?.deviceId,
-            channelId: params?.channelNo ? params?.channelNo : record?.channelId,
-          });
-          options.sources = [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }];
-        } else {
-          result = await getStreamingPlayUrl(record.id);
-          options.sources = [
-            { src: result.data.url, type: getVideoTypeByUrl(result.data.url), id: record.id },
-          ];
-        }
-        showVideo.value = true;
+        const { url, type } = await record.getPlayUrl();
+
+        playUrl.value = url;
+        options.value = record;
+        options.value.playerProps = {
+          ...(options.value?.playerProps || {}),
+          streamType: type,
+        };
       } catch (error) {
       } finally {
         setModalProps({ loading: false });
@@ -91,18 +46,6 @@
   );
 
   const handleCancel = () => {
-    showVideo.value = false;
-    withToken.value = false;
     emit('reloadTable');
   };
 </script>
-
-<style lang="less" scoped>
-  .video-container:deep(.vben-basic-video-play) {
-    min-height: 13rem;
-  }
-
-  .video-container:deep(.video-js) {
-    min-height: 13rem;
-  }
-</style>

@@ -140,6 +140,7 @@
     EnumTableChartMode,
     ModeSwitchButton,
   } from '/@/components/Widget';
+  import { TransportTypeEnum } from '/@/enums/deviceEnum';
 
   interface DeviceInfo {
     alarmStatus: 0 | 1;
@@ -152,6 +153,7 @@
     deviceType?: string;
     alias?: string;
     deviceProfileId: string;
+    transportType?: string;
   }
   type MarkerList = DeviceInfo & { marker: any; label: any };
 
@@ -377,7 +379,15 @@
           width: 330, // 信息窗口宽度
           height: 0, // 信息窗口高度
         };
-        const { name, alias, organizationDTO, deviceState, deviceProfile, deviceType } = record;
+        const {
+          name,
+          alias,
+          organizationDTO,
+          deviceState,
+          deviceProfile,
+          deviceType,
+          transportType,
+        } = record;
         const { address, longitude, latitude } = record.deviceInfo;
 
         // 创建信息窗口对象
@@ -411,7 +421,9 @@
           <div style="display:flex;justify-content:end; margin-top:10px">
             <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
             <button onclick="openHistoryModal()" style="display:${
-              deviceType !== 'GATEWAY' ? 'block' : 'none'
+              deviceType !== 'GATEWAY' && transportType !== TransportTypeEnum.GBT28181
+                ? 'block'
+                : 'none'
             };color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">${
             deviceType !== 'GATEWAY' ? '历史数据' : ''
           }</button>
@@ -443,10 +455,12 @@
 
       // 设备信息
       const openDeviceInfoDrawer = async () => {
-        const { id, tbDeviceId } = globalRecord;
+        const { id, tbDeviceId, transportType, deviceType } = globalRecord;
         openDrawer(true, {
           id,
           tbDeviceId,
+          transportType,
+          deviceType,
         });
       };
 

@@ -144,7 +144,7 @@ export const list = [
   },
   {
     deviceType: '网关/直连设备',
-    function: '服务端响应共享属性集客户端属性给设备端',
+    function: '服务端响应共享属性及客户端属性给设备端',
     release: 'v1/devices/me/attributes/response/$request_id',
     subscribe: 'v1/devices/me/attributes/response/+',
     platform: '发布',

@@ -54,6 +54,7 @@ export const typeList = [
   { label: '阿里', value: 'ALI_CLOUD' },
   { label: '钉钉', value: 'DING_TALK' },
   { label: '腾讯', value: 'TENCENT_CLOUD' },
+  { label: '阿里云语音', value: 'ALI_VOICE' },
 ];
 
 export const searchFormSchema: FormSchema[] = [

@@ -4,6 +4,7 @@ import { Tinymce } from '/@/components/Tinymce/index';
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { Tag } from 'ant-design-vue';
+import { useComponentRegister } from '/@/components/Form';
 
 export enum IsOrgEnum {
   IS_ORG_ENUM = 1,
@@ -12,6 +13,8 @@ export const isOrg = (type: string) => {
   return type === IsOrgEnum.IS_ORG_ENUM;
 };
 
+useComponentRegister('Tinymce', Tinymce);
+
 export const columns: BasicColumn[] = [
   {
     title: '类型',
@@ -92,21 +95,13 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: 'content',
-    component: 'Input',
+    component: 'Tinymce',
     colProps: { span: 24 },
     label: '通知内容',
     required: true,
     componentProps: {
       maxLength: 255,
     },
-    render: ({ model, field }) => {
-      return h(Tinymce, {
-        value: model[field],
-        onChange: (value: string) => {
-          model[field] = value;
-        },
-      });
-    },
   },
   {
     field: 'receiverType',

 <script lang="ts" setup>
-  import { useTable, BasicTable } from '/@/components/Table';
+  import { BasicTable, useTable } from '/@/components/Table';
   import { getColumns } from './config';
-  import { getRuleNodeEventList } from '/@/api/ruleDesigner';
+  import { doClearEvents, getRuleNodeEventList } from '/@/api/ruleDesigner';
   import { BasicNodeFormData, NodeData } from '../../../../types/node';
   import { computed, reactive, ref, unref, watch } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
   import { EventSelect } from '../EventSelect';
   import { Icon } from '/@/components/Icon';
-  import { Tooltip } from 'ant-design-vue';
-  import { EventTypeEnum } from '../EventSelect/config';
+  import { Tooltip, Popconfirm } from 'ant-design-vue';
+  import { EventTypeEnum, EventTypeNameEnum } from '../EventSelect/config';
   import { FilterForm } from '../FilterForm';
   import { useModal } from '/@/components/Modal';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
@@ -31,6 +31,8 @@
     data: {} as Recordable,
   });
 
+  const dataLength = ref();
+
   const [register, { reload, setColumns, setPagination }] = useTable({
     columns: getColumns(EventTypeEnum.DEBUG_RULE_NODE),
     showIndexColumn: false,
@@ -56,6 +58,8 @@
         { ...searchParams.data, eventType: unref(eventType) }
       );
 
+      dataLength.value = result.totalElements;
+
       return result;
     },
   });
@@ -100,6 +104,17 @@
     } as ModalParamsType<string>);
   };
 
+  const handleClearStats = async () => {
+    const userInfo = useUserStore();
+    await doClearEvents({
+      ruleId: unref(getNodeId)!,
+      tenantId: userInfo.getUserInfo.tenantId!,
+      ...(searchParams.params as Record<'startTime' | 'endTime', string>),
+      eventType: unref(eventType),
+    });
+    reload();
+  };
+
   watch(
     () => props.elementInfo?.id,
     () => {
@@ -115,6 +130,20 @@
         <EventSelect v-model:type="eventType" @change="handleEventTypeChange" />
       </template>
       <template #toolbar>
+        <Popconfirm
+          @confirm="handleClearStats"
+          :title="`清除所有${EventTypeNameEnum[eventType]}`"
+          :content="`是否确认清除所有${EventTypeNameEnum[eventType]}`"
+        >
+          <Tooltip title="">
+            <Icon
+              v-if="dataLength"
+              icon="ant-design:delete-outlined"
+              class="cursor-pointer svg:text-2xl"
+            />
+          </Tooltip>
+        </Popconfirm>
+
         <Tooltip title="过滤器">
           <Icon
             icon="material-symbols:filter-list"

@@ -5,7 +5,7 @@
   import { BasicForm, FormActionType, ThingsModelForm } from '/@/components/Form';
   import { getFormSchemas, FormFieldsEnum } from './config';
   import { FlipFlop } from '../FlipFlop';
-  import { ComponentPublicInstance, ref, unref } from 'vue';
+  import { ComponentPublicInstance, ref, unref, watch } from 'vue';
   import { ExecutionActionListRefItemType } from './type';
   import { useExecutionActionData } from './useExecutionActionData';
   import { createNewExecutionActionItem } from '.';
@@ -63,6 +63,20 @@
     hasAlarmNotify
   );
 
+  const { organizationId } = useSceneLinkageDrawerContext();
+
+  /**
+   * @description on organization change
+   */
+  watch(organizationId, () => {
+    unref(executionActionListRef).forEach((flipFlopItem) =>
+      flipFlopItem.ref?.setFieldsValue({
+        [FormFieldsEnum.ENTITY_ID]: [],
+        [FormFieldsEnum.ALARM_PROFILED]: null,
+      })
+    );
+  });
+
   defineExpose({
     getFieldsValue,
     setFieldsValue,

@@ -97,8 +97,8 @@
 
   onMounted(() => {
     const platform = getPlatFormInfo();
-    defaultLogo.value = platform.logo || '';
-    show.value = !platform.background;
+    defaultLogo.value = platform?.logo || '';
+    show.value = !platform?.background;
   });
 </script>
 <style lang="less">

@@ -9,6 +9,9 @@
     <div style="height: 50vh">
       <BasicForm @register="registerForm">
         <template #organizationId="{ model, field }">
+          <Button type="link" @click="handleOpenCreate" style="padding: 0; z-index: 9999"
+            >新增组织
+          </Button>
           <BasicTree
             v-if="organizationTreeData.length"
             v-model:value="model[field]"
@@ -44,6 +47,8 @@
           </a-select>
         </template>
       </BasicForm>
+
+      <OrganizationDrawer @register="registerDrawer" @success="handleReload" />
     </div>
   </BasicModal>
   <RoleDrawer @register="registerRoleDrawer" @success="handleSuccess" />
@@ -53,6 +58,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { accountFormSchema } from './account.data';
+  import { Button } from 'ant-design-vue';
   import {
     findCurrentUserRelation,
     SaveOrUpdateUserInfo,
@@ -67,13 +73,16 @@
   import { PlusOutlined } from '@ant-design/icons-vue';
   import { useDrawer } from '/@/components/Drawer';
   import RoleDrawer from '../role/RoleDrawer.vue';
+  import OrganizationDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
 
   export default defineComponent({
     name: 'AccountModal',
     components: {
       BasicModal,
       BasicForm,
+      Button,
       BasicTree,
+      OrganizationDrawer,
       PlusOutlined,
       RoleDrawer,
       VNodes: (_, { attrs }) => {
@@ -273,6 +282,17 @@
         ];
       };
 
+      const [registerDrawer, { openDrawer: addOpenDrawer }] = useDrawer();
+
+      const handleOpenCreate = () => {
+        addOpenDrawer(true, { isUpdate: false });
+      };
+      const handleReload = async () => {
+        const groupListModel = await findCurrentUserGroups();
+        copyTransTreeFun(groupListModel);
+        organizationTreeData.value = groupListModel;
+      };
+
       return {
         registerModal,
         registerForm,
@@ -291,6 +311,9 @@
         handleCheckClick,
         handleUnSelectAll,
         handleStrictlyStatus,
+        handleOpenCreate,
+        registerDrawer,
+        handleReload,
       };
     },
   });
@@ -298,6 +321,8 @@
 <style scoped lang="less">
   :deep(.vben-basic-tree) {
     width: 100% !important;
+    margin-top: -28px !important;
+    padding: 0;
   }
 
   :deep(.is-unflod) {

@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref, computed } from 'vue';
+  import { defineComponent, onMounted, ref, computed, watch } from 'vue';
   import { Card } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { schemas, provSchemas } from '../config/enterPriseInfo.config';
@@ -73,7 +73,10 @@
         loading: false,
         tip: '拼命加载中...',
       });
-      const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({
+      const [
+        registerForm,
+        { getFieldsValue, setFieldsValue, validate, clearValidate, validateFields },
+      ] = useForm({
         labelWidth: 80,
         schemas,
         showResetButton: false,
@@ -101,6 +104,13 @@
       const handleSetCodeImgUrl = (d) => {
         qrcodePic.value = d;
       };
+      watch(
+        () => qrcodePic.value,
+        (newValue) => {
+          if (!newValue) validateFields(['qrcode']);
+          else clearValidate('qrcode');
+        }
+      );
       // 更新
       const handleUpdateInfo = async () => {
         try {

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import moment from 'moment';
-import { findDictItemByCode } from '/@/api/system/dict';
 import { format } from '../util';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 
-//格式化资源类型和操作类型
-let formatText;
-let actionTypeText;
-async function formatTextFunc() {
-  formatText = await findDictItemByCode({ dictCode: 'operate_log' });
-  actionTypeText = await findDictItemByCode({ dictCode: 'exception_log' });
-}
-formatTextFunc();
 // 表格数据
 export const columns: BasicColumn[] = [
   {
@@ -21,24 +12,6 @@ export const columns: BasicColumn[] = [
     width: 120,
   },
   {
-    title: '客户名称',
-    dataIndex: 'customerName',
-    width: 120,
-  },
-  {
-    title: '资源类型',
-    dataIndex: 'entityType',
-    width: 180,
-    format: (_, record) => {
-      const text = formatText.find((f) => {
-        if (f.itemValue == record.entityType) {
-          return f.itemText;
-        }
-      });
-      return text?.itemText;
-    },
-  },
-  {
     title: '资源名称',
     dataIndex: 'entityName',
     width: 180,
@@ -49,19 +22,6 @@ export const columns: BasicColumn[] = [
     width: 180,
   },
   {
-    title: '操作类型',
-    dataIndex: 'actionType',
-    width: 180,
-    format: (_, record) => {
-      const text = actionTypeText.find((f) => {
-        if (f.itemValue == record.actionType) {
-          return f.itemText;
-        }
-      });
-      return text?.itemText;
-    },
-  },
-  {
     title: '操作状态',
     dataIndex: 'actionStatus',
     width: 180,
@@ -116,22 +76,7 @@ export const formSchema: FormSchema[] = [
       disabled: true,
     },
   },
-  {
-    field: 'customerName',
-    label: '客户名称',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'entityType',
-    label: '资源类型',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
+
   {
     field: 'entityName',
     label: '资源名称',
@@ -150,14 +95,6 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: 'actionType',
-    label: '操作类型',
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
     field: 'actionStatus',
     label: '操作状态',
     component: 'Input',

 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { useI18n } from '/@/hooks/web/useI18n';
+import { createOrganizationSearch } from '/@/utils/organizationSearch';
 const { t } = useI18n();
 
 export const columns: BasicColumn[] = [
@@ -38,6 +39,7 @@ export const formSchema: FormSchema[] = [
         value: 'id',
       },
       maxTagCount: 10,
+      ...createOrganizationSearch(),
       getPopupContainer: () => document.body,
     },
   },

@@ -13,6 +13,7 @@ export enum FormFieldEnum {
 
   DEVICE_ID = 'deviceId',
   CHANNEL_ID = 'channelId',
+  PLAY_PROTOCOL = 'playProtocol',
 }
 
 export interface DataSourceValueType {
@@ -70,6 +71,7 @@ export const formSchemas: FormSchema[] = [
     component: 'Input',
     label: '地址',
     colProps: { span: 16 },
+    required: true,
     ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.CUSTOM,
     componentProps: {
       placeholder: '请输入自定义地址',
@@ -79,6 +81,7 @@ export const formSchemas: FormSchema[] = [
     field: FormFieldEnum.ORGANIZATION_ID,
     component: 'OrgTreeSelect',
     label: '组织',
+    required: true,
     colProps: { span: 8 },
     ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.VIDEO_MANAGE,
     componentProps: ({ formActionType }) => {
@@ -105,6 +108,7 @@ export const formSchemas: FormSchema[] = [
     field: FormFieldEnum.VIDEO_ID,
     component: 'ApiSelect',
     label: '地址',
+    required: true,
     colProps: { span: 8 },
     ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.VIDEO_MANAGE,
     componentProps: ({ formActionType, formModel }) => {
@@ -129,6 +133,7 @@ export const formSchemas: FormSchema[] = [
               accessMode === AccessMode.GBT28181 ? options.params?.channelNo : null,
             [FormFieldEnum.DEVICE_ID]:
               accessMode === AccessMode.GBT28181 ? options.params?.deviceId : null,
+            [FormFieldEnum.PLAY_PROTOCOL]: options?.playProtocol,
           });
         },
       };
@@ -146,4 +151,10 @@ export const formSchemas: FormSchema[] = [
     component: 'Input',
     ifShow: false,
   },
+  {
+    field: FormFieldEnum.PLAY_PROTOCOL,
+    label: '播放协议',
+    component: 'InputNumber',
+    ifShow: false,
+  },
 ];

 <script lang="ts" setup>
   import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
-  import { computed, onMounted, onUnmounted, toRaw } from 'vue';
-  import { VideoJsPlayerOptions } from 'video.js';
-  import { AccessMode } from '/@/views/camera/manage/config.data';
-  import { unref } from 'vue';
-  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { XGPlayer } from '/@/components/Video';
+  import { onMounted, onUnmounted } from 'vue';
+  import { getPlayUrl } from '/@/views/camera/manage/config.data';
+  import { closeFlvPlay } from '/@/api/camera/cameraManager';
   import { ref } from 'vue';
   import { Spin } from 'ant-design-vue';
   import { useFingerprint } from '/@/utils/useFingerprint';
-  import { isRtspProtocol, VideoPlayerType } from '/@/components/Video/src/utils';
-  import { isShareMode } from '/@/views/sys/share/hook';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { getVideoControlStart } from '/@/api/device/videoChannel';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { CameraRecord } from '/@/api/camera/model/cameraModel';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -21,24 +17,12 @@
 
   const loading = ref(true);
 
-  const basicVideoPlayEl = ref<Nullable<InstanceType<typeof BasicVideoPlay>>>(null);
-
-  const withToken = ref(false);
-
-  const playSource = ref<Record<'src' | 'type', string>>(
-    {} as unknown as Record<'src' | 'type', string>
-  );
+  const playUrl = ref<string>();
+  const playType = ref<string>();
 
   const exampleVideoPlay =
     'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm';
 
-  const getOptions = computed<VideoJsPlayerOptions>(() => {
-    return {
-      width: '100%' as unknown as number,
-      height: '100%' as unknown as number,
-    };
-  });
-
   const { getResult } = useFingerprint();
 
   const handleGetVideoPlayUrl = async () => {
@@ -46,45 +30,19 @@
       const { config } = props;
       const { option } = config;
       const { videoConfig, uuid } = option || {};
+      const { type, url } = await getPlayUrl({
+        id: videoConfig?.id,
+        accessMode: videoConfig?.accessMode,
+        playProtocol: videoConfig?.playProtocol,
+        videoUrl: videoConfig?.videoUrl,
+        params: {
+          deviceId: videoConfig?.deviceId,
+          channelNo: videoConfig?.channelId,
+        },
+      } as unknown as CameraRecord);
+      playType.value = type;
+      playUrl.value = url;
       if (!uuid) return;
-      const { url, id, accessMode, deviceId, channelId } = videoConfig || {};
-      let type = getVideoTypeByUrl(url!);
-      let playUrl = url;
-      if (accessMode === AccessMode.Streaming && id) {
-        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!);
-        playUrl = url;
-        playUrl && (type = getVideoTypeByUrl(playUrl!));
-      } else if (accessMode === AccessMode.GBT28181 && deviceId && channelId) {
-        const {
-          data: { flv },
-        } = await getVideoControlStart({ channelId, deviceId });
-
-        playUrl = flv;
-        type = VideoPlayerType.flv;
-      }
-
-      if (isRtspProtocol(url!)) {
-        const result = await getResult();
-        const { visitorId } = result;
-        playUrl = getFlvPlayUrl(playUrl!, visitorId);
-        withToken.value = true;
-      }
-
-      playSource.value = {
-        src: playUrl!,
-        type,
-      };
-
-      const instance = unref(basicVideoPlayEl)?.customInit((options) => {
-        if (unref(withToken)) {
-          (options as any).flvjs.config.headers = {
-            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-          };
-        }
-        return { ...options, sources: [toRaw(unref(playSource))] } as VideoJsPlayerOptions;
-      });
-
-      instance?.play();
     } finally {
       loading.value = false;
     }
@@ -92,20 +50,8 @@
 
   const handleSelectPreview = () => {
     loading.value = false;
-    const instance = unref(basicVideoPlayEl)?.customInit((options) => {
-      withToken.value = true;
-
-      if (unref(withToken)) {
-        (options as any).flvjs.config.headers = {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-        };
-      }
-      return {
-        ...options,
-        sources: [{ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay }],
-      } as VideoJsPlayerOptions;
-    });
-    instance?.play();
+    playUrl.value = exampleVideoPlay;
+    playType.value = 'auto';
   };
 
   onMounted(() => {
@@ -126,11 +72,10 @@
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
     <Spin :spinning="loading" wrapper-class-name="video-spin">
-      <BasicVideoPlay
-        ref="basicVideoPlayEl"
-        :options="getOptions"
-        :with-token="withToken"
-        :immediateInitOnMounted="false"
+      <XGPlayer
+        :url="playUrl"
+        :stream-type="playType"
+        :config="{ width: '100%', height: '100%' }"
       />
     </Spin>
   </main>