From f5fb5c87c47bfaf299b8f98ac9f67e0515a1beee Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sat, 11 Sep 2021 10:34:18 +0800
Subject: [PATCH] Fix i18n word used as variables.

This is the same as concatenating strings, which we must avoid. It will be hard for translators to handle as they see strings as individual entries, not programmable strings. Untranslated variable values are fine.

https://www.linkedin.com/pulse/internationalization-localization-tips-concatenation-daniel-neumann
---
 static/app-strings.json                 |  4 ++++
 ui/component/autoplayCountdown/view.jsx | 13 +++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index ff7b34a46..a128867f2 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1177,7 +1177,11 @@
   "Tap to unmute": "Tap to unmute",
   "Retry": "Retry",
   "Playing in %seconds_left% seconds...": "Playing in %seconds_left% seconds...",
+  "Playing next free content in %seconds_left% seconds...": "Playing next free content in %seconds_left% seconds...",
   "Autoplay timer paused.": "Autoplay timer paused.",
+  "Play Previous": "Play Previous",
+  "Purchase?": "Purchase?",
+  "Replay?": "Replay?",
   "0 Bytes": "0 Bytes",
   "Bytes": "Bytes",
   "KB": "KB",
diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index f1fd4b78f..9aa6eb4ed 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -50,6 +50,14 @@ function AutoplayCountdown(props: Props) {
     return elm && elm.getBoundingClientRect().top < 0;
   }
 
+  function getMsgPlayingNext() {
+    if (skipPaid) {
+      return __('Playing next free content in %seconds_left% seconds...', { seconds_left: timer });
+    } else {
+      return __('Playing in %seconds_left% seconds...', { seconds_left: timer });
+    }
+  }
+
   // Update 'setTimerPaused'.
   React.useEffect(() => {
     // Ensure correct 'setTimerPaused' on initial render.
@@ -112,10 +120,7 @@ function AutoplayCountdown(props: Props) {
           )}
           {!isTimerPaused && (
             <div className="file-viewer__overlay-secondary autoplay-countdown__counter">
-              {__('Playing %message% in %seconds_left% seconds...', {
-                message: skipPaid ? __('next free content') : __(''),
-                seconds_left: timer,
-              })}{' '}
+              {getMsgPlayingNext()}{' '}
               <Button
                 label={__('Cancel')}
                 button="link"