feat: add translations of es_419 and es_ES (#22)

* feat: add translations of es_419 and es_ES

.github/workflows/main.yml

@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: install pip
-        run: |  
+        run: |
           apt update -qq
           apt install -y python3-pip
           pip3 --version
@@ -34,8 +34,12 @@ jobs:
           pip install -qr requirements/dev.txt
           pip install -qr requirements/local.txt
 
+      - name: Setup dependencies
+        run: |
+          pip install xblock-utils==3.4.1
+
       - name: setup h5p xblock
-        run: |          
+        run: |
           pip install .
 
       - name: Run xblock workbench

.gitignore

@@ -54,7 +54,6 @@ coverage.xml
 .pytest_cache/
 
 # Translations
-*.mo
 *.pot
 
 # Django stuff:

Makefile

@@ -0,0 +1,21 @@
+PACKAGE_NAME := h5pxblock
+EXTRACT_DIR := $(PACKAGE_NAME)/locale/en/LC_MESSAGES
+EXTRACTED_DJANGO := $(EXTRACT_DIR)/django-partial.po
+EXTRACTED_DJANGOJS := $(EXTRACT_DIR)/djangojs-partial.po
+EXTRACTED_TEXT := $(EXTRACT_DIR)/text.po
+JS_TARGET := public/js/translations
+TRANSLATIONS_DIR := $(PACKAGE_NAME)/translations
+
+extract_translations: symlink_translations ## extract strings to be translated, outputting .po files
+	cd $(PACKAGE_NAME) && i18n_tool extract
+	mv $(EXTRACTED_DJANGO) $(EXTRACTED_TEXT)
+	if [ -f "$(EXTRACTED_DJANGOJS)" ]; then cat $(EXTRACTED_DJANGOJS) >> $(EXTRACTED_TEXT); rm $(EXTRACTED_DJANGOJS); fi
+
+compile_translations: symlink_translations ## compile translation files, outputting .mo files for each supported language
+	cd $(PACKAGE_NAME) && i18n_tool generate
+
+detect_changed_source_translations:
+	cd $(PACKAGE_NAME) && i18n_tool changed
+
+symlink_translations:
+	if [ ! -d "$(TRANSLATIONS_DIR)" ]; then ln -s locale/ $(TRANSLATIONS_DIR); fi

README.md

@@ -4,7 +4,7 @@
 H5P Xblock provides ability to host and play H5P content in open edX. It has few more features
 
 1. Ability to mark H5P content complete in open edX
-2. Ablity to capture score of H5P content in open edX
+2. Ability to capture score of H5P content in open edX
 3. Save learner state which can be retrieved later
 4. Ability to host H5P content on cloud storage like AWS S3
 
@@ -36,3 +36,12 @@ on LMS
 
 ![Preview H5P content in LMS](https://github.com/edly-io/h5pxblock/blob/master/docs/images/preview_content.png?raw=true)
 
+
+# Working with translations
+
+You can help by translating this project. Follow the steps below:
+
+1. Create a folder for the translations in `locale/`, eg: `locale/es_419/LC_MESSAGES/`, and create your `text.po` file
+with all the translations.
+2. Run `make compile_translations`, this will generate the `text.mo` file.
+3. Create a pull request with your changes.

h5pxblock/h5pxblock.py

@@ -6,21 +6,23 @@
 import pkg_resources
 
 from django.conf import settings
-from django.template import Context, Template
 from django.utils import timezone
 from webob import Response
 
 from xblock.completable import CompletableXBlockMixin
 from xblock.core import XBlock
 from xblock.fields import Scope, String, Boolean, Integer, Dict, DateTime, UNIQUE_ID
 from xblock.fragment import Fragment
+from xblockutils.resources import ResourceLoader
+
 from h5pxblock.utils import get_h5p_storage, str2bool, unpack_and_upload_on_cloud, unpack_package_local_path
 
 
 # Make '_' a no-op so we can scrape strings
 _ = lambda text: text
 
 log = logging.getLogger(__name__)
+loader = ResourceLoader(__name__)
 
 H5P_ROOT = os.path.join(settings.MEDIA_ROOT, "h5pxblockmedia")
 H5P_URL = os.path.join(settings.MEDIA_URL, "h5pxblockmedia")
@@ -94,8 +96,8 @@ class H5PPlayerXBlock(XBlock, CompletableXBlockMixin):
     save_freq = Integer(
         display_name=_("User content state save frequency"),
         help=_(
-            "How often current user content state should be autosaved (in seconds). \
-                Set it to zero if you don't want to save content state."
+            "How often current user content state should be autosaved (in seconds). "
+            "Set it to zero if you don't want to save content state."
         ),
         default=0,
         scope=Scope.settings,
@@ -116,9 +118,22 @@ def resource_string(self, path):
         return data.decode("utf8")
 
     def render_template(self, template_path, context):
-        template_str = self.resource_string(template_path)
-        template = Template(template_str)
-        return template.render(Context(context))
+        """
+        Render a template with the given context. The template is translated
+        according to the user's language.
+
+        Args:
+            template_path (str): The path to the template
+            context(dict, optional): The context to render in the template
+
+        Returns:
+            str: The rendered template
+        """
+        return loader.render_django_template(
+            template_path,
+            context,
+            i18n_service=self.runtime.service(self, 'i18n'),
+        )
 
     @property
     def store_content_on_local_fs(self):

h5pxblock/locale/config.yaml

@@ -0,0 +1,93 @@
+# Configuration for i18n workflow.
+
+locales:
+    - en  # English - Source Language
+    # - am  # Amharic
+    - ar  # Arabic
+    # - az  # Azerbaijani
+    # - bg_BG  # Bulgarian (Bulgaria)
+    # - bn_BD  # Bengali (Bangladesh)
+    # - bn_IN  # Bengali (India)
+    # - bs  # Bosnian
+    # - ca  # Catalan
+    # - ca@valencia  # Catalan (Valencia)
+    # - cs  # Czech
+    # - cy  # Welsh
+    # - da  # Danish
+    # - de_DE  # German (Germany)
+    # - el  # Greek
+    # - en_GB  # English (United Kingdom)
+    # # Don't pull these until we figure out why pages randomly display in these locales,
+    # # when the user's browser is in English and the user is not logged in.
+    # #- en@lolcat  # LOLCAT English
+    # #- en@pirate  # Pirate English
+    - es_419  # Spanish (Latin America)
+    # - es_AR  # Spanish (Argentina)
+    # - es_EC  # Spanish (Ecuador)
+    - es_ES  # Spanish (Spain)
+    # - es_MX  # Spanish (Mexico)
+    # - es_PE  # Spanish (Peru)
+    # - et_EE  # Estonian (Estonia)
+    # - eu_ES  # Basque (Spain)
+    # - fa  # Persian
+    # - fa_IR  # Persian (Iran)
+    # - fi_FI  # Finnish (Finland)
+    # - fil  # Filipino
+    - fr  # French
+    # - gl  # Galician
+    # - gu  # Gujarati
+    - he  # Hebrew
+    - hi  # Hindi
+    # - hr  # Croatian
+    # - hu  # Hungarian
+    # - hy_AM  # Armenian (Armenia)
+    # - id  # Indonesian
+    # - it_IT  # Italian (Italy)
+    # - ja_JP  # Japanese (Japan)
+    # - kk_KZ  # Kazakh (Kazakhstan)
+    # - km_KH  # Khmer (Cambodia)
+    # - kn  # Kannada
+    - ko_KR  # Korean (Korea)
+    # - lt_LT  # Lithuanian (Lithuania)
+    # - ml  # Malayalam
+    # - mn  # Mongolian
+    # - mr  # Marathi
+    # - ms  # Malay
+    # - nb  # Norwegian Bokmål
+    # - ne  # Nepali
+    # - nl_NL  # Dutch (Netherlands)
+    # - or  # Oriya
+    # - pl  # Polish
+    - pt_BR  # Portuguese (Brazil)
+    # - pt_PT  # Portuguese (Portugal)
+    # - ro  # Romanian
+    - ru  # Russian
+    # - si  # Sinhala
+    # - sk  # Slovak
+    # - sl  # Slovenian
+    # - sq  # Albanian
+    # - sr  # Serbian
+    # - sv  # Swedish
+    # - sw  # Swahili
+    # - ta  # Tamil
+    # - te  # Telugu
+    # - th  # Thai
+    # - tr_TR  # Turkish (Turkey)
+    # - uk  # Ukranian
+    # - ur  # Urdu
+    # - uz  # Uzbek
+    # - vi  # Vietnamese
+    - zh_CN  # Chinese (China)
+    # - zh_HK  # Chinese (Hong Kong)
+    # - zh_TW  # Chinese (Taiwan)
+
+
+# The locales used for fake-accented English, for testing.
+dummy_locales:
+    - eo
+    - rtl  # Fake testing language for Arabic
+
+# Directories we don't search for strings.
+ignore_dirs:
+    - '*/css'
+    - 'public/js/translations'