Skip to content

Commit 4174985

Browse files
authored
WEBDEV-7452 Implement TV tiles (#462)
* Add new TV mediatype icons * Only show certain mediatypes on TV search results * Small refactor to include hit source in model * Add missing icon color * Improve readability & efficiency of adding request source to hits * Rename mediatype-icon to tile-mediatype-icon
1 parent 747ce7b commit 4174985

File tree

16 files changed

+387
-106
lines changed

16 files changed

+387
-106
lines changed
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { html } from 'lit';
2+
3+
export const tvCommercialIcon = html`
4+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
class="fill-color"
7+
d="m38.4615385 55.5197275-4.8171501 7.0895871c4.1025641 2.9421734 8.9186633 4.7253407 14.4482976 5.3495018v13.0411836h5.6179067v-12.9749847c3.8356452-.357264 6.8905002-1.5278287 9.1645649-3.5116942 2.2740648-1.9838655 3.4110971-4.5582672 3.4110971-7.7232052v-.0661989c0-3.2553047-1.025641-5.7635075-3.076923-7.5246085-2.0512821-1.7611009-5.3068517-3.1544302-9.7667087-4.1799878v-6.2195444c2.6754939.6682937 5.083018 1.7379839 7.2225725 3.2090706l4.4136191-7.1557861c-3.2114333-2.2738797-6.9798234-3.6787675-11.3051702-4.2146634v-11.6383974h-5.5517024v11.5028473c-4.0584279.3131313-7.2026061 1.4721374-9.4325347 3.4770185-2.2299285 2.004881-3.3448928 4.5908413-3.3448928 7.7578808v.1323978c0 3.2111721 1.0372005 5.6857501 3.1116015 7.423734 2.074401 1.7379838 5.3625473 3.1197546 9.8644389 4.1453122v6.4212934c-3.1651955-.4896617-6.4869694-1.9386821-9.9653216-4.3470612zm-24.4136192-32.7716087c-4.32534679 3.7008338-7.74800337 8.0142702-10.26796974 12.9403091s-3.77994956 10.1536506-3.77994956 15.6828351c0 4.9050234 1.02564103 9.6093485 3.07692308 14.1129754 2.05128205 4.5036268 4.88335435 8.5606738 8.49621692 12.1711409.357293.3572639 1.1149642.6252118 2.2730138.8038438s2.2057588-.0220663 3.1431274-.6020948c.5800757-.4896617.8701135-1.1138228.8701135-1.8724832s-.1229508-1.3828215-.3688525-1.8724832c-.2459016-.4896617-.5023119-.8689919-.7692307-1.1379907-6.5111392-6.3761101-9.76670873-13.5770795-9.76670873-21.6029082 0-4.6822589 1.1034048-9.0850112 3.31021443-13.2082571 2.2068095-4.1232459 5.2059688-7.6570063 8.9974779-10.6012813.0882724-.0882652.1775956-.1880889.2679697-.2994712s.2574611-.3562131.5012611-.7344926c.2437999-.3782794.4224464-.7460511.5359394-1.103315.1134931-.3572639.1250526-.770219.0346785-1.2388652s-.3131568-.8816012-.6683481-1.2388651c-.668348-.6682937-1.4932745-1.0245068-2.4747793-1.0686394s-1.8064313.0893159-2.4747793.4003457zm71.9041614 0c4.3253468 3.7008338 7.7480034 8.0142702 10.2679697 12.9403091 2.5199664 4.9260389 3.7799496 10.1536506 3.7799496 15.6828351 0 4.8608908-1.025641 9.5536573-3.0769231 14.0782997-2.051282 4.5246424-4.8602354 8.593248-8.42686 12.2058166-.4014292.3572639-1.1822194.6252118-2.3423707.8038438-1.1601514.178632-2.1857924-.0220663-3.0769231-.6020948-.5800757-.4896617-.8806221-1.1138228-.9016394-1.8724832-.0210172-.7586604.0903741-1.3828215.3341741-1.8724832.2437999-.4896617.5002101-.8689919.7692307-1.1379907 6.4649012-6.3319775 9.6973519-13.5329469 9.6973519-21.6029082 0-4.6822589-1.1034048-9.0850112-3.3102144-13.2082571s-5.18285-7.6570063-8.9281211-10.6012813c-.0882724-.0882652-.1775956-.1880889-.2679697-.2994712s-.2574611-.3562131-.5012611-.7344926c-.2437999-.3782794-.4224464-.7460511-.5359394-1.103315-.1134931-.3572639-.1250526-.770219-.0346785-1.2388652s.3131568-.8816012.6683481-1.2388651c.668348-.6682937 1.4932745-1.0245068 2.4747793-1.0686394s1.7843632.0893159 2.408575.4003457zm-62.2730139 8.0920276c-3.1210592 2.4525117-5.6179066 5.4840011-7.4905422 9.0944682s-2.8089534 7.4447495-2.8089534 11.5028473c0 6.2878449 2.2068096 11.9725442 6.6204288 17.054098.1786465.3131313.858554.469697 2.0397226.469697 1.1811685 0 2.1290458-.2900143 2.8436318-.8700427.5359394-.4896618.8259773-1.1253814.8701134-1.9071589.0441362-.7817775-.045187-1.2167988-.2679697-1.305064-1.6939891-1.7842181-3.1094998-3.9582741-4.2465321-6.522168-1.1370324-2.563894-1.7055486-5.0720968-1.7055486-7.5246085 0-3.34357.7471627-6.3424853 2.241488-8.996746 1.4943254-2.6542607 3.5571669-4.7390008 6.1885246-6.2542201.0441362-.0441326.1113914-.12189.2017655-.2332723s.2238335-.3341468.4003783-.6682937c.1765447-.3341468.2994956-.6577859.3688524-.9709172.0693569-.3131313.0472888-.7029693-.0662043-1.1695139-.113493-.4665447-.3478352-.901566-.7030264-1.3050641-.4897016-.5358959-1.102354-.8364179-1.8379572-.901566s-1.3482555-.009457-1.8379571.1670734zm52.5063052 0c3.1651955 2.4966443 5.6956705 5.5396923 7.591425 9.1291438 1.8957545 3.5894516 2.8436318 7.4132262 2.8436318 11.471324 0 6.2416107-2.2519967 11.9263101-6.75599 17.054098-.1345103.3131313-.7923497.469697-1.9735182.469697-1.1811686 0-2.1290459-.2900142-2.8436318-.8700427-.5359395-.4896617-.8259773-1.1253813-.8701135-1.9071589-.0441362-.7817775.045187-1.2167988.2679697-1.305064 1.6498529-1.8283506 3.0432955-4.0244729 4.1803279-6.5883669s1.7055485-5.0500305 1.7055485-7.4584096c0-3.3435699-.7356032-6.3309267-2.2068095-8.9620704-1.4712064-2.6311436-3.5004204-4.7263914-6.0876419-6.2857433l-.2332913-.2332723s-.1450189-.2227646-.4350568-.6682937c-.2900378-.4455291-.4129886-.7691682-.3688524-.9709172.0441362-.2017491.0662043-.591587.0662043-1.169514 0-.5779269.2343421-1.0129482.7030265-1.305064.4897015-.5358959 1.1023539-.8364179 1.8379571-.901566.7356032-.0651482 1.3482555-.009457 1.8379571.1670734zm-31.3682219 10.2324588v-.0661989c0-1.605586 1.2263556-2.497695 3.6790668-2.676327v5.7529998c-1.4270702-.4013965-2.3970156-.8248593-2.9098361-1.2703884-.5128205-.4455292-.7692307-1.0255576-.7692307-1.7400855zm12.1721311 16.3196055v.0661989c0 1.5614535-1.2042875 2.4756288-3.6128625 2.7425259v-5.8853976c1.382934.4013965 2.3308112.8248594 2.8436317 1.2703885.5128206.4455291.7692308 1.0476239.7692308 1.8062843z"
8+
fill="black"
9+
fill-rule="evenodd"
10+
/>
11+
</svg>
12+
`;
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { html } from 'lit';
2+
3+
export const tvFactCheckIcon = html`
4+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
class="fill-color"
7+
d="m53.8329111 72.530691-28.3707393-20.2314977c-1.2950216-.9306676-2.0122823-2.1279084-2.1517819-3.5917222-.1394997-1.4638139.1499621-2.9054133.8683852-4.3247984.7184232-1.419385 1.5275211-2.780311 2.4272938-4.0827779.8997726-1.302467 1.7204955-2.3488835 2.4621686-3.1392494l1.178772-1.1855489 20.6040968 16.1873027 36.4861309-43.88284817 3.885065-3.27955103c2.311044 1.53396469 4.1722017 3.06909856 5.5834731 4.60540161 1.4112713 1.53630309 2.2901191 2.86215359 2.6365432 3.97755169.3464241 1.1153982.5312611 2.1150474.5545111 2.9989478.0232494.8839004-.0813748 1.5351339-.3138742 1.9537004l-.4150115.6980007zm15.0520112 11.0943528v-5.022799c-.0464999-.1403016-.0813748-.2911259-.1046247-.4524728-.02325-.1613469-.0464999-.486379-.0697498-.9750964-.02325-.4887175.0116249-.8020578.1046247-.9400211.0464999-.1870689.2197119-.4898866.5196361-.9084532.2999243-.4185666.589386-.7903659.8683853-1.1153981l.4150114-.4875482 9.5731628-11.1645037v32.4412487h-80.1913681v-80.6524027h68.1874241l-7.1458691 8.5829534c-1.0183473 1.5807319-1.8041953 2.5113995-2.3575439 2.7920028h-47.3775653v57.9059979h57.574989z"
8+
fill="black"
9+
fill-rule="evenodd"
10+
/>
11+
</svg>
12+
`;
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { html } from 'lit';
2+
3+
export const tvQuoteIcon = html`
4+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
class="fill-color"
7+
d="m45.3394669 100.000002h7.4385828c6.4511217-.3595144 12.58904-1.9152224 18.4137548-4.6671261s10.8424956-6.3426695 15.0533425-10.7722976c4.2108468-4.429628 7.556034-9.6360206 10.0355616-15.6191778s3.7192914-12.2669975 3.7192914-18.8515208c0-9.0967521-2.2250498-17.4897316-6.6751493-25.1789383-4.4500995-7.6892068-10.5140669-13.7638762-18.1919023-18.22400833-7.6778355-4.46013212-16.0560287-6.68910874-25.1345797-6.68693148-6.8100007 0-13.2915728 1.31603472-19.4447163 3.94810096-6.1531434 2.63206624-11.4699901 6.17816545-15.9505399 10.63829755-4.4805499 4.4601321-8.03453942 9.7863622-10.66196865 15.9786902s-3.94114385 12.7005912-3.94114385 19.5247894c0 12.9271929 4.36092352 24.1624988 13.0827705 33.7059178 8.7218471 9.543419 19.4751667 14.9448198 32.2599589 16.2042045zm-28.136113-51.5246596c2.2707252-7.480036 5.6159125-13.1058597 10.0355616-16.8774711 4.2412972-3.9502783 8.9610997-5.4166529 14.1594076-4.399124.2979783.1786667.1783519.507675-.358879.9870248-.537231.4793498-1.433341 1.2572039-2.6883299 2.3335621-1.254989 1.0763582-2.3000881 2.1538058-3.1352974 3.2323429-1.074462 1.4358706-1.7911325 2.7976598-2.1500114 4.0853677-.358879 1.2877079-.448055 2.214814-.267528 2.7813184.180527.5665043.180527 1.1798542 0 1.8400496 3.1059345-.1786668 5.8236273.5545206 8.1530782 2.199562s3.9726817 3.7095139 4.9296923 6.1934174c.9570107 2.4839036 1.210401 5.2063926.760171 8.1674672-.45023 2.9610745-1.6595435 5.6094822-3.6279404 7.9452231-3.3451872 3.6495952-7.5712592 5.2205552-12.678216 4.7128802s-8.9154242-2.6767329-11.4254021-6.5071737c-1.5529673-2.1548953-2.4490773-4.8479697-2.6883299-8.0792232-.2392527-3.2312535.089176-6.1040841.9852859-8.6184917zm34.7655868 0c2.2098245-7.3013692 5.5854621-12.9271929 10.1269126-16.8774711 4.1825715-3.9502783 8.8719237-5.4166529 14.0680565-4.399124.358879.1786667.2838407.507675-.225115.9870248-.5089556.4793498-1.3898404 1.2572039-2.6426544 2.3335621-1.2528139 1.0763582-2.3283634 2.1538058-3.2266484 3.2323429-1.0744619 1.4358706-1.7911324 2.7976598-2.1500114 4.0853677s-.4632801 2.214814-.3132035 2.7813184c.1500767.5665043.1348515 1.1798542-.0456755 1.8400496 3.1059346-.1786668 5.8236273.5545206 8.1530782 2.199562s3.9726817 3.7095139 4.9296924 6.1934174c.9570106 2.4839036 1.2256261 5.2063926.8058464 8.1674672-.4197796 2.9610745-1.6443183 5.6094822-3.6736158 7.9452231-3.3451873 3.6495952-7.5712593 5.2205552-12.6782161 4.7128802s-8.9154242-2.6767329-11.4254021-6.5071737c-1.4942416-2.1548953-2.3609888-4.8479697-2.6002414-8.0792232-.2392527-3.2312535.0598131-6.1040841.8971975-8.6184917z"
8+
fill="black"
9+
fill-rule="evenodd"
10+
/>
11+
</svg>
12+
`;

src/collection-browser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2120,7 +2120,7 @@ export class CollectionBrowser
21202120
.mobileBreakpoint=${this.mobileBreakpoint}
21212121
.loggedIn=${this.loggedIn}
21222122
.isManageView=${this.isManageView}
2123-
?showTvClips=${this.isTVCollection}
2123+
?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
21242124
?enableHoverPane=${true}
21252125
@resultSelected=${(e: CustomEvent) => this.resultSelected(e)}
21262126
>

src/collection-facets/smart-facets/smart-facet-button.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
22
import { customElement, property } from 'lit/decorators.js';
3-
import { mediatypeConfig } from '../../mediatype/mediatype-config';
3+
import {
4+
mediatypeConfig,
5+
MediatypeConfigKey,
6+
} from '../../mediatype/mediatype-config';
47
import type { SmartFacet, SmartFacetEvent } from './models';
58

69
import closeCircleDark from '../../assets/img/icons/close-circle-dark';
@@ -38,7 +41,7 @@ export class SmartFacetButton extends LitElement {
3841

3942
const icon =
4043
isSingleFacet && firstFacet.facetType === 'mediatype'
41-
? mediatypeConfig[firstFacet.bucketKey].icon
44+
? mediatypeConfig[firstFacet.bucketKey as MediatypeConfigKey].icon
4245
: nothing;
4346

4447
return html`

src/data-source/collection-browser-data-source.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
RequestKind,
2323
SortField,
2424
SORT_OPTIONS,
25+
HitRequestSource,
2526
} from '../models';
2627
import { FACETLESS_PAGE_ELEMENTS, type PageSpecifierParams } from './models';
2728
import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
@@ -1206,6 +1207,19 @@ export class CollectionBrowserDataSource
12061207
this.requestHostUpdate();
12071208
}
12081209

1210+
/**
1211+
* Returns the type of request that produced the current set of hits,
1212+
* based on the presence of a search query or profile/collection target
1213+
* on the host.
1214+
*/
1215+
private get hitRequestSource(): HitRequestSource {
1216+
const { host } = this;
1217+
if (host.baseQuery) return 'search_query';
1218+
if (host.withinProfile) return 'profile_tab';
1219+
if (host.withinCollection) return 'collection_members';
1220+
return 'unknown';
1221+
}
1222+
12091223
/**
12101224
* Update the datasource from the fetch response
12111225
*
@@ -1218,9 +1232,10 @@ export class CollectionBrowserDataSource
12181232
needsReload = true,
12191233
): void {
12201234
const tiles: TileModel[] = [];
1235+
const requestSource = this.hitRequestSource;
12211236
results?.forEach(result => {
12221237
if (!result.identifier) return;
1223-
tiles.push(new TileModel(result));
1238+
tiles.push(new TileModel(result, requestSource));
12241239
});
12251240

12261241
this.addPage(pageNumber, tiles);

src/mediatype/mediatype-config.ts

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { html, TemplateResult } from 'lit';
12
import { accountIcon } from '../assets/img/icons/mediatype/account';
23
import { audioIcon } from '../assets/img/icons/mediatype/audio';
34
import { collectionIcon } from '../assets/img/icons/mediatype/collection';
@@ -9,12 +10,44 @@ import { radioIcon } from '../assets/img/icons/mediatype/radio';
910
import { softwareIcon } from '../assets/img/icons/mediatype/software';
1011
import { textsIcon } from '../assets/img/icons/mediatype/texts';
1112
import { tvIcon } from '../assets/img/icons/mediatype/tv';
13+
import { tvCommercialIcon } from '../assets/img/icons/mediatype/tv-commercial';
14+
import { tvFactCheckIcon } from '../assets/img/icons/mediatype/tv-fact-check';
1215
import { videoIcon } from '../assets/img/icons/mediatype/video';
1316
import { webIcon } from '../assets/img/icons/mediatype/web';
1417
import { searchIcon } from '../assets/img/icons/mediatype/search';
18+
import { tvQuoteIcon } from '../assets/img/icons/mediatype/tv-quote';
1519

16-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
17-
export const mediatypeConfig: { [key: string]: any } = {
20+
/**
21+
* Union of keys with valid mediatype config entries
22+
*/
23+
export type MediatypeConfigKey =
24+
| 'account'
25+
| 'audio'
26+
| 'collection'
27+
| 'data'
28+
| 'etree'
29+
| 'film'
30+
| 'image'
31+
| 'movies'
32+
| 'none'
33+
| 'radio'
34+
| 'search'
35+
| 'software'
36+
| 'texts'
37+
| 'tv'
38+
| 'tvCommercial'
39+
| 'tvFactCheck'
40+
| 'tvQuote'
41+
| 'video'
42+
| 'web';
43+
44+
export type MediatypeConfig = {
45+
color: string;
46+
icon: TemplateResult;
47+
text: string;
48+
};
49+
50+
export const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {
1851
account: {
1952
color: '#000000',
2053
icon: accountIcon,
@@ -55,6 +88,11 @@ export const mediatypeConfig: { [key: string]: any } = {
5588
icon: filmIcon,
5689
text: 'Movie',
5790
},
91+
none: {
92+
color: '#00000000',
93+
icon: html``, // Empty
94+
text: '',
95+
},
5896
radio: {
5997
color: '#8fdaef',
6098
icon: radioIcon,
@@ -75,6 +113,21 @@ export const mediatypeConfig: { [key: string]: any } = {
75113
icon: tvIcon,
76114
text: 'TV',
77115
},
116+
tvCommercial: {
117+
color: '#84b648',
118+
icon: tvCommercialIcon,
119+
text: 'TV Commercial',
120+
},
121+
tvFactCheck: {
122+
color: '#f1644b',
123+
icon: tvFactCheckIcon,
124+
text: 'TV Fact Check',
125+
},
126+
tvQuote: {
127+
color: '#fe7a5f',
128+
icon: tvQuoteIcon,
129+
text: 'TV Quote',
130+
},
78131
video: {
79132
color: '#f1644b',
80133
icon: videoIcon,

src/models.ts

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { msg } from '@lit/localize';
33
import type { MediaType } from '@internetarchive/field-parsers';
44
import {
55
AggregationSortType,
6+
HitType,
67
Review,
78
SearchResult,
89
SortDirection,
@@ -36,6 +37,19 @@ export const TILE_OVERLAY_ICONS: Record<TileOverlayType, TemplateResult> = {
3637
'content-warning': restrictedIcon,
3738
};
3839

40+
/**
41+
* What type of request produced a given set of hits:
42+
* - `search_query`: Hits produced by an explicit user query and/or applied filters on any page
43+
* - `collection_members`: Hits produced for a collection page without any query or filters
44+
* - `profile_tab`: Hits produced for a tab of the profile page without any query or filters
45+
* - `unknown`: Hits produced via any other means
46+
*/
47+
export type HitRequestSource =
48+
| 'search_query'
49+
| 'collection_members'
50+
| 'profile_tab'
51+
| 'unknown';
52+
3953
/**
4054
* Class for converting & storing raw search results in the correct format for UI tiles.
4155
*/
@@ -76,6 +90,10 @@ export class TileModel {
7690

7791
favCount: number;
7892

93+
hitRequestSource: HitRequestSource;
94+
95+
hitType?: HitType;
96+
7997
href?: string;
8098

8199
identifier?: string;
@@ -110,7 +128,10 @@ export class TileModel {
110128

111129
contentWarning: boolean;
112130

113-
constructor(result: SearchResult) {
131+
constructor(
132+
result: SearchResult,
133+
hitRequestSource: HitRequestSource = 'unknown',
134+
) {
114135
const flags = this.getFlags(result);
115136

116137
this.averageRating = result.avg_rating?.value;
@@ -128,6 +149,8 @@ export class TileModel {
128149
this.dateReviewed = result.reviewdate?.value;
129150
this.description = result.description?.values.join('\n');
130151
this.favCount = result.num_favorites?.value ?? 0;
152+
this.hitRequestSource = hitRequestSource;
153+
this.hitType = result.rawMetadata?.hit_type;
131154
this.href = collapseRepeatedQuotes(
132155
result.review?.__href__ ?? result.__href__?.value,
133156
);
@@ -170,6 +193,8 @@ export class TileModel {
170193
cloned.dateReviewed = this.dateReviewed;
171194
cloned.description = this.description;
172195
cloned.favCount = this.favCount;
196+
cloned.hitRequestSource = this.hitRequestSource;
197+
cloned.hitType = this.hitType;
173198
cloned.href = this.href;
174199
cloned.identifier = this.identifier;
175200
cloned.issue = this.issue;
@@ -189,6 +214,15 @@ export class TileModel {
189214
return cloned;
190215
}
191216

217+
/**
218+
* Whether this model represents the result of a TV search query.
219+
*/
220+
get isTvSearchResult(): boolean {
221+
return (
222+
this.hitType === 'tv_clip' && this.hitRequestSource === 'search_query'
223+
);
224+
}
225+
192226
/**
193227
* Determines the appropriate tile flags for the given search result
194228
* (login required and/or content warning)

src/tiles/grid/item-tile.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import type { SortParam } from '@internetarchive/search-service';
88
import { DateFormat, formatDate } from '../../utils/format-date';
99
import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
1010
import { BaseTileComponent } from '../base-tile-component';
11-
1211
import { baseTileStyles } from './styles/tile-grid-shared-styles';
12+
1313
import '../image-block';
1414
import '../review-block';
1515
import '../text-snippet-block';
1616
import '../item-image';
17-
import '../mediatype-icon';
17+
import '../tile-mediatype-icon';
1818
import './tile-stats';
1919

2020
@customElement('item-tile')
@@ -69,10 +69,12 @@ export class ItemTile extends BaseTileComponent {
6969
7070
<tile-stats
7171
.mediatype=${this.model?.mediatype}
72+
.collections=${this.model?.collections}
7273
.viewCount=${viewCount}
7374
.viewLabel=${viewLabel}
7475
.favCount=${this.model?.favCount}
7576
.commentCount=${this.model?.commentCount}
77+
?isTvSearchResult=${this.model?.isTvSearchResult}
7678
.tvClipCount=${this.model?.tvClipCount}
7779
.showTvClips=${this.showTvClips}
7880
>

src/tiles/grid/tile-stats.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export class TileStats extends LitElement {
1616
/** The mediatype of the item these stats represent */
1717
@property({ type: String }) mediatype?: string;
1818

19+
/** The collections this item is part of */
20+
@property({ type: Array }) collections?: string[];
21+
1922
/** The number of uploaded items, if representing an account */
2023
@property({ type: Number }) itemCount?: number;
2124

@@ -31,6 +34,9 @@ export class TileStats extends LitElement {
3134
/** The number of times the item has been reviewed */
3235
@property({ type: Number }) commentCount?: number;
3336

37+
/** Whether the tile represents the result of a search */
38+
@property({ type: Boolean }) isTvSearchResult = false;
39+
3440
/** Whether to show the number of TV clips in place of reviews */
3541
@property({ type: Boolean }) showTvClips = false;
3642

@@ -64,7 +70,11 @@ export class TileStats extends LitElement {
6470
return html`
6571
<li class="col">
6672
<p class="sr-only">${msg('Mediatype:')}</p>
67-
<mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
73+
<tile-mediatype-icon
74+
.mediatype=${this.mediatype}
75+
.collections=${this.collections}
76+
?isTvSearchResult=${this.isTvSearchResult}
77+
></tile-mediatype-icon>
6878
</li>
6979
`;
7080
}
@@ -141,7 +151,7 @@ export class TileStats extends LitElement {
141151
return [
142152
srOnlyStyle,
143153
css`
144-
mediatype-icon {
154+
tile-mediatype-icon {
145155
--iconHeight: 25px;
146156
--iconWidth: 25px;
147157
}

0 commit comments

Comments
 (0)