tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/BarrageList/BarrageListH5.vue

@@ -2,34 +2,21 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, nextTick, watch, provide, useSlots, withDefaults, defineProps } from 'vue';
 import type { Component, CSSProperties } from 'vue';
-import { ObserverView } from '../../baseComp/ObserverView';
-import { throttle } from '../../utils/lodash';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useScroll } from '../../hooks/useScroll';
-import { useBarrageListState } from '../../states/BarrageListState';
+import { useLiveListState } from '../../states/LiveListState';
+import { useLoginState } from '../../states/LoginState';
+import { throttle } from '../../utils/lodash';
+import { useBarrageListState } from './BarrageListState';
+import UserActionMenu from './ClickAction/UserActionMenu.vue';
 import { Message as DefaultMessage } from './Message';
-import { MessageForward } from './MessageForward';
 import { MessageListContextSymbol } from './MessageListContext';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import UserActionMenu from './ClickAction/UserActionMenu.vue';
-import { useLoginState } from '../../states/LoginState';
-import { useLiveState } from '../../states/LiveState';
+import type { Barrage } from '../../states/BarrageState';
 
 const { t } = useUIKit();
 
 interface IMessageListProps {
-  /** message actions e.g. recall, delete, etc. */
-  // messageActionList?: IMessageAction[] | undefined;
-  /** max time between message group */
-  messageAggregationTime?: number | undefined;
-  /** custom filter function */
-  filter?: ((message: IMessageModel) => boolean) | undefined;
-  /** custom message component */
   Message?: Component | undefined;
-  /** custom message timeline component */
-  MessageTimeDivider?: Component | undefined;
-  /** custom local notification message component */
-  LocalNoticeMessage?: Component | undefined;
   containerStyle?: CSSProperties | undefined;
   itemStyle?: CSSProperties | undefined;
   height?: string;
@@ -37,24 +24,26 @@ interface IMessageListProps {
 }
 
 const props = withDefaults(defineProps<IMessageListProps>(), {
-  /** props */
-  filter: undefined,
-  enableReadReceipt: false,
-  messageAggregationTime: 5 * 60,
-  /** custom components */
   Message: undefined,
-  MessageTimeDivider: undefined,
-  LocalNoticeMessage: undefined,
 });
 
 const slots = useSlots();
 const { loginUserInfo } = useLoginState();
-const { currentLive } = useLiveState();
-const currentMessage = ref<IMessageModel>({} as IMessageModel);
+const { currentLive } = useLiveListState();
+const currentMessage = ref<Barrage>();
 const showActionMenu = ref<boolean>(false);
 const actionMenuStyle = ref<CSSProperties>({});
 
 const nickClickTarget = ref<HTMLElement | null>(null);
+const autoScrollThreshold = 150;
+const isFinishFirstRender = ref<boolean>(false);
+const isDisableAutoScroll = ref<boolean>(false);
+const distanceToBottom = ref<number>(0);
+const scrollContainer = ref<HTMLElement | null>(null);
+
+const { messageList, messageGroupTip } = useBarrageListState();
+
+const { scrollToBottom } = useScroll();
 
 // Calculate action menu position to prevent overflow beyond scrollContainer boundaries
 const calculateActionMenuPosition = (targetRect: DOMRect) => {
@@ -96,10 +85,10 @@ const calculateActionMenuPosition = (targetRect: DOMRect) => {
 
 provide(MessageListContextSymbol, {
   slots,
-  nickClick: (payload: { message: IMessageModel; event: MouseEvent }) => {
-    const { message, event } = payload;
+  nickClick: (data: { message: Barrage; event: MouseEvent }) => {
+    const { message, event } = data;
     const isOwner = loginUserInfo.value?.userId === currentLive.value?.liveOwner.userId;
-    const isMe = loginUserInfo.value?.userId === message.from;
+    const isMe = loginUserInfo.value?.userId === message.sender.userId;
     if (!isOwner || isMe) {
       return;
     }
@@ -111,25 +100,14 @@ provide(MessageListContextSymbol, {
   },
 });
 
-const autoScrollThreshold = 150;
-const isFinishFirstRender = ref<boolean>(false);
-const isDisableAutoScroll = ref<boolean>(false);
-const distanceToBottom = ref<number>(0);
-const isLoadingHistory = ref<boolean>(false);
-const scrollContainer = ref<HTMLElement | null>(null);
-
-const { messageGroupTip, messageList, loadMoreMessage, currentConversationID } = useBarrageListState();
-
-const { scrollToBottom } = useScroll();
-
 // Monitor scroll events
 const handleScroll = throttle(() => {
   if (!scrollContainer.value) {
     return;
   }
 
-  distanceToBottom.value =
-    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
+  distanceToBottom.value
+    = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
 
   if (distanceToBottom.value > autoScrollThreshold) {
     isDisableAutoScroll.value = true;
@@ -147,52 +125,15 @@ const initializeMessageList = async () => {
   isDisableAutoScroll.value = false;
 };
 
-// Load more history messages
-const loadMoreHistory = async () => {
-  // Skip if initial loading or already loading
-  if (!isFinishFirstRender.value || isLoadingHistory.value || !messageList.value?.length) {
-    return;
-  }
-
-  isLoadingHistory.value = true;
-
-  // Record current distance from bottom
-  if (!scrollContainer.value) {
-    isLoadingHistory.value = false;
-    return;
-  }
-
-  // Calculate distance from bottom before loading
-  const distanceFromBottom =
-    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
-
-  // Load more messages
-  await loadMoreMessage();
-
-  // Wait for DOM update
-  await nextTick();
-
-  // Restore scroll position to maintain the same distance from bottom
-  if (scrollContainer.value) {
-    const newScrollTop = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight - distanceFromBottom;
-
-    // Ensure scroll position is within valid range
-    scrollContainer.value.scrollTop = Math.max(
-      0,
-      Math.min(scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight, newScrollTop)
-    );
-  }
-
-  isLoadingHistory.value = false;
-};
-
-watch(currentConversationID, () => {
+watch(() => currentLive.value?.liveId, () => {
   initializeMessageList();
 });
 
-// Monitor message list changes
-watch(messageList, (newMessages, oldMessages) => {
-  if (oldMessages === undefined && newMessages && !isFinishFirstRender.value) {
+watch(() => messageList.value?.length, (length) => {
+  const newMessage = messageList.value[length - 1];
+  const oldMessage = messageList.value[length - 2];
+
+  if (oldMessage === undefined && newMessage && !isFinishFirstRender.value) {
     // Switch to a new conversation
     nextTick(() => {
       scrollToBottom({ behavior: 'instant' });
@@ -200,15 +141,13 @@ watch(messageList, (newMessages, oldMessages) => {
     });
   }
 
-  if (!oldMessages || !newMessages || !newMessages.length) {
+  if (!oldMessage || !newMessage || !length) {
     return;
   }
 
-  const newLastMessage = newMessages[newMessages.length - 1];
-  const oldLastMessage = oldMessages[oldMessages.length - 1];
-  if (newLastMessage?.ID !== oldLastMessage?.ID) {
-    const shouldAutoScroll =
-      newLastMessage.flow === 'out' || (!isDisableAutoScroll.value && distanceToBottom.value < autoScrollThreshold);
+  if (newMessage?.sequence !== oldMessage?.sequence) {
+    const shouldAutoScroll
+      = newMessage.sender.userId === loginUserInfo.value?.userId || (!isDisableAutoScroll.value && distanceToBottom.value < autoScrollThreshold);
     if (shouldAutoScroll) {
       scrollToBottom({ behavior: 'smooth' });
     } else {
@@ -217,6 +156,13 @@ watch(messageList, (newMessages, oldMessages) => {
   }
 });
 
+const handleTouchStart = () => {
+  const activeElement = document.activeElement as HTMLElement;
+  if (activeElement && typeof activeElement.blur === 'function') {
+    activeElement.blur();
+  }
+};
+
 onMounted(() => {
   if (scrollContainer.value) {
     scrollContainer.value.addEventListener('scroll', handleScroll);
@@ -233,47 +179,42 @@ onUnmounted(() => {
 
 <template>
   <div class="message-list" :style="{ height: props.height, ...props.style }">
-    <div id="messageScrollList" ref="scrollContainer" class="message-list-container" :style="props.containerStyle">
-      <ObserverView
-        root="#messageScrollList"
-        :rootMargin="'50px 0px 0px 0px'"
-        :threshold="0.1"
-        @on-show="loadMoreHistory"
-      >
-        <div id="loadMore"></div>
-      </ObserverView>
-
+    <div
+      id="messageScrollList"
+      ref="scrollContainer"
+      class="message-list-container"
+      :style="props.containerStyle"
+      @touchstart="handleTouchStart"
+    >
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
+        <template v-for="message in messageList" :key="message.sequence + message.timestampInSecond">
           <component
-            class="message-item"
-            :style="props.itemStyle"
             :is="props.Message || DefaultMessage"
+            :style="props.itemStyle"
             :message="message"
             :is-last-in-chunk="true"
           />
         </template>
       </div>
-    </div>
-    <div class="message-group-tip" v-if="messageGroupTip">
-      <div class="message-group-tip-name">
-        {{ messageGroupTip?.nameCard || messageGroupTip?.userName || messageGroupTip?.userId }}
-      </div>
-      <div class="message-group-tip-action">
-        {{ messageGroupTip?.displayAction === 'enter' ? t('Come in') : t('Leave') }}
+      <div v-if="messageGroupTip" class="message-group-tip">
+        <div class="message-group-tip-name">
+          {{ messageGroupTip?.nameCard || messageGroupTip?.userName || messageGroupTip?.userId }}
+        </div>
+        <div class="message-group-tip-action">
+          {{ messageGroupTip?.displayAction === 'enter' ? t('Come in') : t('Leave') }}
+        </div>
       </div>
     </div>
+    <UserActionMenu
+      v-if="showActionMenu && currentMessage"
+      :user-id="currentMessage?.sender.userId"
+      :user-name="currentMessage?.sender.nameCard || currentMessage?.sender.userName || currentMessage?.sender.userId"
+      :avatar-url="currentMessage?.sender.avatarUrl"
+      :style="actionMenuStyle"
+      :click-target="nickClickTarget"
+      @close="showActionMenu = false"
+    />
   </div>
-  <MessageForward />
-  <UserActionMenu
-    v-if="showActionMenu"
-    :user-id="currentMessage.from"
-    :user-name="currentMessage.nameCard || currentMessage.nick || currentMessage.from"
-    :avatar-url="currentMessage.avatar"
-    :style="actionMenuStyle"
-    :click-target="nickClickTarget"
-    @close="showActionMenu = false"
-  />
 </template>
 
 <style lang="scss" scoped>
@@ -287,20 +228,24 @@ onUnmounted(() => {
   height: 100%;
   overflow: hidden;
 }
+
 .message-list-container {
   flex: 1;
   height: 100%;
   padding: 10px;
   @include scrollbar.scrollbar-thin();
 }
+
 .message-chunk--container {
   margin-top: 10px;
 }
+
 .message-chunk {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
+
 .empty-message {
   text-align: center;
   color: var(--text-color-secondary);
@@ -310,47 +255,16 @@ onUnmounted(() => {
   align-items: center;
   height: 100%;
 }
+
 .message-action-mask {
   position: absolute;
   width: 100%;
   height: 100%;
   background: transparent;
 }
-.message-action-container {
-  position: absolute;
-}
-
-.highlight-shadow {
-  @keyframes shadow-blink {
-    50% {
-      box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
-    }
-  }
-
-  & {
-    box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
-    animation: shadow-blink 1s linear 3;
-  }
-}
 
-.new-message-notification {
+.message-action-container {
   position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: var(--primary-color, #006eff);
-  color: white;
-  padding: 8px 16px;
-  border-radius: 20px;
-  font-size: 14px;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 10;
-  transition: all 0.3s ease;
-
-  &:hover {
-    background-color: var(--primary-color-hover, #0057cc);
-  }
 }
 
 .message-group-tip {
@@ -367,14 +281,16 @@ onUnmounted(() => {
   .message-group-tip-name {
     color: var(--uikit-color-theme-8);
   }
-  .message-group-tip-action {
-  }
+
+  .message-group-tip-action {}
 }
+
 :deep(.message-bubble) {
   background-color: var(--uikit-color-black-6);
   border-radius: 12px;
   padding: 2px 6px;
 }
+
 :deep(.message-chunk) {
   gap: 4px;
 }

package/src/components/BarrageList/BarrageListState.ts

@@ -0,0 +1,223 @@
+import { ref, watch, onUnmounted } from 'vue';
+import { TUIRoomEvents } from '@tencentcloud/tuiroom-engine-js';
+import { useRoomEngine } from '../../hooks/useRoomEngine';
+import { useBarrageState } from '../../states/BarrageState';
+import { useLiveListState } from '../../states/LiveListState';
+import type { Barrage } from '../../states/BarrageState';
+
+interface IMessageGroupTip {
+  avatarUrl: string;
+  nameCard: string;
+  roomCustomInfo: Record<string, any>;
+  userId: string;
+  userName: string;
+  userRole: number;
+  displayAction: 'enter' | 'leave';
+}
+
+const roomEngine = useRoomEngine();
+
+const { currentLive } = useLiveListState();
+const { messageList } = useBarrageState();
+
+const messageGroupTipRef = ref<IMessageGroupTip>();
+const messageListRef = ref<Barrage[]>([]);
+
+const messageListCursor = ref<number>(0);
+const messageUpdateQueue = ref<Barrage[][]>([]);
+const isProcessingQueue = ref<boolean>(false);
+
+const messageGroupTipQueue = ref<IMessageGroupTip[]>([]);
+const isProcessingMessageGroupTipQueue = ref<boolean>(false);
+
+const MAX_MESSAGE_COUNT = 1000;
+const MESSAGE_GROUP_TIP_AUTO_CLEAR_DELAY = 2000;
+const MESSAGE_QUEUE_PROCESS_DELAY = 1000;
+const BATCH_SIZE = 20;
+// const MAX_WAIT_TIME = 1000; todo
+const MESSAGE_GROUP_TIP_QUEUE_MAX_LENGTH = 10;
+const MESSAGE_GROUP_TIP_QUEUE_REMAIN_LENGTH = 2;
+
+let enterRoomListener: ((params: any) => void) | null = null;
+let leaveRoomListener: ((params: any) => void) | null = null;
+
+const clearEventListeners = () => {
+  if (roomEngine.instance && enterRoomListener) {
+    roomEngine.instance.off(TUIRoomEvents.onRemoteUserEnterRoom, enterRoomListener);
+    enterRoomListener = null;
+  }
+  if (roomEngine.instance && leaveRoomListener) {
+    roomEngine.instance.off(TUIRoomEvents.onRemoteUserLeaveRoom, leaveRoomListener);
+    leaveRoomListener = null;
+  }
+};
+
+const truncateMessageList = (messages: Barrage[]) => {
+  if (messages.length <= MAX_MESSAGE_COUNT) {
+    return messages;
+  }
+
+  const excessCount = messages.length - MAX_MESSAGE_COUNT;
+  const cleanedMessages = messages.slice(excessCount);
+
+  return cleanedMessages;
+};
+
+const processMessageQueue = async () => {
+  if (isProcessingQueue.value || messageUpdateQueue.value.length === 0) {
+    return;
+  }
+
+  isProcessingQueue.value = true;
+
+  try {
+    let currentBatch: Barrage[] = [];
+    let lastUpdateTime = Date.now();
+
+    while (messageUpdateQueue.value.length > 0) {
+      const messages = messageUpdateQueue.value.splice(0, 1)[0];
+      currentBatch.push(...messages);
+      // while (
+      //   currentBatch.length < BATCH_SIZE &&
+      //   messageUpdateQueue.value.length > 0 &&
+      //   Date.now() - lastUpdateTime < MAX_WAIT_TIME
+      // ) {
+      //   const nextMessages = messageUpdateQueue.value.splice(0, 1)[0];
+      //   currentBatch.push(...nextMessages);
+      // }
+
+      const newMessageList = [...(messageListRef.value || []), ...currentBatch];
+      messageListRef.value = truncateMessageList(newMessageList);
+
+      currentBatch = [];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      lastUpdateTime = Date.now();
+
+      if (messageUpdateQueue.value.length > 0) {
+        // eslint-disable-next-line no-await-in-loop, no-promise-executor-return
+        await new Promise(resolve => setTimeout(resolve, MESSAGE_QUEUE_PROCESS_DELAY));
+      }
+    }
+  } finally {
+    isProcessingQueue.value = false;
+  }
+};
+
+const processedMessageListUpdate = (list: Barrage[]) => {
+  const newList = list.slice(messageListCursor.value);
+  messageListCursor.value = list.length;
+
+  if (newList.length === 0) {
+    messageListRef.value = list;
+    return;
+  }
+
+  for (let i = 0; i < newList.length; i += BATCH_SIZE) {
+    messageUpdateQueue.value.push(newList.slice(i, i + BATCH_SIZE));
+  }
+
+  processMessageQueue();
+};
+
+const processMessageGroupTipQueue = async () => {
+  if (isProcessingMessageGroupTipQueue.value || messageGroupTipQueue.value.length === 0) {
+    return;
+  }
+
+  isProcessingMessageGroupTipQueue.value = true;
+
+  try {
+    while (messageGroupTipQueue.value.length > 0) {
+      const tip = messageGroupTipQueue.value.splice(0, 1)[0];
+      messageGroupTipRef.value = tip;
+      // eslint-disable-next-line no-await-in-loop, @stylistic/block-spacing, @stylistic/brace-style, @stylistic/max-statements-per-line
+      await new Promise((resolve) => {setTimeout(resolve, MESSAGE_GROUP_TIP_AUTO_CLEAR_DELAY);});
+      messageGroupTipRef.value = undefined;
+    }
+  } catch (error) {
+    console.error('[BarrageListState] processMessageGroupTipQueue error', error);
+  } finally {
+    isProcessingMessageGroupTipQueue.value = false;
+  }
+};
+
+const processMessageGroupTipUpdate = (tip: IMessageGroupTip) => {
+  messageGroupTipQueue.value.push(tip);
+  if (messageGroupTipQueue.value.length > MESSAGE_GROUP_TIP_QUEUE_MAX_LENGTH) {
+    messageGroupTipQueue.value = messageGroupTipQueue.value.slice(-MESSAGE_GROUP_TIP_QUEUE_REMAIN_LENGTH);
+  }
+  processMessageGroupTipQueue();
+};
+
+const initWatchers = () => {
+  clearEventListeners();
+
+  enterRoomListener = ({ userInfo }) => {
+    processMessageGroupTipUpdate({
+      avatarUrl: userInfo.avatarUrl,
+      nameCard: userInfo.nameCard,
+      roomCustomInfo: userInfo.roomCustomInfo,
+      userId: userInfo.userId,
+      userName: userInfo.userName,
+      userRole: userInfo.userRole,
+      displayAction: 'enter',
+    });
+  };
+
+  leaveRoomListener = ({ userInfo }) => {
+    processMessageGroupTipUpdate({
+      avatarUrl: userInfo.avatarUrl,
+      nameCard: userInfo.nameCard,
+      roomCustomInfo: userInfo.roomCustomInfo,
+      userId: userInfo.userId,
+      userName: userInfo.userName,
+      userRole: userInfo.userRole,
+      displayAction: 'leave',
+    });
+  };
+
+  if (enterRoomListener) {
+    roomEngine.instance?.on(TUIRoomEvents.onRemoteUserEnterRoom, enterRoomListener);
+  }
+  if (leaveRoomListener) {
+    roomEngine.instance?.on(TUIRoomEvents.onRemoteUserLeaveRoom, leaveRoomListener);
+  }
+};
+
+watch(() => messageList.value.length, (length) => {
+  if (length > 0) {
+    processedMessageListUpdate(messageList.value);
+  }
+}, {
+  immediate: true,
+});
+
+const resetState = () => {
+  messageListRef.value = [];
+  messageListCursor.value = 0;
+  messageUpdateQueue.value = [];
+  isProcessingQueue.value = false;
+  messageGroupTipRef.value = undefined;
+  messageGroupTipQueue.value = [];
+};
+
+watch(() => currentLive.value?.liveId, (newVal, oldVal) => {
+  if (!newVal && oldVal) {
+    resetState();
+  } else {
+    initWatchers();
+  }
+});
+
+onUnmounted(() => {
+  clearEventListeners();
+});
+
+function useBarrageListState() {
+  return {
+    messageList: messageListRef,
+    messageGroupTip: messageGroupTipRef,
+  };
+}
+
+export { useBarrageListState };

package/src/components/BarrageList/Message/MessageLayout/MessageBubble/MessageBubble.vue

@@ -5,48 +5,33 @@
       cs({
         [`bubble-${flow}`]: flow && true,
         'all-round-radius': !isLastInChunk,
-        'no-background': MEDIA_MESSAGE_TYPE.includes(message.type),
-        'highlight--normal': isHighlighted,
-        'highlight--media': isHighlighted && isMediaMessage,
       })
     "
   >
-    <div v-if="message.hasRiskContent" class="has-risk-content">
-      {{ t('This message contains risky content') }}
-    </div>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, computed, defineProps, withDefaults } from 'vue';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { toRefs, defineProps, withDefaults } from 'vue';
 import cs from 'classnames';
-import { useBarrageListState } from '../../../../../states/BarrageListState';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useLoginState } from '../../../../../states/LoginState';
+import type { Barrage } from '../../../../../states/BarrageState';
 
 interface IMessageBubbleProps {
-  message: IMessageModel;
+  message: Barrage;
   isLastInChunk: boolean;
 }
 
-const { t } = useUIKit();
-
-const MEDIA_MESSAGE_TYPE = [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO];
+const { loginUserInfo } = useLoginState();
 
 const props = withDefaults(defineProps<IMessageBubbleProps>(), {
-  message: () => ({}) as IMessageModel,
+  message: () => ({}) as Barrage,
   isLastInChunk: false,
 });
 
 const { message, isLastInChunk } = toRefs(props);
-const { highlightMessageIDList } = useBarrageListState();
-
-const isMediaMessage = computed(() => MEDIA_MESSAGE_TYPE.includes(message.value.type));
-const isHighlighted = computed(() => highlightMessageIDList.value.includes(message.value.ID));
-
-const { flow } = message.value;
+const flow = message.value.sender.userId === loginUserInfo.value?.userId ? 'in' : 'out';
 </script>
 
 <style lang="scss" scoped>
@@ -68,36 +53,4 @@ $message-bubble-border-radius: 8px;
 .bubble-out {
   border-top-right-radius: 0px;
 }
-
-.no-background {
-  background: none;
-}
-
-.has-risk-content {
-  padding: 8px;
-  background-color: #fa515129;
-  color: var(--text-color-error);
-  font-size: 14px;
-}
-
-.highlight {
-  &--normal {
-    animation: background-highlight 1s ease-in-out infinite;
-  }
-  &--media {
-    animation: media-highlight 1s ease-in-out infinite;
-  }
-}
-
-@keyframes background-highlight {
-  50% {
-    background-color: rgba(255, 156, 25, 1);
-  }
-}
-
-@keyframes media-highlight {
-  50% {
-    box-shadow: 0 1px 20px 0 rgb(255, 150, 13);
-  }
-}
 </style>