remote-calibrator 0.3.0-beta.2 → 0.3.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-calibrator",
-  "version": "0.3.0-beta.2",
+  "version": "0.3.0-beta.7",
   "description": "A toolbox for remote testing calibration and tracking.",
   "main": "lib/RemoteCalibrator.min.js",
   "directories": {
@@ -15,7 +15,8 @@
     "build": "webpack --env=production",
     "serve": "node server.js",
     "prepare": "husky install",
-    "netlify": "cp -r ./lib ./homepage"
+    "netlify": "cp -r ./lib ./homepage",
+    "phrases": "node i18n/fetch-languages-sheets.js && git add src/i18n.js"
   },
   "repository": {
     "type": "git",
@@ -28,28 +29,31 @@
   },
   "homepage": "https://github.com/EasyEyes/remote-calibrator#readme",
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.15.8",
     "autoprefixer": "^10.3.7",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.3.0",
+    "css-loader": "^6.4.0",
     "cssnano": "^5.0.8",
     "eslint": "^7.32.0",
     "eslint-webpack-plugin": "^3.0.1",
     "express": "^4.17.1",
+    "googleapis": "^88.2.0",
     "husky": "^7.0.2",
-    "lint-staged": "^11.2.0",
-    "postcss-loader": "^6.1.1",
+    "lint-staged": "^11.2.3",
+    "nodemon": "^2.0.13",
+    "postcss-loader": "^6.2.0",
     "prettier": "^2.4.1",
     "sass": "^1.42.1",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^12.2.0",
     "style-loader": "^3.3.0",
     "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^5.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.57.1",
-    "webpack-cli": "^4.8.0",
-    "webpack-modules": "^1.0.0"
+    "webpack": "^5.58.2",
+    "webpack-cli": "^4.9.0",
+    "webpack-modules": "^1.0.0",
+    "xlsx": "^0.17.3"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",

package/src/components/buttons.js

@@ -1,6 +1,7 @@
+import { phrases } from '../i18n'
 import '../css/buttons.scss'
 
