Skip to content

Commit 258c836

Browse files
samlichsamlich
committedJun 18, 2022
convert to typescript
1 parent 4b7ab38 commit 258c836

13 files changed

+1153
-645
lines changed
 

‎assets/style.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.video-miniature-name {
2+
/* price labels may wrap to second line
3+
3em is good for 2 lines, 4em for 3 lines
4+
*/
5+
max-height: 4em !important
6+
}

‎client/common-client-plugin.ts

+100-75
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,135 @@
1+
import { RegisterClientHelpers, RegisterClientOptions } from '@peertube/peertube-types/client'
12
import interval from 'interval-promise'
2-
import { Amount, Exchange, quoteCurrencies } from './paid.js'
3+
import { Amount, Exchange, quoteCurrencies } from 'shared/paid'
4+
import { MonetizationStatusBulkPost, MonetizationStatusBulkPostRes, MonetizationStatusBulkStatus } from 'shared/api'
35

4-
var ptHelpers = null
6+
var ptHelpers: RegisterClientHelpers | null = null
57
var exchange = new Exchange()
68
var displayCurrency = quoteCurrencies['usd']
79

8-
function register ({ registerHook, peertubeHelpers }) {
10+
export function register ({ peertubeHelpers }: RegisterClientOptions) {
911
ptHelpers = peertubeHelpers
10-
interval(populateBadges, 2500, { stopOnError: false })
12+
interval(async () => await populateBadges(), 2500, { stopOnError: false })
1113
}
1214

13-
var monetizationStatus = {}
15+
var monetizationStatus: Record<string, MonetizationStatusBulkStatus> = {}
16+
17+
async function populateBadges (recurse: boolean = false): Promise<void> {
18+
if (ptHelpers == null) {
19+
console.error("`populateBadges` without `peertubeHelpers`")
20+
return
21+
}
1422

15-
async function populateBadges (recurse) {
1623
const names = document.getElementsByClassName('video-miniature-name')
1724

18-
var fetchMonetizationStatus = []
25+
var fetchMonetizationStatus: string[] = []
1926

2027
for (var i = 0; i < names.length; i++) {
2128
if (names[i].classList.contains('web-monetization-badge-checked')) {
2229
continue
2330
}
2431
// Price labels may wrap to second line
25-
names[i].style.maxHeight = '3em'
32+
// names[i].setAttribute('style', 'maxHeight:3emw')
33+
var link
34+
// older versions use `<a>`, newer versions user `<my-link>` with an `<a>` child
2635
if (names[i].tagName.toLowerCase() == 'a') {
27-
const dest = names[i].href
28-
const videoUuid = dest.substring(dest.lastIndexOf('/') + 1)
29-
if (monetizationStatus[videoUuid] != null) {
30-
var badge = document.createElement('img')
31-
badge.style = 'padding-left:0.5em;height:1.5em;'
32-
if (monetizationStatus[videoUuid].monetization == 'monetized') {
33-
badge.src = ptHelpers.getBaseStaticRoute() + '/images/wm-icon.svg'
34-
badge.title = 'Monetized'
36+
link = names[i]
37+
} else {
38+
const children = names[i].getElementsByTagName('a')
39+
if (children.length != 0) {
40+
link = children[0]
41+
} else {
42+
continue
43+
}
44+
}
45+
46+
const dest = link.getAttribute('href')
47+
if (dest == null) {
48+
continue
49+
}
50+
const videoUuid = dest.substring(dest.lastIndexOf('/') + 1)
51+
const status = monetizationStatus[videoUuid]
52+
if (status == null) {
53+
fetchMonetizationStatus.push(videoUuid)
54+
continue
55+
}
56+
57+
if (status.monetization == 'monetized' || status.monetization == 'ad-skip' || status.monetization == 'pay-wall') {
58+
var badge = document.createElement('img')
59+
badge.setAttribute('style', 'padding-left:0.5em;height:1.5em;')
60+
if (status.monetization == 'monetized') {
61+
badge.src = ptHelpers.getBaseStaticRoute() + '/images/wm-icon.svg'
62+
badge.title = 'Monetized'
63+
}
64+
if (status.monetization == 'ad-skip') {
65+
badge.src = ptHelpers.getBaseStaticRoute() + '/images/webmon_icon.svg'
66+
badge.title = 'Monetized (ad-skip)'
67+
}
68+
if (status.monetization == 'pay-wall') {
69+
badge.src = ptHelpers.getBaseStaticRoute() + '/images/webmon_icon.svg'
70+
badge.title = 'Pay-wall'
71+
}
72+
link.append(badge)
73+
}
74+
75+
if (status.monetization == 'pay-wall') {
76+
var costTag = document.createElement('span')
77+
costTag.setAttribute('style', 'padding-left:0.5em;height:1.5em;font-size:0.95em;')
78+
79+
if (status.viewCost != null && status.duration != null && status.currency != null ) {
80+
var costAmount = new Amount(true)
81+
// 600 to convert from per 10 min to per second
82+
var significand = status.viewCost / 600 * status.duration
83+
var exponent = 0
84+
while (significand * 0.001 < Math.abs(significand - (significand >> 0))) {
85+
significand *= 10
86+
exponent -= 1
3587
}
36-
if (monetizationStatus[videoUuid].monetization == 'ad-skip') {
37-
badge.src = ptHelpers.getBaseStaticRoute() + '/images/webmon_icon.svg'
38-
badge.title = 'Monetized (ad-skip)'
88+
significand >>= 0
89+
costAmount.depositUnchecked(significand, exponent, status.currency, true, null)
90+
91+
var paidConverted = null
92+
if (status.paid != null) {
93+
try {
94+
const paid = Amount.deserialize(status.paid)
95+
paidConverted = await paid.inCurrency(exchange, quoteCurrencies[status.currency.toLowerCase()])
96+
} catch (e) {
97+
console.error(e)
98+
}
3999
}
40-
if (monetizationStatus[videoUuid].monetization == 'pay-wall') {
41-
badge.src = ptHelpers.getBaseStaticRoute() + '/images/webmon_icon.svg'
42-
badge.title = 'Pay-wall'
100+
costTag.innerText = ''
101+
if (paidConverted != null && !paidConverted.isEmpty()) {
102+
costTag.innerText = paidConverted.display() + '/'
43103
}
44-
names[i].append(badge)
45-
if (monetizationStatus[videoUuid].monetization == 'pay-wall') {
46-
var costTag = document.createElement('span')
47-
costTag.style = 'padding-left:0.5em;height:1.5em;font-size:0.95em;'
48-
var costAmount = new Amount(true)
49-
// 600 to convert from per 10 min to per second
50-
var significand = monetizationStatus[videoUuid].viewCost / 600 * monetizationStatus[videoUuid].duration
51-
var exponent = 0
52-
while (significand * 0.001 < Math.abs(significand - (significand >> 0))) {
53-
significand *= 10
54-
exponent -= 1
55-
}
56-
significand >>= 0
57-
costAmount.depositUnchecked(significand, exponent, monetizationStatus[videoUuid].currency, true, null)
104+
costTag.innerText += costAmount.display()
58105

59-
var paidConverted = null
60-
if (monetizationStatus[videoUuid].paid != null) {
61-
try {
62-
const paid = Amount.deserialize(monetizationStatus[videoUuid].paid)
63-
paidConverted = await paid.inCurrency(exchange, quoteCurrencies[monetizationStatus[videoUuid].currency.toLowerCase()])
64-
} catch (e) {
65-
console.error(e)
66-
}
67-
}
68-
costTag.innerText = ''
69-
if (paidConverted != null && !paidConverted.isEmpty()) {
70-
costTag.innerText = paidConverted.display() + '/'
106+
if (displayCurrency.code.toLowerCase() != status.currency.toLowerCase()) {
107+
var exchanged = null
108+
try {
109+
exchanged = await costAmount.inCurrency(exchange, displayCurrency)
110+
} catch (e) {
111+
console.error(e)
71112
}
72-
costTag.innerText += costAmount.display()
73-
74-
if (displayCurrency.code.toLowerCase() != monetizationStatus[videoUuid].currency.toLowerCase()) {
75-
var exchanged = null
76-
try {
77-
exchanged = await costAmount.inCurrency(exchange, displayCurrency)
78-
} catch (e) {
79-
console.error(e)
80-
}
81-
if (exchanged != null) {
82-
costTag.innerText += ' (' + exchanged.display() + ')'
83-
}
113+
if (exchanged != null) {
114+
costTag.innerText += ' (' + exchanged.display() + ')'
84115
}
85-
86-
names[i].append(costTag)
87116
}
88-
names[i].classList.add('web-monetization-badge-checked')
89-
} else {
90-
fetchMonetizationStatus.push(videoUuid)
91117
}
118+
119+
link.append(costTag)
92120
}
121+
names[i].classList.add('web-monetization-badge-checked')
93122
}
94123

95124
if (0 < fetchMonetizationStatus.length) {
96125
var route = ptHelpers.getBaseStaticRoute()
97126
route = route.slice(0, route.lastIndexOf('/') + 1) + 'router/monetization_status_bulk'
98127

99-
var headers = {}
100-
if (ptHelpers != null) {
101-
// needed for checking if video is already paid for
102-
headers = ptHelpers.getAuthHeader()
103-
}
104-
if (headers == null) {
105-
headers = {}
128+
var headers: Record<string, string> = {}
129+
// needed for checking if video is already paid for
130+
var tryHeaders = ptHelpers.getAuthHeader()
131+
if (tryHeaders != null) {
132+
headers = tryHeaders
106133
}
107134
headers['content-type'] = 'application/json; charset=utf-8'
108135

@@ -111,7 +138,7 @@ async function populateBadges (recurse) {
111138
headers,
112139
body: JSON.stringify({ videos: fetchMonetizationStatus })
113140
}).then(res => res.json())
114-
.then(data => {
141+
.then((data: MonetizationStatusBulkPostRes) => {
115142
for (const key in data.statuses) {
116143
monetizationStatus[key] = data.statuses[key]
117144
}
@@ -121,5 +148,3 @@ async function populateBadges (recurse) {
121148
})
122149
}
123150
}
124-
125-
export { register }

‎client/plotly.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare module "plotly.js-finance-dist-min" {
2+
export * from 'plotly.js'
3+
}

‎client/tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"extends": "@tsconfig/node12/tsconfig.json",
3+
"compilerOptions": {
4+
"lib": ["dom"],
5+
"module": "es6",
6+
"esModuleInterop": true,
7+
"allowSyntheticDefaultImports": true,
8+
"outDir": "../dist/",
9+
"moduleResolution": "node",
10+
"target": "es6", // same as PeerTube
11+
"paths": {
12+
"shared/*": ["../shared/*"]
13+
}
14+
},
15+
"include": [
16+
"./**/*",
17+
"../shared/**/*"
18+
]
19+
}

0 commit comments

Comments
 (0)
Please sign in to comment.