mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
feat: 重构 LiveRequestOBS 组件，支持样式切换和滚动速度设置
- 修复了原有OBS组件样式背景不透明的问题 - 移除了不必要的导入和逻辑，简化了组件结构。 - 添加了样式选择功能，支持经典和清新两种风格。 - 增加了滚动速度倍率设置，提升用户体验。 - 更新了 LiveRequest 组件以支持新功能，确保样式和速度参数在 OBS 中生效。
This commit is contained in:
@@ -46,3 +46,9 @@ onUnmounted(() => {
|
|||||||
</RouterView>
|
</RouterView>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.body,html,.n-element,.n-layout-content {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,559 +1,42 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import { computed } from 'vue'
|
||||||
QueueSortType,
|
|
||||||
Setting_LiveRequest,
|
|
||||||
SongRequestFrom,
|
|
||||||
SongRequestInfo,
|
|
||||||
SongRequestStatus,
|
|
||||||
} from '@/api/api-models'
|
|
||||||
import { QueryGetAPI } from '@/api/query'
|
|
||||||
import { AVATAR_URL, SONG_REQUEST_API_URL } from '@/data/constants'
|
|
||||||
import { useElementSize } from '@vueuse/core'
|
|
||||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { Vue3Marquee } from 'vue3-marquee'
|
import ClassicRequestOBS from './live-request/ClassicRequestOBS.vue'
|
||||||
import { NCard, NDivider, NEmpty, NMessageProvider, NSpace, NText, useMessage } from 'naive-ui'
|
import FreshRequestOBS from './live-request/FreshRequestOBS.vue'
|
||||||
import { List } from 'linqts'
|
|
||||||
import { useWebRTC } from '@/store/useRTC'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
id?: number,
|
id?: number,
|
||||||
active?: boolean,
|
active?: boolean,
|
||||||
visible?: boolean,
|
visible?: boolean,
|
||||||
|
style?: 'classic' | 'fresh',
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const message = useMessage()
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const currentId = computed(() => {
|
const currentId = computed(() => {
|
||||||
return props.id ?? route.query.id
|
const queryId = route.query.id
|
||||||
})
|
return props.id ?? (typeof queryId === 'string' ? parseInt(queryId) : undefined)
|
||||||
const rtc = await useWebRTC().Init('slave')
|
|
||||||
|
|
||||||
const cardRef = ref()
|
|
||||||
const listContainerRef = ref()
|
|
||||||
const { height, width } = useElementSize(listContainerRef)
|
|
||||||
const itemHeight = 40
|
|
||||||
|
|
||||||
const key = ref(Date.now())
|
|
||||||
|
|
||||||
const originSongs = ref<SongRequestInfo[]>([])
|
|
||||||
const songs = computed(() => {
|
|
||||||
let result = new List(originSongs.value)
|
|
||||||
switch (settings.value.sortType) {
|
|
||||||
case QueueSortType.TimeFirst: {
|
|
||||||
result = result.ThenBy((q) => q.createAt)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case QueueSortType.GuardFirst: {
|
|
||||||
result = result
|
|
||||||
.OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
|
|
||||||
.ThenBy((q) => q.createAt)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
case QueueSortType.PaymentFist: {
|
|
||||||
result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
|
|
||||||
}
|
|
||||||
case QueueSortType.FansMedalFirst: {
|
|
||||||
result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (settings.value.isReverse) {
|
|
||||||
|
|
||||||
return result.Reverse().ToArray()
|
|
||||||
} else {
|
|
||||||
return result.ToArray()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const isMoreThanContainer = computed(() => {
|
// 渲染哪种样式
|
||||||
return songs.value.length * itemHeight > height.value
|
const styleType = computed(() => {
|
||||||
})
|
const queryStyle = route.query.style
|
||||||
|
return props.style || (typeof queryStyle === 'string' ? queryStyle : 'classic')
|
||||||
const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
|
|
||||||
const singing = computed(() => {
|
|
||||||
return songs.value.find((s) => s.status == SongRequestStatus.Singing)
|
|
||||||
})
|
|
||||||
const activeSongs = computed(() => {
|
|
||||||
return songs.value.filter((s) => s.status == SongRequestStatus.Waiting)
|
|
||||||
})
|
|
||||||
|
|
||||||
async function get() {
|
|
||||||
try {
|
|
||||||
const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
|
|
||||||
SONG_REQUEST_API_URL + 'get-active-and-settings',
|
|
||||||
{
|
|
||||||
id: currentId.value,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
if (data.code == 200) {
|
|
||||||
return data.data
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err)
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
songs: [],
|
|
||||||
setting: {} as Setting_LiveRequest,
|
|
||||||
} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
|
|
||||||
}
|
|
||||||
const allowGuardTypes = computed(() => {
|
|
||||||
const types = []
|
|
||||||
if (settings.value.needTidu) {
|
|
||||||
types.push('提督')
|
|
||||||
}
|
|
||||||
if (settings.value.needZongdu) {
|
|
||||||
types.push('总督')
|
|
||||||
}
|
|
||||||
if (settings.value.needJianzhang) {
|
|
||||||
types.push('舰长')
|
|
||||||
}
|
|
||||||
return types
|
|
||||||
})
|
|
||||||
async function update() {
|
|
||||||
const r = await get()
|
|
||||||
if (r) {
|
|
||||||
const isCountChange = originSongs.value.length != r.songs.length
|
|
||||||
originSongs.value = r.songs.sort((a, b) => {
|
|
||||||
return b.createAt - a.createAt
|
|
||||||
})
|
|
||||||
settings.value = r.setting
|
|
||||||
if (isCountChange) {
|
|
||||||
key.value = Date.now()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async function onAddedItem() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const direction = ref<'normal' | 'reverse'>('normal')
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
update()
|
|
||||||
// 接收点播结果消息
|
|
||||||
rtc.on('function.live-request.add', () => update())
|
|
||||||
|
|
||||||
window.$mitt.on('onOBSComponentUpdate', () => {
|
|
||||||
update()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.$mitt.off('onOBSComponentUpdate')
|
|
||||||
rtc.off('function.live-request.add', () => update())
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<ClassicRequestOBS
|
||||||
ref="cardRef"
|
v-if="styleType === 'classic'"
|
||||||
class="live-request-background"
|
:id="currentId"
|
||||||
|
:active="active"
|
||||||
|
:visible="visible"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
>
|
|
||||||
<p class="live-request-header">
|
|
||||||
{{ settings.obsTitle ?? '点播' }}
|
|
||||||
</p>
|
|
||||||
<NDivider class="live-request-divider">
|
|
||||||
<p class="live-request-header-count">
|
|
||||||
已有 {{ activeSongs.length ?? 0 }} 条
|
|
||||||
</p>
|
|
||||||
</NDivider>
|
|
||||||
<div
|
|
||||||
class="live-request-processing-container"
|
|
||||||
:singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1"
|
|
||||||
:from="singing?.from as number"
|
|
||||||
:status="singing?.status as number"
|
|
||||||
>
|
|
||||||
<div class="live-request-processing-prefix" />
|
|
||||||
<template v-if="singing">
|
|
||||||
<img
|
|
||||||
class="live-request-processing-avatar"
|
|
||||||
:src="singing?.user?.face"
|
|
||||||
referrerpolicy="no-referrer"
|
|
||||||
>
|
|
||||||
<p class="live-request-processing-song-name">
|
|
||||||
{{ singing?.songName }}
|
|
||||||
</p>
|
|
||||||
<p class="live-request-processing-name">
|
|
||||||
{{ singing?.user?.name }}
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="live-request-processing-empty"
|
|
||||||
>
|
|
||||||
暂无
|
|
||||||
</div>
|
|
||||||
<div class="live-request-processing-suffix" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
ref="listContainerRef"
|
|
||||||
class="live-request-content"
|
|
||||||
>
|
|
||||||
<template v-if="activeSongs.length > 0">
|
|
||||||
<Vue3Marquee
|
|
||||||
:key="key"
|
|
||||||
class="live-request-list"
|
|
||||||
vertical
|
|
||||||
:duration="20"
|
|
||||||
:pause="!isMoreThanContainer"
|
|
||||||
:style="`height: ${height}px;width: ${width}px;`"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(song, index) in activeSongs"
|
|
||||||
:key="song.id"
|
|
||||||
class="live-request-list-item"
|
|
||||||
:from="song.from as number"
|
|
||||||
:status="song.status as number"
|
|
||||||
:style="`height: ${itemHeight}px`"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="live-request-list-item-index"
|
|
||||||
:index="index + 1"
|
|
||||||
>
|
|
||||||
{{ index + 1 }}
|
|
||||||
</div>
|
|
||||||
<div class="live-request-list-item-song-name">
|
|
||||||
{{ song.songName }}
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
v-if="settings.showUserName"
|
|
||||||
class="live-request-list-item-name"
|
|
||||||
>
|
|
||||||
{{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
v-if="settings.showFanMadelInfo"
|
|
||||||
class="live-request-list-item-level"
|
|
||||||
:has-level="(song.user?.fans_medal_level ?? 0) > 0"
|
|
||||||
>
|
|
||||||
{{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<NDivider
|
|
||||||
v-if="isMoreThanContainer"
|
|
||||||
class="live-request-footer-divider"
|
|
||||||
style="margin: 10px 0 10px 0"
|
|
||||||
/>
|
/>
|
||||||
</Vue3Marquee>
|
<FreshRequestOBS
|
||||||
</template>
|
|
||||||
<div
|
|
||||||
v-else
|
v-else
|
||||||
style="position: relative; top: 20%"
|
:id="currentId"
|
||||||
>
|
:active="active"
|
||||||
<NEmpty
|
:visible="visible"
|
||||||
class="live-request-empty"
|
v-bind="$attrs"
|
||||||
description="暂无人点播"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="settings.showRequireInfo"
|
|
||||||
ref="footerRef"
|
|
||||||
class="live-request-footer"
|
|
||||||
>
|
|
||||||
<Vue3Marquee
|
|
||||||
:key="key"
|
|
||||||
ref="footerListRef"
|
|
||||||
class="live-request-footer-marquee"
|
|
||||||
:duration="10"
|
|
||||||
animate-on-overflow-only
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="live-request-tag"
|
|
||||||
type="prefix"
|
|
||||||
>
|
|
||||||
<div class="live-request-tag-key">前缀</div>
|
|
||||||
<div class="live-request-tag-value">
|
|
||||||
{{ settings.orderPrefix }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="live-request-tag"
|
|
||||||
type="prefix"
|
|
||||||
>
|
|
||||||
<div class="live-request-tag-key">允许</div>
|
|
||||||
<div class="live-request-tag-value">
|
|
||||||
{{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join(',') : '无' }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="live-request-tag"
|
|
||||||
type="sc"
|
|
||||||
>
|
|
||||||
<div class="live-request-tag-key">SC点歌</div>
|
|
||||||
<div class="live-request-tag-value">
|
|
||||||
{{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="live-request-tag"
|
|
||||||
type="fan-madel"
|
|
||||||
>
|
|
||||||
<div class="live-request-tag-key">粉丝牌</div>
|
|
||||||
<div class="live-request-tag-value">
|
|
||||||
{{
|
|
||||||
settings.needWearFanMedal
|
|
||||||
? settings.fanMedalMinLevel > 0
|
|
||||||
? '> ' + settings.fanMedalMinLevel
|
|
||||||
: '佩戴'
|
|
||||||
: '无需'
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</Vue3Marquee>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.live-request-background {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100px;
|
|
||||||
min-width: 100px;
|
|
||||||
background-color: #0f0f0f48;
|
|
||||||
border-radius: 10px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-header {
|
|
||||||
margin: 0;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow:
|
|
||||||
0 0 10px #ca7b7b6e,
|
|
||||||
0 0 20px #ffffff8e,
|
|
||||||
0 0 30px #61606086,
|
|
||||||
0 0 40px rgba(64, 156, 179, 0.555);
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-header-count {
|
|
||||||
color: #ffffffbd;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-divider {
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: -15px;
|
|
||||||
margin-bottom: -15px;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-container {
|
|
||||||
height: 35px;
|
|
||||||
margin: 0 10px 0 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-empty {
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: italic;
|
|
||||||
color: #ffffffbe;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-prefix {
|
|
||||||
border: 2px solid rgb(231, 231, 231);
|
|
||||||
height: 30px;
|
|
||||||
width: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-container[singing='true'] .live-request-processing-prefix {
|
|
||||||
background-color: #75c37f;
|
|
||||||
animation: animated-border 3s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-container[singing='false'] .live-request-processing-prefix {
|
|
||||||
background-color: #c37575;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-avatar {
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
/* 添加无限旋转动画 */
|
|
||||||
animation: rotate 20s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 网页点歌 */
|
|
||||||
.live-request-processing-container[from='3'] .live-request-processing-avatar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-song-name {
|
|
||||||
font-size: large;
|
|
||||||
font-weight: bold;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-processing-name {
|
|
||||||
font-size: 12px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.n-divider__line {
|
|
||||||
background-color: #ffffffd5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-content {
|
|
||||||
background-color: #0f0f0f4f;
|
|
||||||
margin: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marquee {
|
|
||||||
justify-items: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-self: flex-start;
|
|
||||||
position: relative;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: left;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-song-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 手动添加 */
|
|
||||||
.live-request-list-item[from='0'] .live-request-list-item-name {
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #d2d8d6;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item[from='0'] .live-request-list-item-avatar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 弹幕点歌 */
|
|
||||||
.live-request-list-item[from='1'] {}
|
|
||||||
|
|
||||||
.live-request-list-item-name {
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(204, 204, 204, 0.993);
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-index {
|
|
||||||
text-align: center;
|
|
||||||
height: 18px;
|
|
||||||
padding: 2px;
|
|
||||||
min-width: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #0f0f0f48;
|
|
||||||
color: rgba(204, 204, 204, 0.993);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-level {
|
|
||||||
text-align: center;
|
|
||||||
height: 18px;
|
|
||||||
padding: 2px;
|
|
||||||
min-width: 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #0f0f0f48;
|
|
||||||
color: rgba(204, 204, 204, 0.993);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-level[has-level='false'] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-footer {
|
|
||||||
margin: 0 5px 5px 5px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #0f0f0f4f;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-tag {
|
|
||||||
display: flex;
|
|
||||||
margin: 5px 0 5px 5px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: #0f0f0f4f;
|
|
||||||
padding: 4px;
|
|
||||||
padding-right: 6px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-tag-key {
|
|
||||||
font-style: italic;
|
|
||||||
color: rgb(211, 211, 211);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-tag-value {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-index[index='1'] {
|
|
||||||
background-color: #ebc34c;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0 0 6px #ebc34c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-index[index='2'] {
|
|
||||||
background-color: #c0c0c0;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-request-list-item-index[index='3'] {
|
|
||||||
background-color: #b87333;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes animated-border {
|
|
||||||
0% {
|
|
||||||
box-shadow: 0 0 0px #589580;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
469
src/views/obs/live-request/ClassicRequestOBS.vue
Normal file
469
src/views/obs/live-request/ClassicRequestOBS.vue
Normal file
@@ -0,0 +1,469 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
SongRequestFrom,
|
||||||
|
SongRequestStatus,
|
||||||
|
} from '@/api/api-models'
|
||||||
|
import { useElementSize } from '@vueuse/core'
|
||||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { Vue3Marquee } from 'vue3-marquee'
|
||||||
|
import { NDivider, NEmpty } from 'naive-ui'
|
||||||
|
import { useLiveRequestData } from './useLiveRequestData'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
id?: number,
|
||||||
|
active?: boolean,
|
||||||
|
visible?: boolean,
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const currentId = computed(() => {
|
||||||
|
return props.id ?? route.query.id
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
songs,
|
||||||
|
settings,
|
||||||
|
singing,
|
||||||
|
activeSongs,
|
||||||
|
allowGuardTypes,
|
||||||
|
key,
|
||||||
|
update,
|
||||||
|
initRTC
|
||||||
|
} = useLiveRequestData(currentId.value?.toString() ?? '')
|
||||||
|
|
||||||
|
const cardRef = ref()
|
||||||
|
const listContainerRef = ref()
|
||||||
|
const { height, width } = useElementSize(listContainerRef)
|
||||||
|
const itemHeight = 40
|
||||||
|
|
||||||
|
const isMoreThanContainer = computed(() => {
|
||||||
|
return activeSongs.value.length * itemHeight > height.value
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
update()
|
||||||
|
initRTC()
|
||||||
|
|
||||||
|
window.$mitt.on('onOBSComponentUpdate', () => {
|
||||||
|
update()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.$mitt.off('onOBSComponentUpdate')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="cardRef"
|
||||||
|
class="live-request-background"
|
||||||
|
v-bind="$attrs"
|
||||||
|
>
|
||||||
|
<p class="live-request-header">
|
||||||
|
{{ settings.obsTitle ?? '点播' }}
|
||||||
|
</p>
|
||||||
|
<NDivider class="live-request-divider">
|
||||||
|
<p class="live-request-header-count">
|
||||||
|
已有 {{ activeSongs.length ?? 0 }} 条
|
||||||
|
</p>
|
||||||
|
</NDivider>
|
||||||
|
<div
|
||||||
|
class="live-request-processing-container"
|
||||||
|
:singing="songs.findIndex((s) => s.status == SongRequestStatus.Singing) > -1"
|
||||||
|
:from="singing?.from as number"
|
||||||
|
:status="singing?.status as number"
|
||||||
|
>
|
||||||
|
<div class="live-request-processing-prefix" />
|
||||||
|
<template v-if="singing">
|
||||||
|
<img
|
||||||
|
class="live-request-processing-avatar"
|
||||||
|
:src="singing?.user?.face"
|
||||||
|
referrerpolicy="no-referrer"
|
||||||
|
>
|
||||||
|
<p class="live-request-processing-song-name">
|
||||||
|
{{ singing?.songName }}
|
||||||
|
</p>
|
||||||
|
<p class="live-request-processing-name">
|
||||||
|
{{ singing?.user?.name }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="live-request-processing-empty"
|
||||||
|
>
|
||||||
|
暂无
|
||||||
|
</div>
|
||||||
|
<div class="live-request-processing-suffix" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref="listContainerRef"
|
||||||
|
class="live-request-content"
|
||||||
|
>
|
||||||
|
<template v-if="activeSongs.length > 0">
|
||||||
|
<Vue3Marquee
|
||||||
|
:key="key"
|
||||||
|
class="live-request-list"
|
||||||
|
vertical
|
||||||
|
:duration="20"
|
||||||
|
:pause="!isMoreThanContainer"
|
||||||
|
:style="`height: ${height}px;width: ${width}px;`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(song, index) in activeSongs"
|
||||||
|
:key="song.id"
|
||||||
|
class="live-request-list-item"
|
||||||
|
:from="song.from as number"
|
||||||
|
:status="song.status as number"
|
||||||
|
:style="`height: ${itemHeight}px`"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="live-request-list-item-index"
|
||||||
|
:index="index + 1"
|
||||||
|
>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="live-request-list-item-song-name">
|
||||||
|
{{ song.songName }}
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
v-if="settings.showUserName"
|
||||||
|
class="live-request-list-item-name"
|
||||||
|
>
|
||||||
|
{{ song.from == SongRequestFrom.Manual ? '主播添加' : song.user?.name }}
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
v-if="settings.showFanMadelInfo"
|
||||||
|
class="live-request-list-item-level"
|
||||||
|
:has-level="(song.user?.fans_medal_level ?? 0) > 0"
|
||||||
|
>
|
||||||
|
{{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NDivider
|
||||||
|
v-if="isMoreThanContainer"
|
||||||
|
class="live-request-footer-divider"
|
||||||
|
style="margin: 10px 0 10px 0"
|
||||||
|
/>
|
||||||
|
</Vue3Marquee>
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
style="position: relative; top: 20%"
|
||||||
|
>
|
||||||
|
<NEmpty
|
||||||
|
class="live-request-empty"
|
||||||
|
description="暂无人点播"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="settings.showRequireInfo"
|
||||||
|
ref="footerRef"
|
||||||
|
class="live-request-footer"
|
||||||
|
>
|
||||||
|
<Vue3Marquee
|
||||||
|
:key="key"
|
||||||
|
ref="footerListRef"
|
||||||
|
class="live-request-footer-marquee"
|
||||||
|
:duration="10"
|
||||||
|
animate-on-overflow-only
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="live-request-tag"
|
||||||
|
type="prefix"
|
||||||
|
>
|
||||||
|
<div class="live-request-tag-key">前缀</div>
|
||||||
|
<div class="live-request-tag-value">
|
||||||
|
{{ settings.orderPrefix }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="live-request-tag"
|
||||||
|
type="prefix"
|
||||||
|
>
|
||||||
|
<div class="live-request-tag-key">允许</div>
|
||||||
|
<div class="live-request-tag-value">
|
||||||
|
{{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join(',') : '无' }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="live-request-tag"
|
||||||
|
type="sc"
|
||||||
|
>
|
||||||
|
<div class="live-request-tag-key">SC点歌</div>
|
||||||
|
<div class="live-request-tag-value">
|
||||||
|
{{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="live-request-tag"
|
||||||
|
type="fan-madel"
|
||||||
|
>
|
||||||
|
<div class="live-request-tag-key">粉丝牌</div>
|
||||||
|
<div class="live-request-tag-value">
|
||||||
|
{{
|
||||||
|
settings.needWearFanMedal
|
||||||
|
? settings.fanMedalMinLevel > 0
|
||||||
|
? '> ' + settings.fanMedalMinLevel
|
||||||
|
: '佩戴'
|
||||||
|
: '无需'
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</Vue3Marquee>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.live-request-background {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
min-width: 100px;
|
||||||
|
background-color: #0f0f0f48;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-header {
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow:
|
||||||
|
0 0 10px #ca7b7b6e,
|
||||||
|
0 0 20px #ffffff8e,
|
||||||
|
0 0 30px #61606086,
|
||||||
|
0 0 40px rgba(64, 156, 179, 0.555);
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-header-count {
|
||||||
|
color: #ffffffbd;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-divider {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -15px;
|
||||||
|
margin-bottom: -15px;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-container {
|
||||||
|
height: 35px;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-empty {
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
color: #ffffffbe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-prefix {
|
||||||
|
border: 2px solid rgb(231, 231, 231);
|
||||||
|
height: 30px;
|
||||||
|
width: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-container[singing='true'] .live-request-processing-prefix {
|
||||||
|
background-color: #75c37f;
|
||||||
|
animation: animated-border 3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-container[singing='false'] .live-request-processing-prefix {
|
||||||
|
background-color: #c37575;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-avatar {
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: rotate 20s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 网页点歌 */
|
||||||
|
.live-request-processing-container[from='3'] .live-request-processing-avatar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-song-name {
|
||||||
|
font-size: large;
|
||||||
|
font-weight: bold;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-processing-name {
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.n-divider__line {
|
||||||
|
background-color: #ffffffd5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-content {
|
||||||
|
background-color: #0f0f0f4f;
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee {
|
||||||
|
justify-items: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-self: flex-start;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: left;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-song-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手动添加 */
|
||||||
|
.live-request-list-item[from='0'] .live-request-list-item-name {
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #d2d8d6;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item[from='0'] .live-request-list-item-avatar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹幕点歌 */
|
||||||
|
.live-request-list-item[from='1'] {}
|
||||||
|
|
||||||
|
.live-request-list-item-name {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(204, 204, 204, 0.993);
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-index {
|
||||||
|
text-align: center;
|
||||||
|
height: 18px;
|
||||||
|
padding: 2px;
|
||||||
|
min-width: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #0f0f0f48;
|
||||||
|
color: rgba(204, 204, 204, 0.993);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-level {
|
||||||
|
text-align: center;
|
||||||
|
height: 18px;
|
||||||
|
padding: 2px;
|
||||||
|
min-width: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #0f0f0f48;
|
||||||
|
color: rgba(204, 204, 204, 0.993);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-level[has-level='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-footer {
|
||||||
|
margin: 0 5px 5px 5px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #0f0f0f4f;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-tag {
|
||||||
|
display: flex;
|
||||||
|
margin: 5px 0 5px 5px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #0f0f0f4f;
|
||||||
|
padding: 4px;
|
||||||
|
padding-right: 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-tag-key {
|
||||||
|
font-style: italic;
|
||||||
|
color: rgb(211, 211, 211);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-tag-value {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-index[index='1'] {
|
||||||
|
background-color: #ebc34c;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0 0 6px #ebc34c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-index[index='2'] {
|
||||||
|
background-color: #c0c0c0;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-request-list-item-index[index='3'] {
|
||||||
|
background-color: #b87333;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes animated-border {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0px #589580;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
607
src/views/obs/live-request/FreshRequestOBS.vue
Normal file
607
src/views/obs/live-request/FreshRequestOBS.vue
Normal file
@@ -0,0 +1,607 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { SongRequestFrom, SongRequestStatus } from '@/api/api-models'
|
||||||
|
import { useElementSize } from '@vueuse/core'
|
||||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
// Remove Vue3Marquee import if no longer needed elsewhere
|
||||||
|
// import { Vue3Marquee } from 'vue3-marquee'
|
||||||
|
import { NDivider, NEmpty, NBadge, NAvatar, NTag } from 'naive-ui'
|
||||||
|
import { useLiveRequestData } from './useLiveRequestData'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
id?: number,
|
||||||
|
active?: boolean,
|
||||||
|
visible?: boolean,
|
||||||
|
speedMultiplier?: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const currentId = computed(() => {
|
||||||
|
return props.id ?? route.query.id
|
||||||
|
})
|
||||||
|
|
||||||
|
// Read speed: prioritize prop, then query parameter, default to 1
|
||||||
|
const speedMultiplier = computed(() => {
|
||||||
|
if (props.speedMultiplier !== undefined && props.speedMultiplier > 0) {
|
||||||
|
return props.speedMultiplier
|
||||||
|
}
|
||||||
|
const speedParam = route.query.speed
|
||||||
|
const speed = parseFloat(speedParam?.toString() ?? '1')
|
||||||
|
return isNaN(speed) || speed <= 0 ? 1 : speed
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
songs,
|
||||||
|
settings,
|
||||||
|
singing,
|
||||||
|
activeSongs,
|
||||||
|
allowGuardTypes,
|
||||||
|
key,
|
||||||
|
update,
|
||||||
|
initRTC
|
||||||
|
} = useLiveRequestData(currentId.value?.toString() ?? '')
|
||||||
|
|
||||||
|
const containerRef = ref()
|
||||||
|
const listContainerRef = ref()
|
||||||
|
const { height, width } = useElementSize(listContainerRef)
|
||||||
|
// const itemHeight = 55 // Remove hardcoded itemHeight
|
||||||
|
const itemMarginBottom = 8 // 项目底部外边距
|
||||||
|
|
||||||
|
// Ref for the inner list wrapper to measure its height
|
||||||
|
const songListInnerRef = ref<HTMLElement | null>(null)
|
||||||
|
const { height: innerListHeight } = useElementSize(songListInnerRef)
|
||||||
|
|
||||||
|
// Calculate total content height including the margin of the last item
|
||||||
|
const totalContentHeightWithLastMargin = computed(() => {
|
||||||
|
const count = activeSongs.value.length
|
||||||
|
if (count === 0 || innerListHeight.value <= 0) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
// The measured innerListHeight includes all item heights and (count - 1) margins.
|
||||||
|
// Add the last item's margin for the true total height.
|
||||||
|
return innerListHeight.value + itemMarginBottom
|
||||||
|
})
|
||||||
|
|
||||||
|
const isMoreThanContainer = computed(() => {
|
||||||
|
// Compare total content height with container height
|
||||||
|
return totalContentHeightWithLastMargin.value > height.value
|
||||||
|
})
|
||||||
|
|
||||||
|
// Computed property for animation translateY value
|
||||||
|
const animationTranslateY = computed(() => {
|
||||||
|
if (!isMoreThanContainer.value || height.value <= 0) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
// Target Y = container height - total content height (including last margin)
|
||||||
|
return height.value - totalContentHeightWithLastMargin.value
|
||||||
|
})
|
||||||
|
const animationTranslateYCss = computed(() => `${animationTranslateY.value}px`)
|
||||||
|
|
||||||
|
// Computed property for animation duration, adjusted by speedMultiplier
|
||||||
|
const animationDuration = computed(() => {
|
||||||
|
// Calculate base duration (e.g., 1 second per song - reduced from 2)
|
||||||
|
const baseDuration = activeSongs.value.length * 1
|
||||||
|
// Adjust duration based on multiplier (faster speed = shorter duration)
|
||||||
|
const adjustedDuration = baseDuration / speedMultiplier.value
|
||||||
|
// Ensure minimum duration to prevent issues
|
||||||
|
return Math.max(adjustedDuration, 1) // Minimum 1 second duration
|
||||||
|
})
|
||||||
|
const animationDurationCss = computed(() => `${animationDuration.value}s`)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
update()
|
||||||
|
initRTC()
|
||||||
|
|
||||||
|
window.$mitt.on('onOBSComponentUpdate', () => {
|
||||||
|
update()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.$mitt.off('onOBSComponentUpdate')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="containerRef"
|
||||||
|
class="fresh-request-container"
|
||||||
|
v-bind="$attrs"
|
||||||
|
>
|
||||||
|
<div class="fresh-request-header">
|
||||||
|
<h2 class="fresh-request-title">
|
||||||
|
{{ settings.obsTitle ?? '歌曲点播' }}
|
||||||
|
</h2>
|
||||||
|
<span class="fresh-request-count">队列中 {{ activeSongs.length ?? 0 }} 首</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 当前演唱区域 -->
|
||||||
|
<div class="fresh-request-now-playing">
|
||||||
|
<div
|
||||||
|
class="fresh-request-now-playing-indicator"
|
||||||
|
:class="{ 'is-playing': singing }"
|
||||||
|
/>
|
||||||
|
<div class="fresh-request-now-playing-content">
|
||||||
|
<template v-if="singing">
|
||||||
|
<div class="fresh-request-now-playing-info">
|
||||||
|
<div
|
||||||
|
class="fresh-request-song-title"
|
||||||
|
:title="singing.songName"
|
||||||
|
>
|
||||||
|
{{ singing.songName }}
|
||||||
|
</div>
|
||||||
|
<div class="fresh-request-song-user">
|
||||||
|
<img
|
||||||
|
v-if="singing.user?.face && singing.from !== SongRequestFrom.Manual"
|
||||||
|
class="fresh-request-user-avatar"
|
||||||
|
:src="singing.user.face"
|
||||||
|
referrerpolicy="no-referrer"
|
||||||
|
>
|
||||||
|
<span class="fresh-request-user-name">{{ singing.from === SongRequestFrom.Manual ? '主播添加' : singing.user?.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="fresh-request-no-song"
|
||||||
|
>
|
||||||
|
当前暂无演唱
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 点播列表 -->
|
||||||
|
<div
|
||||||
|
ref="listContainerRef"
|
||||||
|
class="fresh-request-list-container"
|
||||||
|
>
|
||||||
|
<template v-if="activeSongs.length > 0">
|
||||||
|
<!-- Removed Vue3Marquee -->
|
||||||
|
<!-- Add a wrapper div for animation -->
|
||||||
|
<div
|
||||||
|
ref="songListInnerRef"
|
||||||
|
class="fresh-request-song-list-inner"
|
||||||
|
:class="{ animating: isMoreThanContainer }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(song, index) in activeSongs"
|
||||||
|
:key="song.id"
|
||||||
|
class="fresh-request-song-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="fresh-request-song-rank"
|
||||||
|
:class="[`rank-${index + 1}`, { 'rank-top-3': index < 3 }]"
|
||||||
|
>
|
||||||
|
{{ index + 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="fresh-request-song-content">
|
||||||
|
<div
|
||||||
|
class="fresh-request-song-name"
|
||||||
|
:title="song.songName"
|
||||||
|
>
|
||||||
|
{{ song.songName }}
|
||||||
|
</div>
|
||||||
|
<div class="fresh-request-song-footer">
|
||||||
|
<span
|
||||||
|
v-if="settings.showUserName"
|
||||||
|
class="fresh-request-song-requester"
|
||||||
|
>
|
||||||
|
<span class="requester-label">点歌:</span> {{ song.from === SongRequestFrom.Manual ? '主播' : song.user?.name }}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="settings.showFanMadelInfo && (song.user?.fans_medal_level ?? 0) > 0"
|
||||||
|
class="fresh-request-song-medal"
|
||||||
|
>
|
||||||
|
{{ song.user?.fans_medal_name }} {{ song.user?.fans_medal_level }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End animation wrapper -->
|
||||||
|
</template>
|
||||||
|
<NEmpty
|
||||||
|
v-else
|
||||||
|
description="队列空空如也~"
|
||||||
|
class="fresh-request-empty"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 点播要求信息 -->
|
||||||
|
<div
|
||||||
|
v-if="settings.showRequireInfo"
|
||||||
|
class="fresh-request-info"
|
||||||
|
>
|
||||||
|
<div class="fresh-request-info-tags">
|
||||||
|
<NTag
|
||||||
|
class="fresh-request-info-tag"
|
||||||
|
:bordered="false"
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
前缀: {{ settings.orderPrefix }}
|
||||||
|
</NTag>
|
||||||
|
<NTag
|
||||||
|
class="fresh-request-info-tag"
|
||||||
|
:bordered="false"
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
允许: {{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join('/') : '无' }}
|
||||||
|
</NTag>
|
||||||
|
<NTag
|
||||||
|
class="fresh-request-info-tag"
|
||||||
|
:bordered="false"
|
||||||
|
type="success"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
SC点歌: {{ settings.allowSC ? `≥ ¥${settings.scMinPrice}` : '否' }}
|
||||||
|
</NTag>
|
||||||
|
<NTag
|
||||||
|
class="fresh-request-info-tag"
|
||||||
|
:bordered="false"
|
||||||
|
type="warning"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
粉丝牌: {{ settings.needWearFanMedal ? (settings.fanMedalMinLevel > 0 ? `≥ ${settings.fanMedalMinLevel}级` : '佩戴') : '无需' }}
|
||||||
|
</NTag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 基础样式与容器 */
|
||||||
|
.fresh-request-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 150px; /* 增加最小高度 */
|
||||||
|
min-width: 250px; /* 增加最小宽度 */
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 250, 0.85) 100%);
|
||||||
|
border-radius: 16px; /* 更大的圆角 */
|
||||||
|
color: #333;
|
||||||
|
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; /* 优先使用中文字体 */
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05); /* 添加细边框 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 头部 */
|
||||||
|
.fresh-request-header {
|
||||||
|
padding: 10px 16px; /* 调整内边距 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6); /* 更透明的背景 */
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* 更细的边框 */
|
||||||
|
flex-shrink: 0; /* 防止头部被压缩 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px; /* 调整字体大小 */
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1e293b; /* 深蓝灰色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-count {
|
||||||
|
font-size: 12px; /* 调整字体大小 */
|
||||||
|
color: #475569; /* 蓝灰色 */
|
||||||
|
background-color: rgba(226, 232, 240, 0.7); /* 半透明背景 */
|
||||||
|
padding: 4px 10px; /* 调整内边距 */
|
||||||
|
border-radius: 16px; /* 全圆角 */
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当前演唱区域 */
|
||||||
|
.fresh-request-now-playing {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px; /* 增加内边距 */
|
||||||
|
background-color: rgba(255, 255, 255, 0.5); /* 更透明 */
|
||||||
|
margin: 10px 12px; /* 调整外边距 */
|
||||||
|
border-radius: 12px; /* 调整圆角 */
|
||||||
|
gap: 10px; /* 调整间距 */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
|
flex-shrink: 0; /* 防止被压缩 */
|
||||||
|
transition: all 0.3s ease; /* Add transition for smoother changes */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make "Now Playing" more prominent when singing */
|
||||||
|
.fresh-request-now-playing:has(.is-playing) {
|
||||||
|
background-color: rgba(236, 253, 245, 0.9); /* Lighter green background */
|
||||||
|
border-color: rgba(16, 185, 129, 0.3);
|
||||||
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-now-playing-indicator {
|
||||||
|
width: 8px; /* 缩小尺寸 */
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #cbd5e1; /* 默认灰色 */
|
||||||
|
position: relative;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-now-playing-indicator.is-playing {
|
||||||
|
background-color: #10b981; /* 绿色 */
|
||||||
|
/* 替换为更柔和的呼吸动画 */
|
||||||
|
animation: breathe 1.8s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make title bolder/larger when playing */
|
||||||
|
.fresh-request-now-playing:has(.is-playing) .fresh-request-song-title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px; /* Slightly larger font */
|
||||||
|
color: #065f46; /* Darker green */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: slightly emphasize user name when playing */
|
||||||
|
.fresh-request-now-playing:has(.is-playing) .fresh-request-song-user {
|
||||||
|
color: #047857;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes breathe {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 3px rgba(16, 185, 129, 0.2);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-now-playing-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0; /* 防止内容溢出 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-now-playing-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px; /* 调整信息间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-title {
|
||||||
|
font-size: 15px; /* 调整字体大小 */
|
||||||
|
font-weight: 600;
|
||||||
|
color: #0f172a; /* 更深的颜色 */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-user {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #64748b; /* 保持灰色 */
|
||||||
|
gap: 5px; /* 调整头像和名字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-user-avatar {
|
||||||
|
width: 18px; /* 稍大一点的头像 */
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05); /* 头像边框 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-user-name {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-no-song {
|
||||||
|
font-size: 13px; /* 调整字体大小 */
|
||||||
|
font-style: normal; /* 去掉斜体 */
|
||||||
|
color: #94a3b8; /* 浅灰色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 歌曲列表 */
|
||||||
|
.fresh-request-list-container {
|
||||||
|
flex: 1; /* 占据剩余空间 */
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 12px; /* 调整左右内边距 */
|
||||||
|
margin-bottom: 8px;
|
||||||
|
position: relative; /* 为空状态居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px; /* 列表项间距 */
|
||||||
|
background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
|
||||||
|
border-radius: 10px; /* 调整圆角 */
|
||||||
|
padding: 8px 10px; /* 调整内边距 */
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); /* 更细微的阴影 */
|
||||||
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-item:hover {
|
||||||
|
background-color: rgba(248, 250, 252, 0.9); /* 悬停背景色 */
|
||||||
|
transform: translateY(-1px); /* 轻微上移 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 前三名条目特殊样式 */
|
||||||
|
.fresh-request-song-item:has(.rank-1) {
|
||||||
|
border-left: 3px solid #fbbf24; /* 金色左边框 */
|
||||||
|
background-color: rgba(252, 237, 174, 0.15); /* 淡淡的金色背景 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-item:has(.rank-2) {
|
||||||
|
border-left: 3px solid #cbd5e1; /* 银色左边框 */
|
||||||
|
background-color: rgba(203, 213, 225, 0.25); /* 调整银色背景透明度，使其更明显 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-item:has(.rank-3) {
|
||||||
|
border-left: 3px solid #d97706; /* 铜色左边框 */
|
||||||
|
background-color: rgba(251, 211, 141, 0.15); /* 淡淡的铜色背景 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-rank {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 22px; /* 调整尺寸 */
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 50%; /* 圆形排名 */
|
||||||
|
background-color: #f1f5f9; /* 默认浅灰背景 */
|
||||||
|
color: #64748b; /* 默认字体颜色 */
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px; /* 调整字体大小 */
|
||||||
|
margin-right: 10px; /* 调整右边距 */
|
||||||
|
flex-shrink: 0;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 前三名特殊样式 */
|
||||||
|
.fresh-request-song-rank.rank-top-3 {
|
||||||
|
color: #ffffff; /* 白色字体 */
|
||||||
|
font-weight: 700;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.fresh-request-song-rank.rank-1 {
|
||||||
|
background: linear-gradient(135deg, #fcd34d, #fbbf24); /* 金色渐变 */
|
||||||
|
box-shadow: 0 1px 3px rgba(180, 83, 9, 0.3);
|
||||||
|
}
|
||||||
|
.fresh-request-song-rank.rank-2 {
|
||||||
|
background: linear-gradient(135deg, #e2e8f0, #cbd5e1); /* 银色渐变 */
|
||||||
|
color: #334155; /* 深色字体 */
|
||||||
|
box-shadow: 0 1px 3px rgba(100, 116, 139, 0.2);
|
||||||
|
}
|
||||||
|
.fresh-request-song-rank.rank-3 {
|
||||||
|
background: linear-gradient(135deg, #f9a825, #d97706); /* 铜色渐变 */
|
||||||
|
box-shadow: 0 1px 3px rgba(146, 64, 14, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center; /* 垂直居中 */
|
||||||
|
overflow: hidden;
|
||||||
|
gap: 3px; /* 内容上下间距 */
|
||||||
|
min-width: 0; /* 确保内容区能正确收缩 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-name {
|
||||||
|
font-size: 14px; /* 调整字体大小 */
|
||||||
|
font-weight: 500;
|
||||||
|
color: #334155; /* 深蓝灰色 */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
font-size: 11px; /* 缩小字体 */
|
||||||
|
color: #64748b; /* 灰色 */
|
||||||
|
gap: 6px; /* 调整元素间距 */
|
||||||
|
flex-wrap: wrap; /* 允许换行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-requester {
|
||||||
|
display: inline-flex; /* 使内部元素对齐 */
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.requester-label {
|
||||||
|
opacity: 0.7; /* 标签稍透明 */
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-medal {
|
||||||
|
background-color: rgba(226, 232, 240, 0.6); /* 更淡的背景 */
|
||||||
|
padding: 1px 5px; /* 调整内边距 */
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 10px; /* 保持小字体 */
|
||||||
|
font-weight: 500;
|
||||||
|
color: #475569; /* 调整颜色 */
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05); /* 添加细边框 */
|
||||||
|
white-space: nowrap; /* 防止换行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
.fresh-request-empty {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #a1a1aa; /* 更柔和的灰色 */
|
||||||
|
font-size: 13px;
|
||||||
|
position: absolute; /* 覆盖在列表容器上 */
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none; /* 不阻挡下方元素 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 点播要求信息 */
|
||||||
|
.fresh-request-info {
|
||||||
|
padding: 6px 12px; /* 调整内边距 */
|
||||||
|
background-color: rgba(248, 250, 252, 0.8); /* 半透明背景 */
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.06); /* 更细的边框 */
|
||||||
|
flex-shrink: 0; /* 防止被压缩 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-info-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px; /* 调整标签间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-info-tag {
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 给标签加点阴影 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条样式 (可选，美化) */
|
||||||
|
.fresh-request-list-container::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
.fresh-request-list-container::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.fresh-request-list-container::-webkit-scrollbar-track {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* New styles for CSS animation */
|
||||||
|
@keyframes vertical-ping-pong {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
/* Use the computed CSS variable for the target Y position */
|
||||||
|
transform: translateY(v-bind(animationTranslateYCss));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-list-inner {
|
||||||
|
/* Prevent interaction during animation unless hovered */
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fresh-request-song-list-inner.animating {
|
||||||
|
animation-name: vertical-ping-pong;
|
||||||
|
animation-duration: v-bind(animationDurationCss);
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate; /* This makes it go back and forth */
|
||||||
|
pointer-events: auto; /* Allow hover effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pause animation on hover */
|
||||||
|
.fresh-request-song-list-inner.animating:hover {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
126
src/views/obs/live-request/useLiveRequestData.ts
Normal file
126
src/views/obs/live-request/useLiveRequestData.ts
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
import {
|
||||||
|
QueueSortType,
|
||||||
|
Setting_LiveRequest,
|
||||||
|
SongRequestFrom,
|
||||||
|
SongRequestInfo,
|
||||||
|
SongRequestStatus,
|
||||||
|
} from '@/api/api-models'
|
||||||
|
import { QueryGetAPI } from '@/api/query'
|
||||||
|
import { SONG_REQUEST_API_URL } from '@/data/constants'
|
||||||
|
import { computed, ref, Ref } from 'vue'
|
||||||
|
import { List } from 'linqts'
|
||||||
|
import { useWebRTC } from '@/store/useRTC'
|
||||||
|
|
||||||
|
export function useLiveRequestData(currentId: string) {
|
||||||
|
const rtc = ref<any>(null)
|
||||||
|
const originSongs = ref<SongRequestInfo[]>([])
|
||||||
|
const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
|
||||||
|
const key = ref(Date.now())
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const songs = computed(() => {
|
||||||
|
let result = new List(originSongs.value)
|
||||||
|
switch (settings.value.sortType) {
|
||||||
|
case QueueSortType.TimeFirst: {
|
||||||
|
result = result.ThenBy((q) => q.createAt)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case QueueSortType.GuardFirst: {
|
||||||
|
result = result
|
||||||
|
.OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
|
||||||
|
.ThenBy((q) => q.createAt)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case QueueSortType.PaymentFist: {
|
||||||
|
result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case QueueSortType.FansMedalFirst: {
|
||||||
|
result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (settings.value.isReverse) {
|
||||||
|
return result.Reverse().ToArray()
|
||||||
|
} else {
|
||||||
|
return result.ToArray()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const singing = computed(() => {
|
||||||
|
return songs.value.find((s) => s.status == SongRequestStatus.Singing)
|
||||||
|
})
|
||||||
|
|
||||||
|
const activeSongs = computed(() => {
|
||||||
|
return songs.value.filter((s) => s.status == SongRequestStatus.Waiting)
|
||||||
|
})
|
||||||
|
|
||||||
|
const allowGuardTypes = computed(() => {
|
||||||
|
const types = []
|
||||||
|
if (settings.value.needTidu) {
|
||||||
|
types.push('提督')
|
||||||
|
}
|
||||||
|
if (settings.value.needZongdu) {
|
||||||
|
types.push('总督')
|
||||||
|
}
|
||||||
|
if (settings.value.needJianzhang) {
|
||||||
|
types.push('舰长')
|
||||||
|
}
|
||||||
|
return types
|
||||||
|
})
|
||||||
|
|
||||||
|
// 数据获取方法
|
||||||
|
async function get() {
|
||||||
|
try {
|
||||||
|
const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
|
||||||
|
SONG_REQUEST_API_URL + 'get-active-and-settings',
|
||||||
|
{
|
||||||
|
id: currentId,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
if (data.code == 200) {
|
||||||
|
return data.data
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
songs: [],
|
||||||
|
setting: {} as Setting_LiveRequest,
|
||||||
|
} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
const r = await get()
|
||||||
|
if (r) {
|
||||||
|
const isCountChange = originSongs.value.length != r.songs.length
|
||||||
|
originSongs.value = r.songs.sort((a, b) => {
|
||||||
|
return b.createAt - a.createAt
|
||||||
|
})
|
||||||
|
settings.value = r.setting
|
||||||
|
if (isCountChange) {
|
||||||
|
key.value = Date.now()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// RTC初始化
|
||||||
|
async function initRTC() {
|
||||||
|
rtc.value = await useWebRTC().Init('slave')
|
||||||
|
// 接收点播结果消息
|
||||||
|
rtc.value.on('function.live-request.add', () => update())
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
originSongs,
|
||||||
|
songs,
|
||||||
|
settings,
|
||||||
|
singing,
|
||||||
|
activeSongs,
|
||||||
|
allowGuardTypes,
|
||||||
|
key,
|
||||||
|
get,
|
||||||
|
update,
|
||||||
|
initRTC
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -112,6 +112,8 @@ const isReverse = useStorage('SongRequest.Settings.Reverse', false)
|
|||||||
|
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
const showOBSModal = ref(false)
|
const showOBSModal = ref(false)
|
||||||
|
const obsStyleType = ref<'classic' | 'fresh'>('classic')
|
||||||
|
const obsScrollSpeedMultiplierRef = ref(1)
|
||||||
|
|
||||||
const settings = computed({
|
const settings = computed({
|
||||||
get: () => {
|
get: () => {
|
||||||
@@ -1619,12 +1621,54 @@ onUnmounted(() => {
|
|||||||
>
|
>
|
||||||
将等待队列以及结果显示在OBS中
|
将等待队列以及结果显示在OBS中
|
||||||
</NAlert>
|
</NAlert>
|
||||||
<NDivider> 浏览 </NDivider>
|
|
||||||
|
<NDivider>样式与速度</NDivider>
|
||||||
|
<NSpace align="center">
|
||||||
|
<NRadioGroup
|
||||||
|
v-model:value="obsStyleType"
|
||||||
|
name="obsStyle"
|
||||||
|
>
|
||||||
|
<NSpace>
|
||||||
|
<NRadioButton value="classic">
|
||||||
|
经典黑色风格
|
||||||
|
</NRadioButton>
|
||||||
|
<NRadioButton value="fresh">
|
||||||
|
清新明亮风格
|
||||||
|
</NRadioButton>
|
||||||
|
</NSpace>
|
||||||
|
</NRadioGroup>
|
||||||
|
<NInputGroup style="width: 200px">
|
||||||
|
<NInputGroupLabel>滚动速度倍率</NInputGroupLabel>
|
||||||
|
<NInputNumber
|
||||||
|
v-model:value="obsScrollSpeedMultiplierRef"
|
||||||
|
:min="0.5"
|
||||||
|
:max="5"
|
||||||
|
:step="0.1"
|
||||||
|
placeholder="1"
|
||||||
|
/>
|
||||||
|
</NInputGroup>
|
||||||
|
<NTooltip>
|
||||||
|
<template #trigger>
|
||||||
|
<NIcon :component="Info24Filled" />
|
||||||
|
</template>
|
||||||
|
数值越大滚动越快 (0.5 ~ 5)
|
||||||
|
</NTooltip>
|
||||||
|
</NSpace>
|
||||||
|
|
||||||
|
<NDivider>预览</NDivider>
|
||||||
<div style="height: 500px; width: 280px; position: relative; margin: 0 auto">
|
<div style="height: 500px; width: 280px; position: relative; margin: 0 auto">
|
||||||
<LiveRequestOBS :id="accountInfo?.id" />
|
<LiveRequestOBS
|
||||||
|
:id="accountInfo?.id"
|
||||||
|
:key="`${accountInfo?.id}-${obsStyleType}-${obsScrollSpeedMultiplierRef}`"
|
||||||
|
:style="obsStyleType"
|
||||||
|
:speed-multiplier="obsScrollSpeedMultiplierRef"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<NInput :value="`${CURRENT_HOST}obs/live-request?id=` + accountInfo?.id" />
|
<NInput
|
||||||
|
:value="`${CURRENT_HOST}obs/live-request?id=${accountInfo?.id ?? 0}&style=${obsStyleType}&speed=${obsScrollSpeedMultiplierRef}`"
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
<NDivider />
|
<NDivider />
|
||||||
<NCollapse>
|
<NCollapse>
|
||||||
<NCollapseItem title="使用说明">
|
<NCollapseItem title="使用说明">
|
||||||
@@ -1632,7 +1676,8 @@ onUnmounted(() => {
|
|||||||
<NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
|
<NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
|
||||||
<NLi>在 URL 栏填入上方链接</NLi>
|
<NLi>在 URL 栏填入上方链接</NLi>
|
||||||
<NLi>根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px)</NLi>
|
<NLi>根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px)</NLi>
|
||||||
<NLi>完事</NLi>
|
<NLi>样式可选"经典黑色风格"或"清新明亮风格"</NLi>
|
||||||
|
<NLi>使用URL中的style参数可以切换不同样式</NLi>
|
||||||
</NUl>
|
</NUl>
|
||||||
</NCollapseItem>
|
</NCollapseItem>
|
||||||
</NCollapse>
|
</NCollapse>
|
||||||
|
|||||||
Reference in New Issue
Block a user