onecomme-templates/simple-chats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

enhance youtube gift
All checks were successful
release / release (push) Successful in 37s
Details

Browse Source
This commit is contained in:
0nepeop1e
2024-06-14 04:30:45 +08:00
parent 8a8f0979fb
commit c575059570
14 changed files with 63046 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/BaseComment.svelte Normal file
View File

@@ -0,0 +1,48 @@
<script lang="ts">
import type { Comment } from '@onecomme.com/onesdk/types/Comment';
import { authorColor } from '../lib/utils';
export let comment: Comment;
$: author = comment.data.displayName ?? comment.data.name;
</script>
<div class="flex flex-row gap-4 pt-3 pb-1">
<div class="w-10 min-w-10 relative">
<img
src={comment.data.originalProfileImage}
alt={author}
class="w-10 h-10 rounded-full absolute -top-3 bg-slate-200 border-2 border-slate-400 shadow"
/>
</div>
<div
class="bubble shadow relative flex-grow flex flex-col gap-1 bg-slate-800 bg-opacity-95 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
>
<div class="text-xs font-bold gap-0.5 items-center {authorColor(comment)}">
{author}
{#each comment.data.badges as badge}
<img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
{/each}
</div>
<div class="comment-container">
{@html comment.data.comment}
</div>
</div>
</div>
<style lang="postcss">
.bubble {
&::before {
@apply -left-2 top-0 block h-2 w-2 bg-inherit;
content: ' ';
position: absolute;
mask-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 100%
);
}
}
</style>

24
src/components/CommentRenderer.svelte Normal file
View File

@@ -0,0 +1,24 @@
<script lang="ts">
import type { Comment } from '@onecomme.com/onesdk/types/Comment';
import BaseComment from './BaseComment.svelte';
import ReceivedMember from './youtube/ReceivedMember.svelte';
import Gift from './youtube/Gift.svelte';
export let comment: Comment;
function determineComponent(comment: Comment) {
if (comment.service === 'youtube') {
if (comment.data.hasGift) {
switch (comment.data.giftType) {
case 'giftreceived':
return ReceivedMember;
default:
return Gift;
}
}
}
return BaseComment;
}
</script>
<svelte:component this={determineComponent(comment)} {comment} />

78
src/components/youtube/Gift.svelte Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts">
import type { YouTubeComment } from '@onecomme.com/onesdk/types/Comment';
import { authorColor } from '../../lib/utils';
import Color from 'color';
export let comment: YouTubeComment;
$: author = comment.data.displayName ?? comment.data.name;
function bgColor(comment: YouTubeComment) {
const color = Color(comment.data.colors?.bodyBackgroundColor)
.darken(0.6)
.saturate(0.4)
.alpha(0.95);
return color.rgb();
}
</script>
<div class="flex flex-row gap-4 pt-3 pb-1" style="--sc-bg-color: {bgColor(comment)}">
<div class="w-10 min-w-10 relative">
<img
src={comment.data.originalProfileImage}
alt={author}
class="w-10 h-10 rounded-full absolute -top-3 bg-slate-200 border-2 border-slate-400 shadow"
/>
</div>
<div
class="bubble shadow relative flex-grow flex flex-col gap-1 bg-slate-800 bg-opacity-95 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
>
<div class="flex flex-row items-center gap-1">
<div class="text-xs font-bold items-center {authorColor(comment)}">
{author}
{#each comment.data.badges as badge}
<img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
{/each}
</div>
{#if comment.data.giftType === 'milestonechat'}
<div class="text-xs font-bold ml-auto">
{comment.data.membership?.primary}
</div>
{:else if comment.data.paidText}
<div class="text-xs font-bold ml-auto">
{comment.data.paidText}
</div>
{/if}
</div>
{#if comment.data.giftType === 'supersticker'}
{@html comment.data.comment}
{:else if comment.data.giftType === 'sponsorgift'}
<div class="text-sm font-semibold italic">
{@html comment.data.comment}
</div>
{:else if comment.data.comment}
<div class="comment-container">
{@html comment.data.comment}
</div>
{/if}
</div>
</div>
<style lang="postcss">
.bubble {
background-color: var(--sc-bg-color);
&::before {
@apply -left-2 top-0 block h-2 w-2 bg-inherit;
content: ' ';
position: absolute;
mask-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 100%
);
}
}
</style>

31
src/components/youtube/ReceivedMember.svelte Normal file
View File

@@ -0,0 +1,31 @@
<script lang="ts">
import type { YouTubeComment } from '@onecomme.com/onesdk/types/Comment';
export let comment: YouTubeComment;
$: name = comment.data.displayName ?? comment.data.name;
</script>
<div class="text-center text-white font-semibold shadow-slate-600 py-1 text-sm">
<span class="text-green-300">{name}</span>
{comment.data.comment.replace(comment.data.name, '')}
</div>
<style lang="postcss">
div {
text-shadow:
var(--tw-shadow-color) 2px 0px 0px,
var(--tw-shadow-color) 1.75517px 0.958851px 0px,
var(--tw-shadow-color) 1.0806px 1.68294px 0px,
var(--tw-shadow-color) 0.141474px 1.99499px 0px,
var(--tw-shadow-color) -0.832294px 1.81859px 0px,
var(--tw-shadow-color) -1.60229px 1.19694px 0px,
var(--tw-shadow-color) -1.97998px 0.28224px 0px,
var(--tw-shadow-color) -1.87291px -0.701566px 0px,
var(--tw-shadow-color) -1.30729px -1.5136px 0px,
var(--tw-shadow-color) -0.421592px -1.95506px 0px,
var(--tw-shadow-color) 0.567324px -1.91785px 0px,
var(--tw-shadow-color) 1.41734px -1.41108px 0px,
var(--tw-shadow-color) 1.92034px -0.558831px 0px;
}
</style>