Upgrade to peertube v6.1

assets/style.scss

@@ -1,41 +1,69 @@
 a.external-login-block.ng-star-inserted {
-    &::before {
-        content: url("https://goteo.org/assets/img/goteo-white.svg");
-        height: 50px;
-        width: 100%;
-    }
+  &::before {
+    content: url("https://goteo.org/assets/img/goteo-white.svg");
+    height: 50px;
+    width: 100%;
+  }
 }
 
 a#btn-fund-goteo-campaign {
-    margin: 2em;
+  margin: 2em;
+}
+
+section.project-details {
+
+  .col-md-4 {
+    text-align: right;
+
+    img {
+      border-radius: 25%;
+    }
+  }
+
+  .amount-details {
+    div {
+      text-align: center;
+
+      span {
+        font-size: 3rem;
+        font-weight: bold;
+      }
+    }
+  }
 }
 
-div.goteo-project-reward-list {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-
-    .goteo-project-reward {
-        margin: 1em;
-        padding: 1em;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        width: 25em;
-
-        .goteo-project-reward-amount {
-            font-size: 1.5em;
-            font-weight: bold;
-        }
-
-        .goteo-project-reward-description {
-            font-size: 0.8em;
-
-            img {
-                width: 100%;
-            }
-        }
-
-        a.btn {
-            cursor: pointer;
-        }
+section.goteo-project-reward-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  article.goteo-project-reward {
+    margin: 1em;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 25em;
+
+    .goteo-project-reward-amount {
+      font-size: 1.5em;
+      font-weight: bold;
+    }
+
+    .goteo-project-reward-description {
+      font-size: 0.8em;
+      text-wrap: pretty;
+
+      img {
+        width: 100%;
+      }
     }
-}
+
+    div {
+      display: flex;
+      justify-content: center;
+
+      a.btn {
+        cursor: pointer;
+      }
+    }
+  }
+}

client/common-client-plugin.ts