-export const addButtons = (parent, { go, cancel }, showCancelButton) => {
+export const addButtons = (RCL, parent, { go, cancel }, showCancelButton) => {
   const buttons = document.createElement('div')
   buttons.className = 'rc-buttons'
   buttons.id = 'rc-buttons'
@@ -11,7 +12,7 @@ export const addButtons = (parent, { go, cancel }, showCancelButton) => {
     goButton = document.createElement('button')
     goButton.className = 'rc-button rc-go-button'
     goButton.onclick = go
-    goButton.innerHTML = 'OK'
+    goButton.innerHTML = phrases.RC_ok[RCL]
     buttons.appendChild(goButton)
   }
 
@@ -19,7 +20,7 @@ export const addButtons = (parent, { go, cancel }, showCancelButton) => {
     cancelButton = document.createElement('button')
     cancelButton.className = 'rc-button rc-cancel-button'
     cancelButton.onclick = cancel
-    cancelButton.innerHTML = 'Cancel'
+    cancelButton.innerHTML = phrases.RC_cancel[RCL]
     buttons.appendChild(cancelButton)
   }
 

package/src/components/language.js

@@ -0,0 +1,31 @@
+import { phrases } from '../i18n'
+
+export function looseSetLanguage(lang) {
+  const originalKeys = Object.keys(phrases.EE_languageNameNative)
+  if (originalKeys.includes(lang)) return constructLangData(lang)
+
+  const shortKeys = []
+  originalKeys.forEach(l => {
+    shortKeys.push(l.split('-')[0])
+  })
+
+  const shortLang = lang.split('-')[0].toLowerCase()
+
+  if (shortKeys.includes(shortLang))
+    return constructLangData(originalKeys[shortKeys.indexOf(shortLang)])
+
+  return constructLangData('en-US')
+}
+
+function constructLangData(lang) {
+  return {
+    value: {
+      language: lang,
+      languageNameEnglish: phrases.EE_languageNameEnglish[lang],
+      languageNameNative: phrases.EE_languageNameNative[lang],
+      languageDirection: phrases.EE_languageDirection[lang],
+      languagePhraseSource: phrases.EE_phraseSource[lang],
+    },
+    timestamp: new Date(),
+  }
+}

package/src/components/swalOptions.js

@@ -1,3 +1,5 @@
+import { phrases } from '../i18n'
+
 export const swalInfoOptions = RC => {
   return {
     icon: 'info',
@@ -5,7 +7,7 @@ export const swalInfoOptions = RC => {
     allowEnterKey: false,
     allowOutsideClick: false,
     showConfirmButton: true,
-    confirmButtonText: 'OK',
+    confirmButtonText: phrases.RC_ok[RC.L],
     showClass: {
       popup: 'animate__animated animate__fadeInUp',
       // backdrop: 'animate__animated animate__fadeIn',
@@ -19,7 +21,7 @@ export const swalInfoOptions = RC => {
     customClass: {
       icon: 'my__swal2__icon',
       title: 'my__swal2__title',
-      htmlContainer: 'my__swal2__html',
+      htmlContainer: 'my__swal2__html' + ` rc-lang-${RC.LD.toLowerCase()}`,
     },
   }
 }

package/src/{helpers.js → components/utils.js}

@@ -98,9 +98,15 @@ export function getFullscreen() {
 
 /* -------------------------------------------------------------------------- */
 
-export function constructInstructions(headline, description = null) {
+export function constructInstructions(
+  headline,
+  description = null,
+  scrollable = false
+) {
   return (
-    `<div class="calibration-instruction"><h1>${headline}</h1>` +
+    `<div class="calibration-instruction${
+      scrollable ? ' calibration-instruction-scrollable' : ''
+    }"><h1>${headline}</h1>` +
     (description
       ? `<p class="calibration-description">${description}</p></div>`
       : '')

package/src/const.js

@@ -14,17 +14,17 @@ RemoteCalibrator.prototype._CONST = Object.freeze({
     },
   },
   S: {
+    AUTO: 'AUTO',
     CLICK_TYPE: {
       MOUSE: 'mouse',
       TOUCH: 'touch',
     },
   },
   COLOR: {
+    LIGHT_GREY: '#cccccc',
     ORANGE: '#ff9a00',
     DARK_RED: '#ac0d0d',
   },
-  CREDIT_TEXT: {
-    BLIND_SPOT_TEST: `As suggested by the Li et al. (2020) "Virtual Chinrest" paper.`,
-    CREDIT_CARD: `Credit card suggested by the Li et al. (2020) "Virtual Chinrest" paper.`,
-  },
+  LTR: 'LTR',
+  RTL: 'RTL',
 })

package/src/core.js

@@ -9,7 +9,13 @@ import DeviceDetector from 'device-detector-js'
 
 import randomPhrases from './components/randomPhrases'
 import { debug } from './debug'
-import { getFullscreen, blurAll, constructInstructions } from './helpers'
+import {
+  getFullscreen,
+  blurAll,
+  constructInstructions,
+} from './components/utils'
+import { looseSetLanguage } from './components/language'
+import { phrases } from './i18n'
 
 class RemoteCalibrator {
   constructor() {
@@ -29,6 +35,9 @@ class RemoteCalibrator {
 
     this._id = null
 
+    this._lang = null // A single string, e.g., 'en-US'
+    this._langData = []
+
     this._environmentData = []
 
     this._displayData = [] // Px
@@ -76,6 +85,7 @@ class RemoteCalibrator {
   ////
 
   get id() {
+    if (!this._id) return null
     return {
       value: this._id.value,
       timestamp: this._id.timestamp,
@@ -100,6 +110,47 @@ class RemoteCalibrator {
     }
   }
 
+  get supportedLanguages() {
+    const a = []
+    for (let l in phrases.EE_languageNameEnglish) {
+      a.push({
+        language: l,
+        languageNameEnglish: phrases.EE_languageNameEnglish[l],
+        languageNameNative: phrases.EE_languageNameNative[l],
+      })
+    }
+
+    return a
+  }
+
+  get L() {
+    return this._lang
+  }
+
+  get LD() {
+    return this.languageDirection.value
+  }
+
+  get language() {
+    return this._helper_get(this._langData, 'language')
+  }
+
+  get languageNameEnglish() {
+    return this._helper_get(this._langData, 'languageNameEnglish')
+  }
+
+  get languageNameNative() {
+    return this._helper_get(this._langData, 'languageNameNative')
+  }
+
+  get languageDirection() {
+    return this._helper_get(this._langData, 'languageDirection')
+  }
+
+  get languagePhraseSource() {
+    return this._helper_get(this._langData, 'languagePhraseSource')
+  }
+
   // Status
 
   get isFullscreen() {
@@ -179,6 +230,11 @@ class RemoteCalibrator {
     return this._helper_get(this._environmentData, 'fullDescription')
   }
 
+  get userLanguage() {
+    if (!this._environmentData.length) this.environment()
+    return this._helper_get(this._environmentData, 'userLanguage')
+  }
+
   // Screen
 
   get displayWidthPx() {
@@ -283,6 +339,10 @@ class RemoteCalibrator {
     return this._environmentData
   }
 
+  get languageData() {
+    return this._langData
+  }
+
   /* --------------------------------- SETTERS -------------------------------- */
 
   /**
@@ -347,6 +407,13 @@ class RemoteCalibrator {
   set newFullscreenData(data) {
     this._fullscreenData.push(data)
   }
+
+  /**
+   * @param {{ value: { language: string; languageNameEnglish: string; languageNameNative: string; languageDirection: string; languagePhraseSource: string; }; timestamp: Date; }} data
+   */
+  set newLanguageData(data) {
+    this._langData.push(data)
+  }
 }
 
 /**
@@ -360,6 +427,7 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
     options = Object.assign(
       {
         id: randomPhrases(),
+        language: 'AUTO',
         fullscreen: false,
       },
       options
@@ -374,6 +442,12 @@ RemoteCalibrator.prototype.init = function (options = {}, callback) {
 
     this.environment()
 
+    if (this._CONST.S.AUTO === options.language)
+      // AUTO
+      this.newLanguageData = looseSetLanguage(this.userLanguage.value)
+    else this.newLanguageData = looseSetLanguage(options.language)
+    this._lang = this.language.value
+
     if (callback && typeof callback === 'function') callback(this._id)
   }
 }
@@ -390,9 +464,18 @@ RemoteCalibrator.prototype.environment = function (callback) {
     const device = this.deviceDetector.parse(platform.ua)
     const bot = device.bot
 
+    if (!device.device)
+      device.device = {
+        type: null,
+        model: null,
+        brand: null,
+      }
+
     const data = {
       value: {
-        bot: bot ? `${bot.name} (${bot.category}) by ${bot.producer.name}` : '',
+        bot: bot
+          ? `${bot.name} (${bot.category}) by ${bot.producer.name}`
+          : null,
         browser: platform.name,
         browserVersion: platform.version,
         deviceType: device.device.type,
@@ -403,6 +486,8 @@ RemoteCalibrator.prototype.environment = function (callback) {
         systemFamily: platform.os.family,
         description: platform.description,
         fullDescription: platform.ua,
+        userLanguage:
+          window.navigator.userLanguage || window.navigator.language,
       },
       timestamp: this.id.timestamp,
     }
@@ -438,6 +523,10 @@ RemoteCalibrator.prototype.getFullscreen = function (f = true) {
 
   if (f && !debug) getFullscreen()
 
+  // Minimize address bar on mobile devices
+  // ! Experimental
+  if (this.isMobile.value) window.scrollBy(0, 1)
+
   this.newFullscreenData = {
     value: f && !debug,
     timestamp: new Date(),
@@ -446,6 +535,18 @@ RemoteCalibrator.prototype.getFullscreen = function (f = true) {
   return f && !debug
 }
 
+/**
+ * Set a new language
+ */
+RemoteCalibrator.prototype.newLanguage = function (lang) {
+  if (this.checkInitialized()) {
+    let data
+    this.newLanguageData = data = looseSetLanguage(lang)
+    this._lang = this.language.value
+    return data
+  }
+}
+
 /**
  *
  * Add background
@@ -458,6 +559,7 @@ RemoteCalibrator.prototype._addBackground = function (inner) {
   if (!b) {
     b = document.createElement('div')
     b.id = 'calibration-background'
+    b.className = 'calibration-background' + ` rc-lang-${this.LD.toLowerCase()}`
 
     document.body.classList.add('lock-view')
     document.body.appendChild(b)

package/src/css/buttons.scss

@@ -8,15 +8,31 @@
 .rc-button {
   text-align: center;
   border: none !important;
-  background: #ffffffee;
   line-height: 150% !important;
   font-size: 1rem !important;
   font-weight: 700 !important;
-  color: #333;
   padding: 1rem 1.5rem !important;
   margin: 0.25rem !important;
   border-radius: 7px !important;
   cursor: pointer;
+}
+
+.rc-go-button {
+  background: #ff9a00aa;
+  color: #fff;
+
+  &:hover {
+    background: #ff9a00;
+  }
+
+  &:active {
+    background: #d68200;
+  }
+}
+
+.rc-cancel-button {
+  background: #ffffffee;
+  color: #333;
 
   &:hover {
     background: #ddd;

package/src/css/distance.scss

@@ -3,17 +3,22 @@
 }
 
 #blind-spot-canvas {
-  z-index: -1;
+  position: fixed;
   display: block;
-  position: absolute;
+  z-index: -1;
   top: 0;
   left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
 }
 
-#blind-spot-instruction {
-  display: block !important;
-  top: 65%;
-}
+// #blind-spot-instruction {
+//   display: block !important;
+//   top: 65%;
+//   position: fixed;
+// }
 
 #pip-video {
   display: none;
@@ -31,7 +36,7 @@
 /* ----------------------------------- PD ----------------------------------- */
 
 #rc-ruler {
-  position: absolute;
+  position: fixed;
   max-height: 120px;
   overflow: hidden;
 }

package/src/css/main.css

@@ -28,10 +28,13 @@
 
 .calibration-instruction {
   position: absolute;
-  text-align: left;
   user-select: none;
 }
 
+.calibration-instruction-scrollable {
+  height: 200%;
+}
+
 .calibration-instruction h1 {
   min-width: 360px;
   font-weight: 700;
@@ -106,7 +109,7 @@
 }
 
 .float-instruction {
-  position: absolute;
+  position: fixed;
   text-align: center;
   user-select: none;
   background: rgba(255, 255, 255, 0.9);
@@ -132,12 +135,11 @@
   position: fixed !important;
   width: 100% !important;
   bottom: 3px !important;
-  left: 50% !important;
-  transform: translate(-50%, 0) !important;
   color: #999 !important;
   margin: 0 !important;
   padding: 0 !important;
   line-height: 100% !important;
+  text-align: center !important;
 }
 
 /* -------------------------------------------------------------------------- */
@@ -145,3 +147,15 @@
 .lock-view {
   overflow: hidden !important;
 }
+
+/* -------------------------------------------------------------------------- */
+
+.rc-lang-ltr {
+  direction: ltr !important;
+  text-align: left !important;
+}
+
+.rc-lang-rtl {
+  direction: rtl !important;
+  text-align: right !important;
+}

package/src/css/panel.scss

@@ -17,7 +17,6 @@
   border-radius: 10px !important;
   box-shadow: var(--rc-panel-darken-color-semi) 0px 50px 100px -20px,
     var(--rc-panel-theme-color-semi) 0px 30px 60px -30px !important;
-  text-align: left !important;
 
   * {
     outline: none;
@@ -34,7 +33,7 @@
 
   .rc-panel-title {
     color: #fff !important;
-    margin: 1rem auto 0 1rem !important;
+    margin: 1rem 1rem 0 1rem !important;
     font-size: 2rem !important;
     font-weight: 600 !important;
   }
@@ -100,10 +99,6 @@
     &.rc-panel-steps-s {
       flex-flow: column nowrap;
 
-      .rc-panel-step {
-        text-align: left;
-      }
-
       .rc-panel-step-name {
         margin: 1.2rem 1.5rem !important;
       }

package/src/css/screenSize.css

@@ -1,41 +1,43 @@
-.slider {
+.rc-slider {
   position: absolute;
   display: block;
   -webkit-appearance: none;
   appearance: none;
   width: calc(100% - 4rem);
-  height: 30px;
-  background: #fff;
-  opacity: 0.7;
+  height: 10px;
+  background: linear-gradient(90deg, #ffc772, #ffc772 60%, #fff 60%);
+  opacity: 0.8;
   /* top: max(45%, 200px); */
   left: 2rem;
-  border-radius: 15px;
+  border-radius: 5px;
   z-index: 1;
   cursor: grab;
   -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
+  direction: ltr !important;
 }
 
-.slider:hover {
+.rc-slider:hover {
   opacity: 0.99;
 }
 
-.slider::-webkit-slider-thumb {
+.rc-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 30px;
   height: 30px;
   border-radius: 15px;
-  background: #666;
+  background: #ff9a00;
+  box-shadow: 0 0 12px 0 #88520033;
   cursor: inherit;
 }
 
-.slider::-moz-range-thumb,
-.slider::-ms-thumb {
-  width: 20px;
+.rc-slider::-moz-range-thumb,
+.rc-slider::-ms-thumb {
+  width: 30px;
   height: 30px;
   border-radius: 15px;
-  background: #666;
+  background: #ff9a00;
   cursor: inherit;
 }
 
@@ -55,21 +57,22 @@
 #size-arrow {
   position: absolute;
   display: block;
+  /* display: none; */
   width: 70px;
   height: auto;
   z-index: 3;
 }
 
 #size-arrow-fill {
-  transition: fill 0.1s;
+  transition: fill 0.3s;
 }
 
 .minor {
-  transition: opacity 0.1s;
+  transition: opacity 0.25s;
 }
 
-.slider:hover ~ .size-obj .minor,
-.slider:active ~ .size-obj .minor {
+/* .rc-slider:hover ~ .size-obj .minor, */
+.rc-slider:active ~ .size-obj .minor {
   opacity: 0;
 }
 

package/src/css/swal.css

@@ -25,7 +25,6 @@
   line-height: 150% !important;
   font-weight: normal !important;
   user-select: none !important;
-  text-align: left !important;
 }
 
 .animate__animated.animate__fadeInUp,

package/src/displaySize.js

@@ -1,5 +1,5 @@
 import RemoteCalibrator from './core'
-import { blurAll } from './helpers'
+import { blurAll } from './components/utils'
 
 /**
  *