update function(queue, liverequest)

This commit is contained in:
2024-04-14 14:48:18 +08:00
parent 129dff1db1
commit cbd2748c71
6 changed files with 246 additions and 57 deletions

View File

@@ -113,6 +113,7 @@ export interface UserSetting {
}
export interface Setting_LiveRequest {
orderPrefix: string
sortType?: QueueSortType
enableOnStreaming: boolean
onlyAllowSongList: boolean
queueMaxSize: number
@@ -133,6 +134,14 @@ export interface Setting_LiveRequest {
tiduCooldownSecond: number
jianzhangCooldownSecond: number
allowGift: boolean
giftNames?: string[]
minGiftPrice?: number
giftFilterType: QueueGiftFilterType
allowIncreasePaymentBySendGift: boolean
allowIncreaseByAnyPayment: boolean
sendGiftIgnoreLimit: boolean
showRequireInfo: boolean
showUserName: boolean
showFanMadelInfo: boolean
@@ -160,6 +169,8 @@ export interface Setting_Queue {
giftFilterType: QueueGiftFilterType
allowIncreasePaymentBySendGift: boolean
allowIncreaseByAnyPayment: boolean
sendGiftDirectJoin: boolean
sendGiftIgnoreLimit: boolean
enableCooldown: boolean
cooldownSecond: number
@@ -443,7 +454,7 @@ export interface SongRequestInfo {
song?: SongsInfo
status: SongRequestStatus
from: SongRequestFrom
scPrice?: number
price?: number
user?: DanmakuUserInfo
createAt: number
finishAt?: number
@@ -463,6 +474,7 @@ export enum SongRequestFrom {
Danmaku,
SC,
Web,
Gift
}
export enum QueueFrom {
Manual,

View File

@@ -1,5 +1,11 @@
<script setup lang="ts">
import { Setting_LiveRequest, SongRequestFrom, SongRequestInfo, SongRequestStatus } from '@/api/api-models'
import {
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'
@@ -7,6 +13,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Vue3Marquee } from 'vue3-marquee'
import { NCard, NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
import { List } from 'linqts'
const props = defineProps<{
id?: number
@@ -19,30 +26,45 @@ const currentId = computed(() => {
})
const listContainerRef = ref()
const footerRef = ref()
const footerListRef = ref()
const { height, width } = useElementSize(listContainerRef)
const footerSize = useElementSize(footerRef)
const footerListSize = useElementSize(footerListRef)
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).ThenBy((q) => q.createAt)
break
}
case QueueSortType.PaymentFist: {
result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
}
}
if (settings.value.isReverse) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
return originSongs.value.reverse()
return result.Reverse().ToArray()
} else {
return originSongs.value
return result.ToArray()
}
})
const isMoreThanContainer = computed(() => {
return songs.value.length * itemHeight > height.value
})
const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
const singing = computed(() => {
return originSongs.value.find((s) => s.status == SongRequestStatus.Singing)
return songs.value.find((s) => s.status == SongRequestStatus.Singing)
})
const activeSongs = computed(() => {
return originSongs.value.filter((s) => s.status == SongRequestStatus.Waiting)
return songs.value.filter((s) => s.status == SongRequestStatus.Waiting)
})
async function get() {
@@ -59,9 +81,6 @@ async function get() {
} catch (err) {}
return {} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
}
const isMoreThanContainer = computed(() => {
return originSongs.value.length * itemHeight > height.value
})
const allowGuardTypes = computed(() => {
const types = []
if (settings.value.needTidu) {
@@ -90,6 +109,8 @@ async function update() {
}
}
const direction = ref<'normal' | 'reverse'>('normal')
const visiable = ref(true)
const active = ref(true)
let timer: any
@@ -138,17 +159,17 @@ onUnmounted(() => {
<div v-else class="live-request-processing-empty">暂无</div>
<div class="live-request-processing-suffix"></div>
</div>
<div class="live-request-content" ref="listContainerRef">
<div class="live-request-content" ref="listContainerRef">
<template v-if="activeSongs.length > 0">
<Vue3Marquee
class="live-request-list"
:key="key"
vertical
:pause="!isMoreThanContainer"
:duration="20"
:pause="!isMoreThanContainer"
:style="`height: ${height}px;width: ${width}px;`"
>
<span
<div
class="live-request-list-item"
:from="song.from as number"
:status="song.status as number"
@@ -172,7 +193,8 @@ onUnmounted(() => {
>
{{ `${song.user?.fans_medal_name} ${song.user?.fans_medal_level}` }}
</div>
</span>
</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%">
@@ -184,8 +206,8 @@ onUnmounted(() => {
:key="key"
ref="footerListRef"
class="live-request-footer-marquee"
:pause="footerSize.width < footerListSize.width"
:duration="20"
:duration="10"
animate-on-overflow-only
>
<span class="live-request-tag" type="prefix">
<div class="live-request-tag-key">前缀</div>
@@ -216,8 +238,8 @@ onUnmounted(() => {
: '无需'
}}
</div>
</span></Vue3Marquee
>
</span>
</Vue3Marquee>
</div>
</div>
</template>
@@ -418,6 +440,22 @@ onUnmounted(() => {
.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;

View File

@@ -115,12 +115,15 @@ onMounted(() => {
timer = setInterval(update, 2000)
//@ts-expect-error 这里获取不了
window.obsstudio.onVisibilityChange = function (visibility: boolean) {
visiable.value = visibility
}
//@ts-expect-error 这里获取不了
window.obsstudio.onActiveChange = function (a: boolean) {
active.value = a
if (window.obsstudio) {
//@ts-expect-error 这里获取不了
window.obsstudio.onVisibilityChange = function (visibility: boolean) {
visiable.value = visibility
}
//@ts-expect-error 这里获取不了
window.obsstudio.onActiveChange = function (a: boolean) {
active.value = a
}
}
})
onUnmounted(() => {
@@ -186,6 +189,8 @@ onUnmounted(() => {
}}
</p>
</span>
<NDivider v-if="isMoreThanContainer" class="queue-footer-divider" style="margin: 10px 0 10px 0" />
</Vue3Marquee>
</template>
<div v-else style="position: relative; top: 20%">
@@ -241,8 +246,8 @@ onUnmounted(() => {
: '无需'
}}
</div>
</span></Vue3Marquee
>
</span>
</Vue3Marquee>
</div>
</div>
</template>
@@ -399,14 +404,22 @@ onUnmounted(() => {
color: rgba(204, 204, 204, 0.993);
font-size: 12px;
}
.queue-list-item-index[index='1'] {
color: #ebc34c;
background-color: #ebc34c;
color: white;
font-weight: bold;
text-shadow: 0 0 6px #ebc34c;
}
.queue-list-item-index[index='2'] {
color: #c0c0c0;
background-color: #c0c0c0;
color: white;
font-weight: bold;
}
.queue-list-item-index[index='3'] {
color: #b87333;
background-color: #b87333;
color: white;
font-weight: bold;
}
.queue-list-item-level {
text-align: center;

View File

@@ -10,6 +10,8 @@ import {
SongRequestInfo,
SongRequestStatus,
SongsInfo,
QueueGiftFilterType,
QueueSortType,
} from '@/api/api-models'
import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
import SongPlayer from '@/components/SongPlayer.vue'
@@ -50,6 +52,9 @@ import {
NListItem,
NModal,
NPopconfirm,
NRadioButton,
NRadioGroup,
NSelect,
NSpace,
NSpin,
NSwitch,
@@ -133,30 +138,44 @@ const props = defineProps<{
const localActiveSongs = useStorage('SongRequest.ActiveSongs', [] as SongRequestInfo[])
const originSongs = ref<SongRequestInfo[]>(await getAllSong())
const songs = computed(() => {
const result = originSongs.value.filter((s) => {
let result = new List(originSongs.value).Where((s) => {
if (filterName.value) {
if (filterNameContains.value) {
if (!s.user?.name.toLowerCase().includes(filterName.value.toLowerCase())) {
if (!s?.user?.name.toLowerCase().includes(filterName.value.toLowerCase())) {
return false
}
} else if (s.user?.name.toLowerCase() !== filterName.value.toLowerCase()) {
} else if (s?.user?.name.toLowerCase() !== filterName.value.toLowerCase()) {
return false
}
} else if (filterSongName.value) {
if (filterSongNameContains.value) {
if (!s.songName.toLowerCase().includes(filterSongName.value.toLowerCase())) {
if (!s?.songName.toLowerCase().includes(filterSongName.value.toLowerCase())) {
return false
}
} else if (s.songName.toLowerCase() !== filterSongName.value.toLowerCase()) {
} else if (s?.songName.toLowerCase() !== filterSongName.value.toLowerCase()) {
return false
}
}
return true
})
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).ThenBy((q) => q.createAt)
break
}
case QueueSortType.PaymentFist: {
result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
}
}
console.log(settings.value.sortType)
if (configCanEdit.value ? settings.value.isReverse : isReverse.value) {
return result.reverse()
return result.Reverse().ToArray()
} else {
return result
return result.ToArray()
}
})
const activeSongs = computed(() => {
@@ -400,7 +419,7 @@ async function updateSettings() {
await QueryPostAPI(SONG_REQUEST_API_URL + 'update-setting', settings.value)
.then((data) => {
if (data.code == 200) {
message.success('已保存')
//message.success('已保存')
} else {
message.error('保存失败: ' + data.message)
}
@@ -490,7 +509,7 @@ const columns = [
title: '来自',
key: 'from',
render(data) {
let fromType: 'info' | 'success' | 'default' | 'error'
let fromType: 'info' | 'success' | 'default' | 'error' = 'info'
switch (data.from) {
case SongRequestFrom.Danmaku: {
fromType = 'info'
@@ -515,7 +534,10 @@ const columns = [
return '弹幕'
}
case SongRequestFrom.SC: {
return 'SuperChat | ' + data.scPrice
return 'SuperChat | ' + data.price
}
case SongRequestFrom.Gift: {
return '礼物 | ' + data.price
}
case SongRequestFrom.Manual: {
return '手动添加'
@@ -815,6 +837,16 @@ onUnmounted(() => {
<NInput placeholder="手动添加" v-model:value="newSongName" />
<NButton type="primary" @click="addSongManual"> 添加 </NButton>
</NInputGroup>
<!-- <NRadioGroup
v-model:value="settings.sortType"
:disabled="!configCanEdit"
@update:value="updateSettings"
type="button"
>
<NRadioButton :value="QueueSortType.TimeFirst"> 加入时间优先 </NRadioButton>
<NRadioButton :value="QueueSortType.PaymentFist"> 付费价格优先 </NRadioButton>
<NRadioButton :value="QueueSortType.GuardFirst"> 舰长优先 (按等级) </NRadioButton>
</NRadioGroup> -->
<NCheckbox v-if="configCanEdit" v-model:checked="settings.isReverse" @update:checked="updateSettings">
倒序
</NCheckbox>
@@ -893,9 +925,16 @@ onUnmounted(() => {
<NTag
v-if="song.from == SongRequestFrom.SC"
size="small"
:color="{ textColor: 'white', color: GetSCColor(song.scPrice ?? 0) }"
:color="{ textColor: 'white', color: GetSCColor(song.price ?? 0) }"
>
SC | {{ song.scPrice }}
SC | {{ song.price }}
</NTag>
<NTag
v-if="song.from == SongRequestFrom.Gift"
size="small"
:color="{ textColor: 'white', color: GetSCColor(song.price ?? 0) }"
>
Gift | {{ song.price }}
</NTag>
<NTooltip>
<template #trigger>
@@ -1051,15 +1090,17 @@ onUnmounted(() => {
<NSpin :show="isLoading">
<NDivider> 规则 </NDivider>
<NSpace vertical>
<NInputGroup style="width: 250px">
<NInputGroupLabel> 点播弹幕前缀 </NInputGroupLabel>
<template v-if="configCanEdit">
<NInput v-model:value="settings.orderPrefix" />
<NButton @click="updateSettings" type="primary">确定</NButton>
</template>
<NInput v-else v-model:value="defaultPrefix" />
</NInputGroup>
<NSpace align="center">
<NInputGroup style="width: 250px">
<NInputGroupLabel> 点播弹幕前缀 </NInputGroupLabel>
<template v-if="configCanEdit">
<NInput v-model:value="settings.orderPrefix" />
<NButton @click="updateSettings" type="primary">确定</NButton>
</template>
<NInput v-else v-model:value="defaultPrefix" />
</NInputGroup>
<NAlert v-if="settings.orderPrefix.includes(' ')" type="info"> 前缀包含空格 </NAlert>
</NSpace>
<NInputGroup style="width: 250px">
<NInputGroupLabel> 最大队列长度 </NInputGroupLabel>
<NInputNumber v-model:value="settings.queueMaxSize" :disabled="!configCanEdit" />
@@ -1144,6 +1185,67 @@ onUnmounted(() => {
<NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
</NInputGroup>
</NSpace>
<!-- <NCheckbox v-model:checked="settings.allowGift" @update:checked="updateSettings" :disabled="!configCanEdit">
允许通过发送礼物加入队列
</NCheckbox>
<NSpace>
<template v-if="settings.allowGift">
<NAlert type="warning"> 赠送礼物后需要再次发送点播弹幕才能够加入 </NAlert>
<NInputGroup v-if="settings.allowGift" style="width: 250px">
<NInputGroupLabel> 最低价格 </NInputGroupLabel>
<NInputNumber v-model:value="settings.minGiftPrice" :disabled="!configCanEdit" />
<NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
</NInputGroup>
<NSpace align="center">
礼物名
<NSelect
style="width: 250px"
v-model:value="settings.giftNames"
:disabled="!configCanEdit"
filterable
multiple
tag
placeholder="礼物名称,按回车确认"
:show-arrow="false"
:show="false"
@update:value="updateSettings"
/>
</NSpace>
<span>
<NRadioGroup
v-model:value="settings.giftFilterType"
:disabled="!configCanEdit"
@update:value="updateSettings"
>
<NRadioButton :value="QueueGiftFilterType.And"> 需同时满足礼物名和价格 </NRadioButton>
<NRadioButton :value="QueueGiftFilterType.Or"> 礼物名/价格 二选一 </NRadioButton>
</NRadioGroup>
</span>
<NCheckbox
v-model:checked="settings.sendGiftIgnoreLimit"
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
赠送礼物后无视用户等级限制
</NCheckbox>
</template>
<NCheckbox
v-model:checked="settings.allowIncreasePaymentBySendGift"
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
在队列中时允许继续发送礼物累计付费量 (仅限上方设定的礼物)
</NCheckbox>
<NCheckbox
v-if="settings.allowIncreasePaymentBySendGift"
v-model:checked="settings.allowIncreaseByAnyPayment"
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
允许发送任意礼物来叠加付费量
</NCheckbox>
</NSpace> -->
<NDivider> 点歌 </NDivider>
<NSpace>
<NCheckbox

View File

@@ -75,7 +75,7 @@ const accountInfo = useAccount()
</NAlert>
<NDivider> 还有更多 </NDivider>
<NSpace justify="center" align="center" vertical>
动态抽奖视频征集歌单棉花糖日程表...
舰长积分动态抽奖视频征集歌单棉花糖日程表...
<p>
详见
<NButton text tag="a" href="/" target="_blank" type="primary"> VTsuru.live </NButton>

View File

@@ -23,6 +23,7 @@ import {
Dismiss16Filled,
PeopleQueue24Filled,
PresenceBlocked16Regular,
Info24Filled,
} from '@vicons/fluent'
import { ReloadCircleSharp } from '@vicons/ionicons5'
import { useStorage } from '@vueuse/core'
@@ -97,6 +98,8 @@ const defaultSettings = {
isReverse: false,
showFanMadelInfo: true,
showPayment: true,
sendGiftDirectJoin: true,
sendGiftIgnoreLimit: false,
} as Setting_Queue
const STATUS_MAP = {
[QueueStatus.Waiting]: '等待中',
@@ -1071,7 +1074,7 @@ onUnmounted(() => {
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
允许舰长
允许舰长
</NCheckbox>
<NCheckbox
v-if="!settings.allowAllDanmaku"
@@ -1079,7 +1082,7 @@ onUnmounted(() => {
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
允许提督
允许提督
</NCheckbox>
<NCheckbox
v-if="!settings.allowAllDanmaku"
@@ -1087,7 +1090,7 @@ onUnmounted(() => {
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
允许总督
允许总督
</NCheckbox>
</template>
</NSpace>
@@ -1130,6 +1133,27 @@ onUnmounted(() => {
<NRadioButton :value="QueueGiftFilterType.Or"> 礼物名/价格 二选一 </NRadioButton>
</NRadioGroup>
</span>
<NCheckbox
v-model:checked="settings.sendGiftDirectJoin"
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
赠送礼物后自动加入队列
<NTooltip>
<template #trigger>
<NIcon :component="Info24Filled" />
</template>
否则需要手动再发送一次排队的弹幕
</NTooltip>
</NCheckbox>
<NCheckbox
v-model:checked="settings.sendGiftIgnoreLimit"
@update:checked="updateSettings"
:disabled="!configCanEdit"
>
赠送礼物后无视用户等级限制
</NCheckbox>
</template>
<NCheckbox
v-model:checked="settings.allowIncreasePaymentBySendGift"