@@ -1,24 +1,38 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
-import type { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@peertube/peertube-types'
+import type {
+  RegisterClientFormFieldOptions,
+  RegisterClientVideoFieldOptions
+} from '@peertube/peertube-types'
 
-async function register ({ registerVideoField }: RegisterClientOptions): Promise<void> {
+async function register (
+  { registerVideoField, peertubeHelpers }: RegisterClientOptions
+): Promise<void> {
   const enableGoteoOptions: RegisterClientFormFieldOptions = {
     name: 'enable-goteo-campaign',
-    label: 'Enable Goteo Campaign',
-    descriptionHTML: 'This options enables the connection with a campaign in the CrowdFunding platform Goteo.org',
+    label: await peertubeHelpers.translate('Enable Goteo Campaign'),
+    descriptionHTML:
+      'This options enables the connection with a campaign in the CrowdFunding platform Goteo.org',
     type: 'input-checkbox',
     default: false
   }
 
   const campaignGoteoOptions: RegisterClientFormFieldOptions = {
     name: 'goteo-campaign',
-    label: 'Goteo Campaign ID',
+    label: await peertubeHelpers.translate('Goteo Campaign ID'),
     descriptionHTML: 'This is the ID of the campaign in Goteo.org',
     type: 'input',
     default: ''
   }
 
-  for (const type of ['upload', 'import-url', 'import-torrent', 'update', 'go-live']) {
+  for (
+    const type of [
+      'upload',
+      'import-url',
+      'import-torrent',
+      'update',
+      'go-live'
+    ]
+  ) {
     const videoFormOptions: RegisterClientVideoFieldOptions = {
       type: type as RegisterClientVideoFieldOptions['type'],
       tab: 'main'
@@ -29,6 +43,4 @@ async function register ({ registerVideoField }: RegisterClientOptions): Promise
   }
 }
 
-export {
-  register
-}
+export { register }

client/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
-    "module": "es6",
-		"moduleResolution": "node",
+    "module": "NodeNext",
+		"moduleResolution": "nodenext",
 		// target:"es2015" is the target for Peertube client code. Using the same.
 		// Not sure it is important, as ESBuild will recompile after.
     "target": "es2015",
@@ -16,7 +16,7 @@
 		"strictBindCallApply": true, // should already be true because of strict:true
 		"noUnusedLocals": true,
 		"allowSyntheticDefaultImports": true, // Seems necessary for peertube types to work
-		"isolatedModules": true, // Needed by esbuild https://esbuild.github.io/content-types/#isolated-modules
+		"isolatedModules": true, // Needed by esbuild https://esbuild.github.io/content-types/#isolated-modulestscontscon
 		"esModuleInterop": true, // Needed by esbuild https://esbuild.github.io/content-types/#es-module-interop
     "outDir": "../dist/client",
 		"paths": {}

client/video-channel-client-plugin.ts

@@ -1,20 +1,21 @@
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
 
-async function register ({ registerHook }: RegisterClientOptions): Promise<void> {
+async function register ({ registerHook, peertubeHelpers }: RegisterClientOptions): Promise<void> {
   registerHook({
     target: 'action:video-channel-videos.video-channel.loaded',
-    handler: () => {
-      const elem = document.createElement('a')
+    handler: async () => {
+      const elem: HTMLAnchorElement = document.createElement('a')
 
+      const settings = await peertubeHelpers.getSettings()
+      const platformURL = settings['goteo-platform-url'] as string
       elem.id = 'btn-fund-goteo-campaign'
       elem.className = 'btn btn-primary'
-      elem.innerHTML = 'Dona a la campaña'
-      elem.href = 'https://goteo.org/'
+      elem.innerHTML = await peertubeHelpers.translate('Donate').then(translations => translations)
+      elem.href = platformURL
       elem.target = '_blank'
 
       const $videoChannelList = document.getElementsByTagName('my-video-channel-videos')
 
-      // iterate through videodescriptionlist
       for (const element of $videoChannelList) {
         element.before(elem)
       }

client/video-watch-client-plugin.ts

@@ -1,70 +1,90 @@
+import { Video } from '@peertube/peertube-types'
 import type { RegisterClientOptions } from '@peertube/peertube-types/client'
-
 import { Marked } from '@ts-stack/markdown'
 
-async function register ({ registerHook, peertubeHelpers }: RegisterClientOptions): Promise<void> {
+async function register (
+  { registerHook, peertubeHelpers }: RegisterClientOptions
+): Promise<void> {
   registerHook({
     target: 'action:video-watch.video.loaded',
-    handler: (context: any) => {
-      const enableGoteoCampaignValue: boolean = context.video.pluginData['enable-goteo-campaign']
-      const goteoCampaignValue: string = context.video.pluginData['goteo-campaign']
-
-      if (enableGoteoCampaignValue) {
-        const elem: HTMLAnchorElement  = document.createElement('a')
-        elem.id = 'btn-fund-goteo-campaign'
-        elem.className = 'btn btn-primary'
-        elem.innerHTML = 'Dona a la campaña'
-        elem.href = 'https://goteo.org/project/' + goteoCampaignValue
-        elem.target = '_blank'
-
-        const $videoDescriptionList = document.getElementsByTagName('my-video-description')
-
-        for (const element of $videoDescriptionList) {
-          element.append(elem)
-        }
-
-        let listOfRewards: HTMLDivElement = document.createElement('div')
-        listOfRewards.classList.add('goteo-project-reward-list')
+    handler: async ({ video }: { video: Video }) => {
+      const enableGoteoCampaignValue: boolean =
+        video.pluginData['enable-goteo-campaign']
+      const goteoCampaignValue: string =
+        video.pluginData['goteo-campaign']
+      const baseRoute: string = peertubeHelpers.getBaseRouterRoute()
+      const settings = await peertubeHelpers.getSettings()
+      const platformURL = settings['gote-platform-url'] as string
+
+      if (!enableGoteoCampaignValue)
+        return
+
+      const $videoDescriptionList = document.getElementsByTagName('my-video-description')
+
+      const projectData = await fetch(`${baseRoute}/goteo/project/${goteoCampaignValue}`)
+        .then(async (res) => res.json())
+
+      const amountFormated = new Intl.NumberFormat(undefined, { style: "currency", currency: projectData.currency }).format(projectData.amount)
+      const minimumFormated = new Intl.NumberFormat(undefined, { style: "currency", currency: projectData.currency }).format(projectData.minimum)
+      const donateText = await peertubeHelpers.translate('Donate').then(translations => translations)
+      const projectInfo = `
+<section class="project-details">
+  <div class="row">
+    <div class="col-md-4">
+      <img src="${projectData.imgUrl}" title="${projectData.name}" class="img-thumbnail" width=150 height=150>
+    </div>
+    <div class="col-md-8">
+      <h3>${projectData.name}</h3>
+      <a id="btn-fund-goteo-campaign" class="btn btn-primary" href="${platformURL}/project/${projectData.id}" target="_blank">${donateText}</a>
+    </div>
+  </div>
+  <div class="row amount-details">
+    <div class="col-md-6"><span>${amountFormated}</span></div>
+    <div class="col-md-6"><span>${minimumFormated}</span></div>
+  </div>
+</section>`
+
+      for (const element of $videoDescriptionList) {
+        element.innerHTML += projectInfo
+      }
 
-        fetch(peertubeHelpers.getBaseRouterRoute() + '/goteo/project/' + goteoCampaignValue + '/rewards')
-          .then(res => res.json())
-          .then((data) => {
-            for (const reward of data) {
+      const listOfRewards: HTMLElement = document.createElement('section')
+      listOfRewards.classList.add('goteo-project-reward-list')
 
-              let rewardDiv: HTMLDivElement = document.createElement('div')
-              rewardDiv.classList.add('goteo-project-reward')
+      const data = await fetch(`${baseRoute}/goteo/project/${goteoCampaignValue}/rewards`)
+        .then(async (res) => res.json())
 
-              let rewardName: HTMLHeadingElement = document.createElement('h3')
-              rewardName.classList.add('goteo-project-reward-name')
-              rewardName.innerHTML = reward.name
+      for (const reward of data) {
+        const rewardDiv: HTMLElement = document.createElement('article')
+        rewardDiv.classList.add('goteo-project-reward')
 
-              let rewardAmount: HTMLParagraphElement = document.createElement('p')
-              rewardAmount.classList.add('goteo-project-reward-amount')
-              rewardAmount.innerHTML = reward.amount
+        const rewardName: HTMLHeadingElement = document.createElement('h3')
+        rewardName.classList.add('goteo-project-reward-name')
+        rewardName.innerHTML = reward.name
 
-              let rewardDescription: HTMLParagraphElement = document.createElement('p')
-              rewardDescription.classList.add('goteo-project-reward-description')
-              rewardDescription.innerHTML = Marked.parse(reward.description)
+        const rewardAmount: HTMLParagraphElement = document.createElement('p')
+        rewardAmount.classList.add('goteo-project-reward-amount')
+        rewardAmount.innerHTML = reward.amount
 
-              let rewardInvesAnchor: HTMLAnchorElement = document.createElement('a')
-              rewardInvesAnchor.classList.add('btn', 'btn-primary')
-              rewardInvesAnchor.href = 'https://goteo.org/project/' + goteoCampaignValue + '/invest/' + reward.id
-              rewardInvesAnchor.innerHTML = "Donate"
+        const rewardDescription: HTMLParagraphElement = document.createElement('p')
+        rewardDescription.classList.add('goteo-project-reward-description')
+        rewardDescription.innerHTML = Marked.parse(reward.description)
 
-              rewardDiv.append(rewardName)
-              rewardDiv.append(rewardDescription)
-              rewardDiv.append(rewardInvesAnchor)
+        const rewardInvestAnchor: HTMLAnchorElement = document.createElement('a')
+        rewardInvestAnchor.classList.add('btn', 'btn-primary')
+        rewardInvestAnchor.href = `${platformURL}/project/${goteoCampaignValue}/invest/${reward.id}`
+        rewardInvestAnchor.innerHTML = await peertubeHelpers.translate('Donate').then(translations => translations)
 
-              listOfRewards.append(rewardDiv)
-            }
+        rewardDiv.append(rewardName)
+        rewardDiv.append(rewardDescription)
+        rewardDiv.append(rewardInvestAnchor)
 
-            $videoDescriptionList[0].append(listOfRewards)
-          })
+        listOfRewards.append(rewardDiv)
       }
+
+      $videoDescriptionList[0].append(listOfRewards)
     }
   })
 }
 
-export {
-  register
-}
+export { register }

languages/ca.json

@@ -1,3 +1,5 @@
 {
-  "Hello world": "Hello le monde"
+  "Donate": "Dona",
+  "Enable Goteo Campaign": "Activar campanya de Goteo",
+  "Goteo Campaign ID": "ID de la campanya de Goteo"
 }

languages/en.json

@@ -1,3 +1,5 @@
 {
-  "Hello world": "Hello le monde"
+  "Donate": "Donate",
+  "Enable Goteo Campaign": "Enable Goteo Campaign",
+  "Goteo Campaign ID": "Goteo Campaign ID"
 }

languages/es.json

@@ -1,3 +1,5 @@
 {
-  "Hello world": "Hello le monde"
+  "Donate": "Dona",
+  "Enable Goteo Campaign": "Activar campaña de Goteo",
+  "Goteo Campaign ID": "ID de la campaña de Goteo"
 }