@lightningjs/blits 1.29.2 → 1.29.4

package/src/engines/L3/element.js

@@ -25,6 +25,12 @@ import Settings from '../../settings.js'
 // temporary counter to work around shader caching issues
 let counter = 0
 
+/**
+ * Creates a padding object from a value and direction.
+ * @param {number|object|string|undefined} padding - The padding value.
+ * @param {string} direction - The layout direction ('vertical' or 'horizontal').
+ * @returns {{start: number, end: number, oppositeStart: number, oppositeEnd: number}} The padding object.
+ */
 const createPaddingObject = (padding, direction) => {
   if (padding === undefined) {
     return { start: 0, end: 0, oppositeStart: 0, oppositeEnd: 0 }
@@ -67,6 +73,11 @@ const createPaddingObject = (padding, direction) => {
   return { start: 0, end: 0, oppositeStart: 0, oppositeEnd: 0 }
 }
 
+/**
+ * Layout function for arranging children in a layout container.
+ * @param {object} config - The layout configuration object.
+ * @this {import('../../component.js').BlitsElement}
+ */
 const layoutFn = function (config) {
   const position = config.direction === 'vertical' ? 'y' : 'x'
   const oppositePosition = config.direction === 'vertical' ? 'x' : 'y'
@@ -135,18 +146,40 @@ const layoutFn = function (config) {
   }
 }
 
+/**
+ * Checks if a value is a transition object.
+ * @param {any} value - The value to check.
+ * @returns {boolean} True if the value is a transition object, false otherwise.
+ */
 const isTransition = (value) => {
   return value !== null && typeof value === 'object' && 'transition' in value === true
 }
 
+/**
+ * Checks if a string is an object string (starts and ends with curly braces).
+ * @param {string} str - The string to check.
+ * @returns {boolean} True if the string is an object string, false otherwise.
+ */
 const isObjectString = (str) => {
   return typeof str === 'string' && str.startsWith('{') && str.endsWith('}')
 }
 
+/**
+ * Parses a string into an object, converting single quotes to double and adding quotes to keys.
+ * @param {string} str - The string to parse.
+ * @returns {object} The parsed object.
+ */
 const parseToObject = (str) => {
   return JSON.parse(str.replace(/'/g, '"').replace(/([\w-_]+)\s*:/g, '"$1":'))
 }
 
+/**
+ * Parses a percentage string or returns the value as-is.
+ * @param {string|number} v - The value to parse (may be a percentage string).
+ * @param {string} base - The base property name ('width' or 'height').
+ * @returns {number|string} The parsed value as a number or the original value.
+ * @this {{ element: { config: { parent?: { node?: Record<string, number> } } } }}
+ */
 const parsePercentage = function (v, base) {
   if (typeof v !== 'string') {
     return v
@@ -160,6 +193,11 @@ const parsePercentage = function (v, base) {
   return v
 }
 
+/**
+ * Unpacks a transition value from an object or returns the value as-is.
+ * @param {any} v - The value to unpack.
+ * @returns {any} The unpacked value.
+ */
 const unpackTransition = (v) => {
   if (typeof v !== 'object' || v === null) return v
   if (v.constructor === Object) {
@@ -180,8 +218,18 @@ const colorMap = {
   right: 'colorRight',
 }
 
+/**
+ * Default text settings for text nodes (initialized on first use).
+ * @type {object|null}
+ */
 let textDefaults = null
 
+/**
+ * @typedef {import('../../component.js').BlitsElement} BlitsElement
+ *
+ * This is always a BlitsElement
+ * @this {BlitsElement} this
+ */
 const propsTransformer = {
   set parent(v) {
     this.props['parent'] = v === 'root' ? renderer.root : v.node
@@ -333,34 +381,12 @@ const propsTransformer = {
         v[i].props.color = colors.normalize(v[i].props.color)
       }
     }
-    const effectNames = {}
     if (this.element.node === undefined) {
-      this.element.effectNames = []
       this.props['shader'] = renderer.createShader('DynamicShader', {
         effects: v.map((effect) => {
-          let name = effect.type
-          if (effectNames[name] !== undefined) {
-            name += ++effectNames[name]
-          } else {
-            effectNames[name] = 1
-          }
-          name += this.element.counter
-          this.element.effectNames.push(name)
-          // temporary add counter to work around shader caching issues
-          return renderer.createEffect(effect.type, effect.props, name)
+          return renderer.createEffect(effect.type, effect.props)
         }),
       })
-    } else {
-      for (let i = 0; i < v.length; i++) {
-        const name = this.element.effectNames[i]
-        // temporary add counter to work around shader caching issues
-        const target = this.element.node.shader.props[name]
-        const props = Object.keys(v[i].props)
-        if (target == undefined) continue
-        for (let j = 0; j < props.length; j++) {
-          target[props[j]] = v[i].props[props[j]]
-        }
-      }
     }
   },
   set clipping(v) {
@@ -448,6 +474,10 @@ const propsTransformer = {
 }
 
 const Element = {
+  /**
+   * Populates the element with data
+   * @param {import('../../component.js').BlitsElementProps} data
+   */
   populate(data) {
     const props = data
     props['node'] = this.config.node
@@ -459,6 +489,7 @@ const Element = {
     this.props.element = this
 
     this.props['parent'] = props['parent'] || this.config.parent
+    //@ts-ignore This might be a left over from the old code?
     delete props.parent
 
     this.props.raw = data
@@ -506,12 +537,24 @@ const Element = {
       })
     }
   },
+  /**
+   * Set an individual property on the node
+   *
+   * @this {import('../../component').BlitsElement} this
+   *
+   * @param {import('../..//component.js').BlitsElementProps} prop
+   * @param {any} value
+   * @returns {void}
+   */
   set(prop, value) {
     if (value === undefined) return
+    // @ts-ignore
     if (this.props.raw[prop] === value) return
+    // @ts-ignore
     this.props.raw[prop] = value
 
     this.props.props = {}
+    // @ts-ignore
     this.props[prop] = unpackTransition(value)
 
     const propsKeys = Object.keys(this.props.props)
@@ -609,7 +652,7 @@ const Element = {
         return
       }
       // fire transition end callback when animation ends (if specified)
-      if (transition.end && typeof transition.end === 'function') {
+      if (this.node !== undefined && transition.end && typeof transition.end === 'function') {
         transition.end.call(this.component, this, prop, this.node[prop])
       }
       // remove the prop from scheduled transitions
@@ -622,9 +665,7 @@ const Element = {
   destroy() {
     if (this.node === null) return
 
-    Log.debug('Deleting  Node', this.nodeId)
-    this.node.destroy()
-
+    Log.debug('Deleting Node', this.nodeId)
     // Clearing transition end callback functions
     const transitionProps = Object.keys(this.scheduledTransitions)
     for (let i = 0; i < transitionProps.length; i++) {
@@ -635,7 +676,32 @@ const Element = {
       }
     }
 
-    // remove node reference
+    // not setting to null and deleting,
+    // because transition stopped might still be fired (maybe a renderer fix resolves that)
+    this.scheduledTransitions = {}
+
+    this.component = null
+    delete this.component
+
+    this.config = null
+    delete this.config
+
+    this.counter = null
+    delete this.counter
+
+    this.props.raw = {}
+    this.props.element = null
+    this.props.props = null
+    this.props = {}
+    delete this.props
+
+    this.triggerLayout = null
+    delete this.triggerLayout
+
+    this.forComponent = null
+    delete this.forComponent
+
+    this.node.destroy()
     this.node = null
   },
   get nodeId() {
@@ -654,6 +720,13 @@ const Element = {
   },
 }
 
+/**
+ * Returns a new Blits Element
+ *
+ * @param {Object} config - The configuration object for the element
+ * @param {import('../../component.js').BlitsComponent} component - The component to which the element belongs
+ * @returns {import('../../component.js').BlitsElement} - The new Blits Element
+ */
 export default (config, component) => {
   if (textDefaults === null) {
     textDefaults = {
@@ -666,7 +739,6 @@ export default (config, component) => {
     scheduledTransitions: {},
     config,
     component,
-    effectNames: [],
     counter: counter++,
   })
 }

package/src/engines/L3/launch.js

@@ -26,7 +26,8 @@ import colors from '../../lib/colors/colors.js'
 import fontLoader from './fontLoader.js'
 import shaderLoader from './shaderLoader.js'
 
-export let renderer = {}
+/** @type {RendererMain|null} */
+export let renderer = null
 
 const renderEngine = (settings) => {
   const renderMode = 'renderMode' in settings ? settings.renderMode : 'webgl'
@@ -63,6 +64,14 @@ const textureMemorySettings = (settings) => {
   }
 }
 
+/**
+ * Launch the render engine and application
+ *
+ * @param {import('../../launch.js').BlitsAppFactory} App - Factory function that returns the application instance (extends BlitsComponent with .quit())
+ * @param {HTMLElement} target - The target element to render the application into
+ * @param {Partial<import('../../launch.js').BlitsSettings>} [settings] - The settings for the renderer
+ *
+ */
 export default (App, target, settings = {}) => {
   renderer = new RendererMain(
     {

package/src/launch.js

@@ -20,6 +20,30 @@ import { initLog, Log } from './lib/log.js'
 import engine from './engine.js'
 import blitsPackageInfo from '../package.json' assert { type: 'json' }
 
+/**
+ * @typedef {Object} Font
+ * @property {string} family - Name of the font family
+ * @property {string} type - Type of font (web, msdf, sdf)
+ * @property {string} [file] - Location to the font file
+ * @property {string} [json] - Location of the font map (for msdf/sdf)
+ * @property {string} [png] - Location of the font png (for msdf/sdf)
+ */
+/**
+ * @typedef {Object} ShaderEffect
+ * @property {string} name
+ * @property {any} type
+ */
+/**
+ * @typedef {Object} Shader
+ * @property {string} name
+ * @property {any} type
+ */
+
+/**
+ * @typedef {import('@lightningjs/renderer').RendererMain} RendererMain
+ * @type {RendererMain}
+ */
+// @ts-ignore - We ignore this because it will be replaced by the renderer once the app is launched
 export let renderer = {}
 export const stage = {}
 
@@ -37,6 +61,52 @@ async function rendererVersion() {
   }
 }
 
+/**
+ * @typedef {Object} BlitsSettings
+ * @property {number} [w] - Width of the Application
+ * @property {number} [h] - Height of the Application
+ * @property {boolean} [multithreaded] - Whether to enable multithreaded
+ * @property {0|1|2|"info"|"warn"|"error"|"debug"[]} [debugLevel] - Debug level for console log messages
+ * @property {Font[]} [fonts] - Fonts to be used in the Application
+ * @property {ShaderEffect[]} [effects] - Effects to be used by DynamicShader
+ * @property {Shader[]} [shaders] - Shaders to be used in the application
+ * @property {string} [defaultFont] - Default font family to use in the Application
+ * @property {object} [keymap] - Custom keymapping
+ * @property {"Proxy"|"defineProperty"} [reactivityMode] - Mode of reactivity
+ * @property {"hd"|"720p"|720|"fhd"|"fullhd"|"1080p"|1080|"4k"|"2160p"|2160} [screenResolution] - Screen resolution of the device
+ * @property {"low"|"medium"|"high"|"retina"|number} [renderQuality] - Quality of the rendered App
+ * @property {number} [pixelRatio] - Custom pixel ratio of the device
+ * @property {number} [fpsInterval] - Interval in ms to receive FPS updates
+ * @property {number} [webWorkersLimit] - Maximum number of web workers
+ * @property {string} [canvasColor] - Background color of the canvas
+ * @property {boolean} [inspector] - Enable inspector
+ * @property {number|[number,number,number,number]} [viewportMargin] - Extra margin to the viewport
+ * @property {number} [gpuMemoryLimit] - Threshold after which textures are freed (deprecated)
+ * @property {object} [gpuMemory] - Configures the gpu memory settings
+ * @property {"webgl"|"canvas"} [renderMode] - Defines which mode the renderer should operate in
+ * @property {number} [holdTimeout] - Time after which a key press is considered a hold
+ * @property {HTMLCanvasElement} [canvas] - Custom canvas object used to render the App
+ * @property {number} [textureProcessingTimeLimit] - Max time renderer can process textures in a frame
+ * @property {Partial<import('@lightningjs/renderer').RendererMainSettings>} [advanced] - Advanced renderer settings
+ * @property {boolean} [announcer] - Whether or not the announcer should be activated on initialization
+ */
+
+/**
+ * Blits App defines the structure of the Blits application.
+ * @typedef {import('./component').BlitsComponent} BlitsComponent
+ * @typedef {BlitsComponent & { quit: () => void }} BlitsAppComponent
+ * @typedef {() => BlitsAppComponent} BlitsAppFactory
+ */
+
+/**
+ * Launches the Blits application with the given App, target, and settings.
+ * Sets up logging, version info, and initializes the renderer and stage singletons.
+ *
+ * @param {BlitsAppFactory} App - The root BlitsComponent to launch.
+ * @param {HTMLElement} target - The DOM element or rendering target.
+ * @param {BlitsSettings} settings - Configuration settings for the application.
+ * @returns {void}
+ */
 export default (App, target, settings) => {
   Settings.set(settings)
 

package/src/lib/codegenerator/generator.js

@@ -511,6 +511,7 @@ const generateForLoopCode = function (templateObject, parent) {
         }
         effect(eff${index}, ${key})
         effects.push(eff${index})
+        component[Symbol.for('effects')].push(eff${index})
       `)
     } else {
       // props shouldn't be wrapped in an effect, but simply passed on
@@ -562,17 +563,21 @@ const generateForLoopCode = function (templateObject, parent) {
 
   ctx.renderCode.push(`
     let forEffects${forStartCounter}
-    effect(() => {
+    const eff${forStartCounter} = () => {
       component[Symbol.for('removeGlobalEffects')](forEffects${forStartCounter})
       forEffects${forStartCounter} = null
       forEffects${forStartCounter} = forloop${forStartCounter}(${cast(
     result[2],
     ':for'
   )}, elms, created${forStartCounter})
-    }, ['${effectKey}', ${effectKeys.join(',')}] )
+    }
+
+    component[Symbol.for('effects')].push(eff${forStartCounter})
+
+    effect(eff${forStartCounter}, ['${effectKey}', ${effectKeys.join(',')}] )
   `)
 
-  outerScopeEffects.forEach((effect) => {
+  outerScopeEffects.forEach((effect, outerScopeEffectsIndex) => {
     const matches = [...effect.matchAll(scopeRegex)]
 
     let l = matches.length
@@ -589,7 +594,7 @@ const generateForLoopCode = function (templateObject, parent) {
     }
 
     ctx.renderCode.push(`
-      effect(() => {
+      const eff${forStartCounter}_${outerScopeEffectsIndex} = () => {
         void ${refs.join(', ')}
         for(let __index = 0; __index < ${interpolate(result[2])}.length; __index++) {
           if(__index < from${forStartCounter} || __index >= to${forStartCounter}) continue
@@ -602,7 +607,9 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`
           ${effect}
         }
-      })
+      }
+      component[Symbol.for('effects')].push(eff${forStartCounter}_${outerScopeEffectsIndex})
+      effect(eff${forStartCounter}_${outerScopeEffectsIndex})
     `)
   })
 

package/src/lib/componentId.js

@@ -18,18 +18,31 @@
 const counters = {}
 let counter = 0
 
+/**
+ * Creates a human-readable component ID string for a given component name.
+ *
+ * @param {string} name - The name of the component.
+ * @returns {string} The generated human-readable component ID.
+ */
 export const createHumanReadableId = (name) => {
   return `BlitsComponent::${name}_${(counters[name] = (counters[name] || 0) + 1)}`
 }
 
+/**
+ * Generates a new unique internal numeric ID.
+ *
+ * @returns {number} The next unique internal ID.
+ */
 export const createInternalId = () => {
   return ++counter
 }
 
 /**
- * Resets the counter value back to 0.
+ * Resets the internal counter value back to 0.
  * Used in automated tests to ensure consistent results, not intended
  * to be used in the actual framework code!
+ *
+ * @returns {void}
  */
 export const resetCounter = () => {
   counter = 0

package/src/lib/eventListeners.js

@@ -19,6 +19,15 @@ const eventsMap = new Map()
 const callbackCache = new Map()
 
 export default {
+  /**
+   * Registers a listener callback for a specific event on a component.
+   *
+   * @param {object} component - The component instance to register the listener for.
+   * @param {string} event - The name of the event to listen for.
+   * @param {Function} cb - The callback function to execute when the event is emitted.
+   * @param {number} [priority=0] - The priority of the listener (higher runs first).
+   * @returns {void}
+   */
   registerListener(component, event, cb, priority = 0) {
     let componentsMap = eventsMap.get(event)
     if (componentsMap === undefined) {
@@ -36,6 +45,13 @@ export default {
     callbackCache.delete(event) // Invalidate the callbackCache when a new callback is added
   },
 
+  /**
+   * Deregisters a listener for a specific event on a component.
+   *
+   * @param {object} component - The component instance to deregister the listener for.
+   * @param {string} event - The name of the event to stop listening for.
+   * @returns {void}
+   */
   deregisterListener(component, event) {
     let componentsMap = eventsMap.get(event)
     if (componentsMap === undefined) {
@@ -49,6 +65,13 @@ export default {
     }
   },
 
+  /**
+   * Executes all registered listeners for a given event, in priority order.
+   *
+   * @param {string} event - The name of the event to emit.
+   * @param {any} params - The parameters to pass to the event listeners.
+   * @returns {boolean} True if all listeners executed without stopping propagation, false if any listener returned false.
+   */
   executeListeners(event, params) {
     const componentsMap = eventsMap.get(event)
     if (componentsMap === undefined || componentsMap.size === 0) {
@@ -78,6 +101,12 @@ export default {
     return true // All listeners executed without stopping propagation
   },
 
+  /**
+   * Removes all listeners for a given component from all events.
+   *
+   * @param {object} component - The component instance to remove listeners for.
+   * @returns {void}
+   */
   removeListeners(component) {
     for (const [event, componentsMap] of eventsMap) {
       if (componentsMap.has(component)) {

package/src/lib/hooks.js

@@ -19,15 +19,36 @@ import symbols from './symbols.js'
 
 const cbs = {}
 
+/**
+ * Emits a registered hook for a given identifier, calling the hook with the provided scope and data.
+ *
+ * @param {string|symbol} hook - The name or symbol of the hook to emit.
+ * @param {string} identifier - The unique identifier for the hook set.
+ * @param {object} scope - The value of `this` inside the hook function.
+ * @param {Array} [data=[]] - Arguments to pass to the hook function.
+ */
 export const emit = (hook, identifier, scope, data = []) => {
   cbs[identifier] && cbs[identifier][hook] && cbs[identifier][hook].apply(scope, data)
 }
 
+/**
+ * Emits a registered symbol-based hook for a given identifier, calling the hook with the provided scope.
+ *
+ * @param {string|symbol} hook - The name or symbol of the hook to emit (will be mapped to a symbol).
+ * @param {string} identifier - The unique identifier for the hook set.
+ * @param {object} scope - The value of `this` inside the hook function.
+ */
 export const privateEmit = (hook, identifier, scope) => {
   const symHook = symbols[hook]
   cbs[identifier] && cbs[identifier][symHook] && cbs[identifier][symHook].apply(scope)
 }
 
+/**
+ * Registers a set of hooks (functions) for a given identifier.
+ *
+ * @param {Object<string,Function>|Object<symbol,Function>} hooks - An object whose keys are hook names or symbols and values are functions.
+ * @param {string} identifier - The unique identifier for the hook set.
+ */
 export const registerHooks = (hooks = {}, identifier) => {
   cbs[identifier] = {}
   // Combines enumerable keys and symbol properties of the 'hooks' object

package/src/lib/lifecycle.js

@@ -19,6 +19,10 @@ import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
 import symbols from './symbols.js'
 
+/**
+ * List of valid lifecycle states for a component.
+ * @type {Array<string>}
+ */
 const states = [
   'init', // fired upon component instantiation
   'ready', // fired when component instantiated, reactivity setup done and template spawned
@@ -31,12 +35,40 @@ const states = [
   'exit', // fired when leaving the visible viewport
 ]
 
+/**
+ * Lifecycle state manager for components.
+ *
+ * @typedef {Object} Lifecycle
+ * @property {string|null} previous - The previous lifecycle state.
+ * @property {string|null} current - The current lifecycle state.
+ * @property {Object} [component] - The component instance this lifecycle belongs to.
+ * @property {string|null} state - The current lifecycle state (getter/setter).
+ */
+
+/**
+ * Lifecycle state management object for components.
+ * Handles state transitions and emits corresponding hooks.
+ *
+ * @type {Lifecycle}
+ * @this {Lifecycle & {component: Object}}
+ * The 'component' property is expected to be set by the component instance at runtime.
+ */
 export default {
   previous: null,
   current: null,
+  /**
+   * Gets the current lifecycle state.
+   * @this {Lifecycle & {component: Object}}
+   * @returns {string|null}
+   */
   get state() {
     return this.current
   },
+  /**
+   * Sets the lifecycle state and emits hooks if the state is valid and changed.
+   * @this {Lifecycle & {component: Object}}
+   * @param {string} v - The new lifecycle state.
+   */
   set state(v) {
     if (states.indexOf(v) > -1 && (v !== this.current || v === 'focus')) {
       Log.debug(

package/src/lib/log.js

@@ -19,6 +19,10 @@ import Settings from '../settings.js'
 
 const n = () => {}
 
+/**
+ * Returns the current time as a locale time string (hh:mm:ss).
+ * @returns {string} The current time string.
+ */
 const time = () =>
   new Date().toLocaleTimeString([], {
     hour: '2-digit',
@@ -26,6 +30,13 @@ const time = () =>
     second: '2-digit',
   })
 
+/**
+ * Returns a logger object for the given context, with info, warn, debug, and error methods.
+ * Logging methods are no-ops if the debug level does not match.
+ *
+ * @param {string} context - The context label for log messages.
+ * @returns {Object} Logger object with info, warn, debug, and error methods.
+ */
 const logger = (context) => {
   const level = Settings.get('debugLevel')
   const log = {}

package/src/lib/symbols.js

@@ -1,3 +1,55 @@
+/**
+ * Symbol registry for internal framework properties and generated code.
+ *
+ * @typedef {Object} BlitsSymbols
+ * @property {symbol} currentView
+ * @property {symbol} cursorTagStart
+ * @property {symbol} computedKeys
+ * @property {symbol} destroy
+ * @property {symbol} getChildren
+ * @property {symbol} holder
+ * @property {symbol} id
+ * @property {symbol} identifier
+ * @property {symbol} index
+ * @property {symbol} init
+ * @property {symbol} inputEvents
+ * @property {symbol} intervals
+ * @property {symbol} launched
+ * @property {symbol} level
+ * @property {symbol} methodKeys
+ * @property {symbol} originalState
+ * @property {symbol} propKeys
+ * @property {symbol} raw
+ * @property {symbol} ready
+ * @property {symbol} renderer
+ * @property {symbol} routes
+ * @property {symbol} routerHooks
+ * @property {symbol} settings
+ * @property {symbol} state
+ * @property {symbol} stateKeys
+ * @property {symbol} textnode
+ * @property {symbol} timeouts
+ * @property {symbol} type
+ * @property {symbol} watchers
+ * @property {symbol} watchKeys
+ * @property {symbol} wrapper
+ * @property {symbol} children
+ * @property {symbol} components
+ * @property {symbol} config
+ * @property {symbol} isSlot
+ * @property {symbol} props
+ * @property {symbol} slots
+ * @property {symbol} componentType
+ * @property {symbol} isComponent
+ * @property {symbol} effects
+ * @property {symbol} removeGlobalEffects
+ */
+
+/**
+ * Internal symbol registry for Blits framework and generated code.
+ *
+ * @type {BlitsSymbols}
+ */
 export default {
   currentView: Symbol('currentView'),
   cursorTagStart: Symbol('cursorTagStart'),

package/src/lib/utils.js

@@ -1,3 +1,18 @@
+/**
+ * A mapping of common screen resolution names to their scale factors relative to 1080p (Full HD).
+ *
+ * @type {Object<string|number, number>}
+ * @property {number} hd - 0.666... (720p)
+ * @property {number} '720p' - 0.666... (720p)
+ * @property {number} 720 - 0.666... (720p)
+ * @property {number} fhd - 1 (Full HD)
+ * @property {number} fullhd - 1 (Full HD)
+ * @property {number} '1080p' - 1 (Full HD)
+ * @property {number} 1080 - 1 (Full HD)
+ * @property {number} '4k' - 2 (2160p)
+ * @property {number} '2160p' - 2 (2160p)
+ * @property {number} 2160 - 2 (2160p)
+ */
 export const screenResolutions = {
   hd: 0.66666667,
   '720p': 0.66666667,