Support for translated player

README.md

@@ -93,7 +93,16 @@ We are [Podigee](https://www.podigee.com "The Podcast Hosting Platform"), an awe
 
 If you would like to propose new features or have found a bug, please use [Github issues](https://github.com/podigee/podigee-podcast-player/issues) to tell us.
 
-If you would like to help us improve the player please [get in touch with us](mailto:hello@podigee.com).
+### Installing the dev dependencies
+
+# Assuming nodejs is installed
+
+npm install gulp-cli -g
+npm install gulp -D
+gulp dev
+gulp serve
+
+Open http://0.0.0.0:8081/ in your browser.
 
 ## License
 

src/javascripts/configuration.coffee

@@ -4,6 +4,7 @@ Utils = require('./utils.coffee')
 rivets = require('rivets')
 
 ExternalData = require('./external_data.coffee')
+I18n = require('./i18n.coffee')
 Podcast = require('./podcast.coffee')
 
 class Configuration
@@ -71,6 +72,12 @@ class Configuration
     @app.options.configViaJSON = viaJSON
     @app.externalData = new ExternalData(@app)
 
+    # The locale can be fixed in the player config, or autodetected by the browser. 
+    # It will fall back to en-US if no locale was found
+    confLocale = @configuration.options.locale
+    i18n = new I18n(confLocale, @defaultOptions.locale)
+    @app.i18n = i18n
+
     if @configuration.episode
       @app.episode = @configuration.episode
     else
@@ -102,6 +109,7 @@ class Configuration
     # Can be 'script' or 'iframe' depending on how the player is embedded
     # Using a <iframe> tag is considered the default
     iframeMode: 'iframe'
+    locale: 'en-US'
   }
 
   configureTemplating: =>

src/javascripts/extension.coffee

@@ -12,20 +12,22 @@ class Extension
   defaultOptions: {}
 
   renderButton: =>
-    @button = $(@buttonHtml)
+    @button = $(@buttonHtml())
     @button.on 'click', =>
       @app.theme.togglePanel(@panel)
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
     @panel.hide()
 
-  buttonHtml:
+  t: (key) -> @app.i18n.t(key)
+
+  buttonHtml: ->
     """
     <button class="fa fa-bookmark" title="Show example extension"></button>
     """
 
-  panelHtml:
+  panelHtml: ->
     """
     <div class="example">
       <h3>Example</h3>

src/javascripts/extensions/chaptermarks.coffee

@@ -59,7 +59,7 @@ class ChapterMarks extends Extension
     @app.player.media.currentTime = Utils.hhmmssToSeconds(time)
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
     @panel.hide()
     @chaptermarks = _.map(@chapters, (item) =>
       new ChapterMark(item, @click)
@@ -93,15 +93,15 @@ class ChapterMarks extends Extension
   deactivateAll: =>
     @panel.find('li').removeClass('active')
 
-  buttonHtml:
+  buttonHtml: =>
     """
-    <button class="chaptermarks-button" title="Show chaptermarks"></button>
+    <button class="chaptermarks-button" title="#{@t('chaptermarks.show')}"></button>
     """
 
-  panelHtml:
+  panelHtml: =>
     """
     <div class="chaptermarks">
-      <h3>Chaptermarks</h3>
+      <h3>#{@t('chaptermarks.title')}</h3>
 
       <ul></ul>
     </div>

src/javascripts/extensions/chromecast.coffee

@@ -52,18 +52,18 @@ class ChromeCast extends Extension
     elem.show()
 
   renderButton: =>
-    @button = $(@buttonHtml)
+    @button = $(@buttonHtml())
     @button.on 'click', =>
       @active = true
       chrome.cast.requestSession(@onRequestSessionSuccess, @onLaunchError)
 
     @castButton = @button.find('.chromecast-button')
     @castReceiver = @button.find('.chromecast-receiver')
 
-  buttonHtml:
+  buttonHtml: ->
     """
     <button class="chromecast-ui">
-      <img class="chromecast-button" title="Play on chromecast" src="images/chromcast.png"/>
+      <img class="chromecast-button" title="#{@t('chromecast.play')}" src="images/chromcast.png"/>
       <span class="chromecast-receiver"></span>
     </button>
     """

src/javascripts/extensions/download.coffee

@@ -42,19 +42,19 @@ class Download extends Extension
     )
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
     rivets.bind(@panel, @episode)
     @panel.hide()
 
-  buttonHtml:
+  buttonHtml: ->
     """
-    <button class="download-button" title="Download episode"></button>
+    <button class="download-button" title="#{@t('download.episode')}"></button>
     """
 
-  panelHtml:
+  panelHtml: ->
     """
     <div class="download">
-      <h1 class="download-title">Download episode</h1>
+      <h3 class="download-title">#{@t('download.episode')}</h3>
       <div class="icon icon-download"></div>
       <ul class="download-links">
         <li pp-each-link="downloadLinks">

src/javascripts/extensions/episode_info.coffee

@@ -27,19 +27,20 @@ class EpisodeInfo extends Extension
     showOnStart: false
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
     rivets.bind(@panel, @episode)
     @panel.hide()
 
-  buttonHtml:
+  buttonHtml: ->
     """
-    <button class="episode-info-button" title="Show more info"></button>
+    <button class="episode-info-button" title="#{@t('episode_info.more_info')}"></button>
     """
 
-  panelHtml:
+  panelHtml: ->
     """
     <div class="episode-info">
