40 |
41 |
42 |
43 |
2 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/membership-item/membership-item.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { MemberMessage } from '@comen/common';
3 |
4 | @Component({
5 | // eslint-disable-next-line
6 | selector: 'yt-live-chat-membership-item-renderer',
7 | templateUrl: './membership-item.html',
8 | // eslint-disable-next-line
9 | host: {
10 | class: 'style-scope yt-live-chat-item-list-renderer',
11 | 'show-only-header': ''
12 | }
13 | })
14 | // eslint-disable-next-line
15 | export class MembershipItemRenderer {
16 |
17 | @Input() message: MemberMessage;
18 |
19 | readonly date = new Date();
20 | }
21 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/message-provider.ts:
--------------------------------------------------------------------------------
1 | import { InjectionToken } from '@angular/core';
2 | import { GammaConfiguration } from './gamma-config.service';
3 | import { Message } from '@comen/common';
4 |
5 | export interface MessageProvider {
6 | registerOnMessage(callback:(message:Message)=>unknown):void;
7 | registerOnConfiguration(callback:(config:GammaConfiguration)=>unknown):void;
8 | }
9 |
10 | export const MESSAGE_PROVIDER = new InjectionToken
3 |
4 |
7 | ![]()
8 |
9 |
38 |
10 |
36 |
37 |
11 |
33 |
12 |
13 |
14 |
18 |
20 |
25 |
26 |
27 |
30 |
21 |
23 |
24 |
28 |
29 | {{message.itemInfo}}
31 |
32 |
34 | {{date | date:'hh:mm a'}}
35 |
39 |
44 |
2 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/paid-message/paid-message.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { GammaConfigService } from '../gamma-config.service';
3 | import { PaidMessage } from '@comen/common';
4 |
5 | @Component({
6 | // eslint-disable-next-line
7 | selector: 'yt-live-chat-paid-message-renderer',
8 | templateUrl: './paid-message.html',
9 | // eslint-disable-next-line
10 | host: {
11 | class: 'style-scope yt-live-chat-item-list-renderer',
12 | 'allow-animations': '',
13 | '[style]': 'colorStyle',
14 | '[attr.show-only-header]': '(message.content==\'\'||!message.content)?\'\':null' // TO BE CHECKED
15 | }
16 | })
17 | // eslint-disable-next-line
18 | export class PaidMessageRenderer {
19 |
20 | @Input() message: PaidMessage;
21 |
22 | constructor(private config: GammaConfigService) {
23 | }
24 |
25 | get colorStyle() {
26 | const color = this.config.getColorInfo(this.message.price);
27 | return `
28 | --yt-live-chat-paid-message-primary-color: ${color.primary};
29 | --yt-live-chat-paid-message-secondary-color: ${color.secondary};
30 | --yt-live-chat-paid-message-header-color: ${color.header};
31 | --yt-live-chat-paid-message-author-name-color: ${color.authorName};
32 | --yt-live-chat-paid-message-timestamp-color: ${color.timestamp};
33 | --yt-live-chat-paid-message-color: ${color.message};
34 | `;
35 | }
36 |
37 | readonly date = new Date();
38 | }
39 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/paid-sticker/paid-sticker.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
7 | ![]()
8 |
9 |
25 |
31 |
10 |
24 |
11 |
13 |
22 |
23 |
14 |
16 | ![]()
17 |
18 |
20 |
21 |
2 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/paid-sticker/paid-sticker.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ViewEncapsulation } from '@angular/core';
2 | import { GammaConfigService } from '../gamma-config.service';
3 | import { StickerMessage } from '@comen/common';
4 |
5 | @Component({
6 | // eslint-disable-next-line
7 | selector: 'yt-live-chat-paid-sticker-renderer',
8 | templateUrl: './paid-sticker.html',
9 | // eslint-disable-next-line
10 | host: {
11 | class: 'style-scope yt-live-chat-item-list-renderer',
12 | '[style]': 'colorStyle'
13 | },
14 | encapsulation: ViewEncapsulation.None
15 | })
16 | // eslint-disable-next-line
17 | export class PaidStickerRenderer {
18 |
19 | @Input() message: StickerMessage;
20 |
21 | constructor(private config: GammaConfigService) { }
22 |
23 | get colorInfo() {
24 | return this.config.getColorInfo(this.message.price);
25 | }
26 |
27 | get colorStyle() {
28 | return `--yt-live-chat-paid-sticker-chip-background-color: ${this.colorInfo.primary};
29 | --yt-live-chat-paid-sticker-chip-text-color: ${this.colorInfo.message};
30 | --yt-live-chat-paid-sticker-background-color: ${this.colorInfo.secondary};
31 | --yt-live-chat-paid-sticker-author-name-text-color: ${this.colorInfo.authorName};`;
32 | }
33 |
34 | readonly date = new Date();
35 | }
36 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/text-message/text-message.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { GammaConfigService } from '../gamma-config.service';
3 | import { TextMessage, RichTextMessage } from '@comen/common';
4 |
5 | @Component({
6 | // eslint-disable-next-line
7 | selector: 'yt-live-chat-text-message-renderer',
8 | templateUrl: './text-message.html',
9 | // eslint-disable-next-line
10 | host: {
11 | class: 'style-scope yt-live-chat-item-list-renderer',
12 | '[attr.author-type]': 'userType'
13 | }
14 | })
15 | // eslint-disable-next-line
16 | export class TextMessageRenderer {
17 |
18 | // to disable angular template type check : type inference is not intelligent enough
19 | // eslint-disable-next-line
20 | @Input() message: TextMessage | RichTextMessage | any;
21 |
22 | readonly date = new Date();
23 |
24 | constructor(public config:GammaConfigService) {}
25 |
26 | get userType(){
27 | if(this.isOwner){
28 | return 'owner';
29 | }
30 | else if(this.isModerator){
31 | return 'moderator';
32 | }
33 | else if(this.isMember){
34 | return 'member';
35 | } else{
36 | return '';
37 | }
38 | }
39 |
40 | get isMember() {
41 | return (this.message.usertype & 1) === 1;
42 | }
43 |
44 | get isModerator() {
45 | return (this.message.usertype & 2) === 2;
46 | }
47 |
48 | get isOwner() {
49 | return (this.message.usertype & 4) === 4;
50 | }
51 |
52 | get isRichtext(){
53 | return this.message.type == 'richtext';
54 | }
55 |
56 | get richtext(){
57 | // to disable angular template type check : type inference is not intelligent enough
58 | // eslint-disable-next-line
59 | return (this.message as RichTextMessage).richtext as any;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/ticker-paid-item/ticker-paid-item.html:
--------------------------------------------------------------------------------
1 |
3 |
5 | ![]()
6 |
7 |
20 |
8 | {{date | date:'hh:mm'}}
9 |
19 |
10 |
13 |
15 | {{message.itemInfo}}
16 |
17 |
18 |
21 |
24 | ![]()
26 |
27 |
28 |
2 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/ticker-paid-item/ticker-paid-item.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core';
2 | import { SLIDEDOWN } from '../animations';
3 | import { PaidMessage } from '@comen/common';
4 |
5 | @Component({
6 | // eslint-disable-next-line
7 | selector: 'yt-live-chat-ticker-paid-message-item-renderer',
8 | templateUrl: './ticker-paid-item.html',
9 | // eslint-disable-next-line
10 | host: {
11 | class: 'style-scope yt-live-chat-ticker-renderer',
12 | role: 'button',
13 | style: 'overflow: hidden;',
14 | '[@slideDown]':''
15 | },
16 | animations:[
17 | SLIDEDOWN
18 | ]
19 | })
20 | // eslint-disable-next-line
21 | export class TickerPaidMessageItemRenderer {
22 |
23 | @Input() message: PaidMessage;
24 |
25 | @ViewChild('container') container: ElementRef
3 |
6 | ![]()
7 |
8 |
10 |
11 |
2 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/ticker-paid-sticker/ticker-paid-sticker.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core';
2 | import { SLIDEDOWN } from '../animations';
3 | import { StickerMessage } from '@comen/common';
4 |
5 | @Component({
6 | // eslint-disable-next-line
7 | selector: 'yt-live-chat-ticker-paid-sticker-item-renderer',
8 | templateUrl: './ticker-paid-sticker.html',
9 | // eslint-disable-next-line
10 | host: {
11 | class: 'style-scope yt-live-chat-ticker-renderer',
12 | role: 'botton',
13 | '[@slideDown]':''
14 | },
15 | animations:[
16 | SLIDEDOWN
17 | ]
18 | })
19 | // eslint-disable-next-line
20 | export class TickerPaidStickerItemRenderer {
21 |
22 | @Input() message: StickerMessage;
23 |
24 | @ViewChild('container') container: ElementRef
3 |
6 | ![]()
8 |
9 |
10 |
11 |
14 | ![]()
15 |
16 |
17 |
2 |
--------------------------------------------------------------------------------
/libs/gamma/src/lib/ticker-sponsor-item/ticker-sponsor-item.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef, Input, ViewChild } from '@angular/core';
2 | import { SLIDEDOWN } from '../animations';
3 | import { MemberMessage } from '@comen/common';
4 |
5 | @Component({
6 | // eslint-disable-next-line
7 | selector: 'yt-live-chat-ticker-sponsor-item-renderer',
8 | templateUrl: './ticker-sponsor-item.html',
9 | // eslint-disable-next-line
10 | host: {
11 | class: 'style-scope yt-live-chat-ticker-renderer',
12 | role: 'button',
13 | '[@slideDown]':''
14 | },
15 | animations:[
16 | SLIDEDOWN
17 | ]
18 | })
19 | // eslint-disable-next-line
20 | export class TickerSponsorItemRenderer {
21 |
22 | @Input() message: MemberMessage;
23 |
24 | @ViewChild('container') container: ElementRef
3 |
6 | ![]()
7 |
8 | 会员
9 |
10 |