doc(FEC-12795): add/update docs

docs/translations.md

@@ -1,70 +1,84 @@
-# Adding translations and choosing locale language
+# Player UI Labels Translations 
 
 The UI locale can be customized by adding translations to the dictionary object.
 Dictionaries can be added via the config object and the UI language, can be set via the locale config.
 
-## Defining a new language
+* The ui language should be from the ISO Language Code List [ISO Language Codes](https://datahub.io/core/language-codes)
+
+## Defining a new labels for a given language 
 
 The language dictionary is a key-value store defining, where key is the UI placeholder name and value is the translated string to appear.
 
+The app developer may change the default values for one of the supported languages or add support for unsupported language by deffining values for the player pre-defined labels keys
+
 A value in a key-value may be a string or an object containing a list of key-value pairs.
 
-A sample English dictionary may look like:
-
-```json
-{
-  "controls": {
-    "play": "Play",
-    "pause": "Pause",
-    "language": "Language",
-    "settings": "Settings",
-    "fullscreen": "Fullscreen",
-    "rewind": "Rewind",
-    "vrStereo": "vrStereo",
-    "live": "Live",
-    "unmute": "Unmute",
-    "next": "Next",
-    "prev": "Prev"
-  },
-  "settings": {
-    "quality": "Quality",
-    "speed": "Speed"
-  },
-  "language": {
-    "audio": "Audio",
-    "captions": "Captions",
-    "advanced_captions_settings": "Advanced captions settings"
-  },
-  "overlay": {
-    "close": "Close"
-  },
-  "error": {
-    "default_error": "Something went wrong",
-    "default_session_text": "Session ID",
-    "retry": "Retry"
-  },
-  "ads": {
-    "ad_notice": "Advertisement",
-    "learn_more": "Learn more",
-    "skip_ad": "Skip ad",
-    "skip_in": "Skip in"
-  },
-  "cvaa": {
-    "title": "Advanced captions settings",
-    "sample_caption_tag": "Sample",
-    "set_custom_caption": "Set custom caption",
-    "edit_caption": "Edit caption",
-    "size_label": "Size",
-    "font_color_label": "Font color",
-    "font_family_label": "Font family",
-    "font_style_label": "Font style",
-    "font_opacity_label": "Font opacity",
-    "background_color_label": "Background color",
-    "background_opacity_label": "Background opacity",
-    "apply": "Apply",
-    "caption_preview": "This is your caption preview"
-  }
+### A sample *English Dictionary* may look like:
+
+#### en = English
+
+The application will set the "ui" configuration on the root level of the player's config
+
+```
+"ui": {
+	"translations": {
+			"en": {
+					    "controls": {
+						    "play": "Play",
+						    "pause": "Pause",
+						    "language": "Language",
+						    "settings": "Settings",
+						    "fullscreen": "Fullscreen",
+						    "rewind": "Rewind",
+						    "vrStereo": "vrStereo",
+						    "live": "Live",
+						    "unmute": "Unmute",
+						    "next": "Next",
+						    "prev": "Prev"
+					  },
+					  "settings": {
+						    "quality": "Quality",
+						    "speed": "Speed"
+					  },
+					  "language": {
+						    "audio": "Audio",
+						    "captions": "Captions",
+						    "advanced_captions_settings": "Advanced captions settings"
+					  },
+					  "overlay": {
+					   		 "close": "Close"
+					  },
+					  "error": {
+						    "default_error": "Something went wrong",
+						    "default_session_text": "Session ID",
+						    "retry": "Retry"
+					  },
+					  "ads": {
+						    "ad_notice": "Advertisement",
+						    "learn_more": "Learn more",
+						    "skip_ad": "Skip ad",
+						    "skip_in": "Skip in"
+					  },
+					  "cvaa": {
+						    "title": "Advanced captions settings",
+						    "sample_caption_tag": "Sample",
+						    "set_custom_caption": "Set custom caption",
+						    "edit_caption": "Edit caption",
+						    "size_label": "Size",
+						    "font_color_label": "Font color",
+						    "font_family_label": "Font family",
+						    "font_style_label": "Font style",
+						    "font_opacity_label": "Font opacity",
+						    "background_color_label": "Background color",
+						    "background_opacity_label": "Background opacity",
+						    "apply": "Apply",
+						    "caption_preview": "This is your caption preview"
+					  }
+					}
+				}
+		}
 }
+
 ```
 
 For complete translation reference see [here](/translations/en.i18n.json).
@@ -73,22 +87,27 @@ Default locale is English.
 
 A translation file may contain all the keys in the English translation, and any key not found in the new translation will fallback to using the English one.
 
-## Choosing the display language
+## Choosing the display language (locale language)
+
 
 Setting the display language is done by defining the `locale` config option, where English is the default one.
 
 > Only a locale that exist in the translations dictionary may be set, and setting a locale that doesn't exist will result in keeping the default one set.
 
-```json5
-{
-  locale: 'es', //set the desired locale
-  translations: {
-    en: {
-      /*English dictionary*/
+```
+"ui": {
+  "locale": "es", //set the desired locale
+  "translations": {
+    "en": {
+      /*English dictionary like the above example*/
+    },
+    "es": {
+      /*Spanish dictionary like the above example*/
     },
-    es: {
-      /*Spanish dictionary*/
+    "ar": {
+      /*Arabic dictionary like the above example*/
     }
+    ....
   }
 }
 ```

docs/watermark.md

@@ -0,0 +1,36 @@
+# Player Watermark 
+
+The playr UI top level customization exposes `components` configurations where applications can customize their watermark on the player.
+
+
+##### You can read some more about `componetns` configuraion [here](https://github.com/kaltura/playkit-js-ui/blob/master/docs/configuration.md#configcomponents)
+
+### Default watermark configuration:
+
+```
+{
+   img: string, // URL ro the watermark image
+   url: string,  // Click thrugh URL to the website that you own
+   placement: string, // Watermark location - ["top-left", "top-right", "bottom-left", "bottom-right"] default top-left
+   timeout: number // miliseconds, if given the it will trigger a timer to remove the watermark once playbsack starts - default 0 (not removed)
+}
+```
+
+#### Example
+
+```
+"ui": {
+	"components": {
+		"watermark": {
+		    "img": "data:image/png;base64,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",
+		    "url": "https://kaltura.com",
+		    "placement": "top-right",
+		    "timeout": 10000 // 10 seconds
+		  }
+		}		
+	}
+}
+```
+
+
+![Watermark](images/watermark.png)