Fixed WBW audio

.env

@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://staging.quran.com:3000
+API_URL=https://staging.quran.com:3000
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=

src/components/TranslationNode.tsx

@@ -7,6 +7,8 @@ export default styled.div<{ arabic?: boolean }>`
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 400;
+    display: block;
+    clear: both;
     @media (max-width: ${({ theme }) => theme.breakpointsMd}) {
       font-size: 12px;
     }

src/components/Word.tsx

@@ -13,8 +13,13 @@ import {
   PlayCurrentWord,
 } from '../redux/actions/audioplayer';
 
-const WordGlyph = styled.a<{ highlight?: boolean }>`
+const WordGlyph = styled.span`
   -webkit-font-smoothing: antialiased;
+`;
+
+const WordWrap = styled.a<{ highlight?: boolean }>`
+  -webkit-font-smoothing: antialiased;
+  float: right;
   color: ${({ highlight, theme }) =>
     highlight ? theme.brandPrimary : 'initial'};
 `;
@@ -154,23 +159,27 @@ class Word extends Component<Props> {
       <span>
         <Tooltip
           arrow
-          style={{ position: 'relative' }}
+          style={{ position: 'relative', float: 'right', overflow: 'hidden' }}
           title={this.getTooltipTitle()}
         >
-          <WordGlyph
+          <WordWrap
             role="button"
             tabIndex={audioPosition}
             highlight={isCurrentVersePlaying}
             id={id}
             onDoubleClick={this.handleSegmentPlay}
             onClick={this.handleWordPlay}
             onKeyPress={this.handleWordPlay}
-            className={className}
-            dangerouslySetInnerHTML={{ __html: text }}
-          />
-          <WordText
-            dangerouslySetInnerHTML={{ __html: word.textMadani || '' }}
-          />
+          >
+            <WordGlyph
+              className={className}
+              dangerouslySetInnerHTML={{ __html: text }}
+            />
+
+            <WordText
+              dangerouslySetInnerHTML={{ __html: `${word.textMadani} ` || ' ' }}
+            />
+          </WordWrap>
         </Tooltip>
         {word.charType === WORD_TYPES.CHAR_TYPE_WORD && (
           <small style={{ letterSpacing: -15 }}>&nbsp;</small>

src/redux/reducers/settings.ts

@@ -10,7 +10,7 @@ export const INITIAL_STATE: SettingsShape = {
   isNightMode: options.isNightMode || false,
   isShowingChapterInfo: options.isShowingChapterInfo || false,
   audio: options.audio || 7, // Mishari Rashid al-`Afasy
-  translations: options.translations || [102], // Clear Quran with footnotes
+  translations: options.translations || [131], // Clear Quran with footnotes
   tooltip: options.tooltip || 'translation',
   fontSize: options.fontSize || {
     arabic: 3.5,