import { html, property, Seed, svg, TemplateResult } from '@nutmeg/seed'; import Autolinker, { AutolinkerConfig } from 'autolinker'; import { unsafeHTML } from 'lit-html/directives/unsafe-html'; import { Events, EVENT_NAME } from './events'; import { Status } from './status'; import { User } from './user'; export class TwitterStatus extends Seed { @property({ type: Object }) public status!: import('twitter-d').Status; @property({ type: Boolean }) public updateTimestamp = false; private eventTarget = Events.target; constructor() { super(); } private get _user(): User { return this._status && this._status.user; } private get _status(): Status { return this.status && new Status(this.status); } private get _retweet(): Status | undefined { return this._status.retweet; } /** The component instance has been inserted into the DOM. */ public connectedCallback() { super.connectedCallback(); if (this.updateTimestamp) { this.eventTarget.addEventListener(EVENT_NAME, () => this.render()); Events.start(); } } /** The component instance has been removed from the DOM. */ public disconnectedCallback() { super.disconnectedCallback() } /** Watch for changes to these attributes. */ public static get observedAttributes(): string[] { return super.observedAttributes; } /** Rerender when the observed attributes change. */ public attributeChangedCallback(name: string, oldValue: any, newValue: any) { super.attributeChangedCallback(name, oldValue, newValue) } /** Styling for the component. */ public get styles(): TemplateResult { return html` `; } /** HTML Template for the component. */ public get template(): TemplateResult { return html`
${this._status ? this.statusTemplate : this.loadingTemplate}
`; } private get timestamp(): string { return this._status.relativeCreatedAt; } private get verifiedBadge() { return this._user.verified ? this.verifiedIcon : ''; } private get autoLinkOptions(): AutolinkerConfig { // TODO: Implement display text for t.co URLs. return {}; } private get linkedText() { return unsafeHTML(Autolinker.link(this._status.text, this.autoLinkOptions)); } private get textClass(): string { return this._status.text.length < 100 ? 'short' : ''; } private get logoTemplate(): TemplateResult { return svg`Twitter_Logo_Blue`; } private get replyIcon(): TemplateResult { return svg``; } private get retweetIcon(): TemplateResult { return svg``; } private get likeIcon(): TemplateResult { return svg``; } private get verifiedIcon(): TemplateResult { return svg``; } private get mediaTemplate(): TemplateResult { if (this._status.mediaType === 'photo') { return html`
media embeded in tweet
`; } else if (this._status.mediaType === 'animated_gif') { return html`
`; } else { return html``; } } private get headerTemplate(): TemplateResult { return html` `; } private get retweetTemplate(): TemplateResult { if (!this._retweet) { return html``; } return html`
${this.retweetIcon} ${this._retweet.user.name} Retweeted
`; } private get textTemplate(): TemplateResult { return html`
${this.linkedText}
`; } private get footerTemplate(): TemplateResult { return html` `; } private get statusTemplate(): TemplateResult { return html` ${this.mediaTemplate}
${this.retweetTemplate} ${this.headerTemplate} ${this.textTemplate} ${this.footerTemplate}
`; } private get loadingTemplate(): TemplateResult { return html`

Loading...

`; } } window.customElements.define('twitter-status', TwitterStatus);