Merge branch 'pref/video-component' into 'main_dev'

perf: 优化手动输入流地址携带参数时无法获取视频协议类型

See merge request yunteng/thingskit-view!233

 <script setup lang="ts">
 <script setup lang="ts">
-import Player, {Events, IError} from 'xgplayer';
-import {FlvPlugin} from 'xgplayer-flv';
+import Player, { Events, IError } from 'xgplayer';
+import { FlvPlugin } from 'xgplayer-flv';
 import Mp4Plugin from 'xgplayer-mp4';
 import Mp4Plugin from 'xgplayer-mp4';
-import {HlsPlugin} from 'xgplayer-hls';
-import {onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch} from 'vue';
+import { HlsPlugin } from 'xgplayer-hls';
+import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue';
 import PresetPlayer from 'xgplayer';
 import PresetPlayer from 'xgplayer';
-import {IPlayerOptions} from 'xgplayer/es/player';
+import { IPlayerOptions } from 'xgplayer/es/player';
 import 'xgplayer/dist/index.min.css';
 import 'xgplayer/dist/index.min.css';
-import {StreamType, XGPlayerProps} from './types';
-import {isShareMode} from "@/views/share/hook";
-import {getJwtToken, getShareJwtToken} from "@/utils/external/auth";
+import { StreamType, XGPlayerProps } from './types';
+import { isShareMode } from "@/views/share/hook";
+import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
 
 
 const props = withDefaults(defineProps<{
 const props = withDefaults(defineProps<{
   streamType?: StreamType;
   streamType?: StreamType;
@@ -28,7 +28,16 @@ const emits = defineEmits<{
   (eventName: 'onUnmounted', player: PresetPlayer): void;
   (eventName: 'onUnmounted', player: PresetPlayer): void;
 }>();
 }>();
 
 
+function parsePlayUrl(url: string) {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url;
+  }
+}
+
 function getStreamTypeByUrl(url = ''): StreamType | undefined {
 function getStreamTypeByUrl(url = ''): StreamType | undefined {
+  url = parsePlayUrl(url) || ''
   if (url.endsWith('.m3u8')) return 'hls';
   if (url.endsWith('.m3u8')) return 'hls';
   else if (url.endsWith('.mp4')) return 'mp4';
   else if (url.endsWith('.mp4')) return 'mp4';
   else if (url.endsWith('.flv')) {
   else if (url.endsWith('.flv')) {
@@ -37,8 +46,8 @@ function getStreamTypeByUrl(url = ''): StreamType | undefined {
 }
 }
 
 
 const getPluginByStreamType = (): IPlayerOptions => {
 const getPluginByStreamType = (): IPlayerOptions => {
-  let {url, withToken} = props;
-  let {streamType} = props;
+  let { url, withToken } = props;
+  let { streamType } = props;
   streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
   streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
 
 
   const liveConfig = {
   const liveConfig = {
@@ -46,12 +55,12 @@ const getPluginByStreamType = (): IPlayerOptions => {
     maxLatency: 20,
     maxLatency: 20,
     disconnectTime: 0,
     disconnectTime: 0,
     fetchOptions: withToken
     fetchOptions: withToken
-        ? {
-          headers: {
-            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-          },
-        }
-        : {},
+      ? {
+        headers: {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+        },
+      }
+      : {},
   };
   };
   const config: IPlayerOptions = {
   const config: IPlayerOptions = {
     flv: liveConfig,
     flv: liveConfig,
@@ -78,7 +87,7 @@ const playerRef = shallowRef<Nullable<PresetPlayer>>();
 const propsRef = ref<XGPlayerProps>({});
 const propsRef = ref<XGPlayerProps>({});
 
 
 const getPlayerConfig = computed<IPlayerOptions>(() => {
 const getPlayerConfig = computed<IPlayerOptions>(() => {
-  const {url, autoPlay, config} = props;
+  const { url, autoPlay, config } = props;
 
 
   const basicConfig: IPlayerOptions = {
   const basicConfig: IPlayerOptions = {
     ...config,
     ...config,
@@ -108,7 +117,7 @@ function initializePlayer() {
 
 
   if (!unref(videoElRef)) return;
   if (!unref(videoElRef)) return;
 
 
-  const player = (playerRef.value = new Player(Object.assign(config, {el: unref(videoElRef)})));
+  const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })));
 
 
   player.on(Events.READY, () => {
   player.on(Events.READY, () => {
     emits('ready', player);
     emits('ready', player);
@@ -117,9 +126,9 @@ function initializePlayer() {
   player.setEventsMiddleware({
   player.setEventsMiddleware({
     error: (event, callback) => {
     error: (event, callback) => {
       const code = (
       const code = (
-          event as unknown as {
-            error: MediaError;
-          }
+        event as unknown as {
+          error: MediaError;
+        }
       ).error.code;
       ).error.code;
       if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
       if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
         if (!props.url) {
         if (!props.url) {
@@ -152,10 +161,10 @@ onUnmounted(() => {
 });
 });
 
 
 watch(
 watch(
-    () => props.url,
-    () => {
-      initializePlayer();
-    }
+  () => props.url,
+  () => {
+    initializePlayer();
+  }
 );
 );
 
 
 defineExpose({
 defineExpose({

@@ -14,6 +14,7 @@ import {Dataset, getPlayUrl, option as configOption} from './config'
 import {XGPlayer} from '@/components/Video'
 import {XGPlayer} from '@/components/Video'
 import {StreamType} from "@/components/Video/src/types";
 import {StreamType} from "@/components/Video/src/types";
 import {CameraRecord} from "@/api/external/common/model";
 import {CameraRecord} from "@/api/external/common/model";
+import { isNullOrUnDef } from '@/utils/external/is';
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -40,7 +41,7 @@ const playType = ref<StreamType>()
 
 
 async function getPlaySource(params: Dataset) {
 async function getPlaySource(params: Dataset) {
     const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
     const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
-    if (!accessMode) return
+    if (isNullOrUnDef(accessMode)) return
     const {type, url} = await getPlayUrl({
     const {type, url} = await getPlayUrl({
       id: id,
       id: id,
       accessMode: accessMode,
       accessMode: accessMode,