-      <h1 class="episode-title" pp-html="title"></h1>
+      <h3>#{@t('episode_info.title')}</h3>
+      <h3 class="episode-title" pp-html="title"></h3>
       <p class="episode-subtitle" pp-html="subtitle"></p>
       <p class="episode-description" pp-html="description"></p>
     </div>

src/javascripts/extensions/playlist.coffee

@@ -125,7 +125,7 @@ class Playlist extends Extension
     @app.theme.updateView()
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
 
     list = @panel.find('ul')
     _.each @episodes, (episode, index) =>
@@ -135,15 +135,15 @@ class Playlist extends Extension
 
     @panel.hide()
 
-  buttonHtml:
+  buttonHtml: ->
     """
-    <button class="playlist-button" title="Show playlist"></button>
+    <button class="playlist-button" title="#{@t('playlist.show')}"></button>
     """
 
-  panelHtml:
+  panelHtml: ->
     """
     <div class="playlist">
-      <h3>Playlist</h3>
+      <h3>#{@t('playlist.title')}</h3>
 
       <ul></ul>
     </div>

src/javascripts/extensions/share.coffee

@@ -72,7 +72,7 @@ class Share extends Extension
       @episode.url
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
     rivets.bind(@panel, @context)
     @panel.hide()
 
@@ -89,35 +89,35 @@ class Share extends Extension
   copyUrlAction: (event) =>
     event.target.select()
 
-  buttonHtml:
+  buttonHtml: ->
     """
-    <button class="share-button" title="Share episode URL"></button>
+    <button class="share-button" title="#{@t('share.episode_url')}"></button>
     """
 
-  panelHtml:
+  panelHtml: ->
     """
     <div class="share">
-      <h1 class="share-title">Share episode</h1>
+      <h3 class="share-title">#{@t('share.episode')}</h3>
       <ul class="share-social-links">
         <li><a pp-href="shareLinks.facebook" class="share-link-facebook" target="_blank">Facebook</a></li>
         <li><a pp-href="shareLinks.googleplus" class="share-link-googleplus" target="_blank">Google+</a></li>
         <li><a pp-href="shareLinks.twitter" class="share-link-twitter" target="_blank">Twitter</a></li>
         <li><a pp-href="shareLinks.whatsapp" class="share-link-whatsapp" target="_blank">Whatsapp</a></li>
-        <li><a pp-href="shareLinks.email" class="share-link-email" target="_blank">Email</a></li>
+        <li><a pp-href="shareLinks.email" class="share-link-email" target="_blank">#{@t('share.email')}</a></li>
       </ul>
       <div class="share-episode-link">
-        <h3>Copy episode link</h3>
+        <h3>#{@t('share.copy_episode_link')}</h3>
         <p>
           <input class="share-copy-url" pp-value="url">
         </p>
       </div>
       <div class="share-deeplink">
         <input type="checkbox" pp-checked="showUrlWithTime" pp-on-change="updateContext">
-        Start at
+        #{@t('share.start_at')}
         <input type="text" pp-value="currentTime" disabled="disabled">
       </div>
       <div class="share-embed" pp-show="showEmbedUrl">
-        <h3>Embed player</h3>
+        <h3>#{@t('share.embed_player')}</h3>
         <input class="share-embed-code" pp-value="embedCode"/>
       </div>
     </div>

src/javascripts/extensions/transcript.coffee

@@ -26,7 +26,7 @@ class Transcript extends Extension
 
     @transcript = @app.episode.transcript
 
-    @search = new Search()
+    @search = new Search(@app)
 
     @load().done =>
       @renderPanel()
@@ -170,19 +170,19 @@ class Transcript extends Extension
         @deactivateAll(line)
 
   renderPanel: =>
-    @panel = $(@panelHtml)
+    @panel = $(@panelHtml())
     rivets.bind(@panel, @data)
     @panel.hide()
 
-  buttonHtml:
+  buttonHtml: ->
     """
-    <button class="transcript-button" title="Show transcript"></button>
+    <button class="transcript-button" title="#{@t('transcript.show')}"></button>
     """
 
-  panelHtml:
+  panelHtml: ->
     """
     <div class="transcript">
-      <h3>Transcript</h3>
+      <h3>#{@t('transcript.title')}</h3>
 
       <div class="search"></div>
 

src/javascripts/extensions/transcript/search.coffee

@@ -5,7 +5,7 @@ sightglass = require('sightglass')
 rivets = require('rivets')
 
 class TranscriptSearch
-  constructor: () ->
+  constructor: (@app) ->
     @setupIndex()
 
   setupIndex: ->
@@ -106,18 +106,20 @@ class TranscriptSearch
     query: null
 
   render: ->
-    html = $(@html)
+    html = $(@html())
     rivets.bind(html, @data)
     html
 
-  html:
+  t: (key) -> @app.i18n.t(key)
+
+  html: ->
     """
       <div class="search-result" pp-show="query">
         <button class="search-result-prev"></button>
         <span class="search-result-size">{currentIndex}/{resultCount}</span>
         <button class="search-result-next"></button>
       </div>
-      <input type="text" class="search-input" placeholder="Search in transcript">
+      <input type="text" class="search-input" placeholder="#{@t('transcript.search')}">
       <button class="search-clear" pp-show="query">&times;</button>
     """
 module.exports = TranscriptSearch