Syiro 1.7.0-rc2

In Syiro 1.7.0-rc2, the following changes have been made over roughly 30 commits and is considered one of the largest RCs in the history of Syiro:

LESS

Media Player

• Ensure input styling does not apply just when we are not streaming.
• Unify normal and mini Audio Player styling.
  • New Audio Player is thinner.
• Controls are less chunky.
• Input range is encapsulated by a "progressbar" container, enabling us to dictate when the input thumb is showing.

TypeScript

Deprecated

syiro.component.CSS

• The CSS function in the syiro.component module was refactored into a new module, syiro.style.
  • You can get a specific value of a CSS attribute of a Component or Element by using syiro.style.Get.
  • You can set a specific value of a CSS attribute by using syiro.style.Set.

syiro.sidepane Elements as Logos

• Dropped ability for logo in Sidepane to be an Element, keep it as a string to be consistent with logo definition for Navbar.

syiro.ts

• Drop WebKitMutationObserver and all the legacyDimensionsDetection code.

Module changes

syiro.button

• syiro.button.New:
  • Refactored Button creation code to eliminate redundant dropdown type checking, removed property deletion calls and recursive "extra" property key attribute setting.
• syiro.button.Toggle changes:
  • Drop forced width setting of linked List Component of Buttons that are type Dropdown.

syiro.component

• Simplified:
  • syiro.component.Add
  • syiro.component.Remove
• Rewrote:
  • syiro.component.Fetch
  • Do more stringent checking during syiro.component.Fetch.
  • syiro.component.FetchComponentObject

syiro.device

• Added syiro.device.SupportsRequestAnimation.
• Simplified syiro.device.Detect by ensuring we set more default values (like for DoNotTrack).

syiro.events

• Simplified:
  • syiro.events.Add
  • syiro.events.Remove
  • syiro.evennts.Trigger
• syiro.events.Trigger:
  • Change to using localName instead of nodeName.

syiro.init

• We no longer set background images during Media Player generation, rather we store it in the component data then asynchronously load it via syiro.init.MediaPlayer to eliminate long frames.
• Dropped unnecessary MutationObserver generation code in syiro.init.MediaPlayer, moved Media Player reset from there to syiro.mediaplayer.SetSource.

syiro.list & syiro.listitem

• Refinements to List and List Item creation, being less stringent on inner-List / List Item type checking, since the property checking for that is done in List Item generation anyways.
• syiro.list.SetHeader:
  • Reduce redundant sanitizing and innerHTML setting code in syiro.list.SetHeader.
• Ensure append and setSucceeded are set appropriately in syiro.listitem.New and syiro.listitem.SetLink.

syiro.mediaplayer

• syiro.mediaplayer.New changes:
  • More stringent checking of height and width values.
  • Drop height check / declaration for Audio-type Media Player.
  • Dropped autoplay setting for mediaPlayerElement since that should be false by default in browsers anyways.
  • Unified normal and mini Audio Players, having the menu only apply towards the Video Player.
  • Drop bool check for ForceLiveUX, if it is anything other than true then the statement isnt truthful.
  • Drop bool type check for UsingExternalLibrary.
  • Drop unnecessary if check for properties.title and properties.artist, do the comparison and directly assign the value to generateContentInfo.
  • Check if art is a string rather than undefined.
• syiro.mediacontrol.New changes:
  • Implemented progressbar container around Input range.
  • Dropped input value setting.
• Set some sane defaults for max and step for playerLengthInfo in syiro.mediaplayer.GetPlayerLengthInfo.
• Player now will autoplay after time change, not accidentally pause it.
• Moved playButton UX toggling outside of PlayOrPause and now into playing and pause event listeners on the audio and video elements of Media Players.
• Simplified:
  • syiro.mediaplayer.IsPlayable
  • Condense variable and reduce unnecessary querySelector calls in syiro.mediaplayer.IsPlayable.
  • syiro.mediaplayer.IsPlaying
  • syiro.mediaplayer.PlayOrPause
  • syiro.mediaplayer.SetTime
  • Ensure we properly reset gradient if we toggle the volume button before playing the content.
  • Changed string from tick to update-input to improve clarity.
• Change UX logic to ensure we do logical displaying of play / pause icon based on what the next action of the user will be.

syiro.navbar

• syiro.navbar.New:
  • Simplify Navbar creation code by dropping unnecessary properties recursion, navbarType variable declaration, etc. Split property checking based on the Navbar position, then do item adding, followed by the simpler position.fixed check.
• Added consistent value returning in functions.

syiro.searchbox

• Changed property for list-item-handler to listItemHandler in Searchbox.
  • Changed all list-item-handler references to listItemHandler to keep it consistent with properties.
• Simplified preseed checks.

syiro.toast

• Simplified:
  • syiro.toast.Toggle

syiro.utilities

• Cleanup of syiro.utilities.ElementCreator.
• Added syiro.utilities.Run. This function will leverage both Promises as well as requestAnimationFrame to ensure we do things at the beginning of a frame, asynchronous, to provide the most optimal execution of a function possible.
• Handle null values in syiro.utilities.TypeOfThing.

Other

• Added consistent use of documentation of function names and descriptions throughout code, dropping unnecessary #region and #endregion declarations to make things cleaner.
• Dropped any setting of !important strings in styling Set calls.
• Deprecated usage of var for let.
• Many type checking instances were changed to using syiro.utilities.TypeOfThing.
• Implemented interfaces for every creatable component, ranging from Button to Toast Components.
  • Changed all usage of properties : Object durign Component creation to the appropriate properties interface
  • Dropped a bunch of unnecessary usage of keys since they are treating by TypeScript now as properties from the interfaces.

Syiro 1.7.0-rc1

Syiro 1.7.0-rc1 is the beginning of yet another massive overhaul of Syiro. Nothing is being left untouched, nothing left unexplored.

LESS:

The LESS was completely refactored and re-evaluated during this RC. As a result, the iOS and Material Design themes have been deprecated. This was to help simplify the styling dramatically and doesn't detract from (if anything, it improves) the existing theming capabilities.

There was continued simplification of the Media Player styling and enabling us to do dynamic positioning and resizing with much more ease. There was also some preliminary support for RTL (something to be improved on later in the cycle).

TypeScript:

Due to the duration between the last release (1.6.0) and this RC, more significant changes were done to dramatically improve the codebase that might not have otherwise occurred.

Deprecated

• All Generate funcs, which were just meta-functions for New anyways.
• bool support in syiro.component.Add (use the existing and previously recommended append and prepend strings instead).
• syiro.generator module.
• syiro.player, syiro.audioplayer and syiro.videoplayer, which just referenced syiro.mediaplayer anyways.

The Sweep

syiro.device Module

Dropped / Removed:

• syiro.device.HasIndexedDB. It's 2016, use LocalStorage already.
• WebkitMutationObserver usage (for now, needs testing).
• All scaling code from orientationchange event.
• Mozilla device orientation stuff, now that FF 44+ supports non-vendor-prefixed versions.
• Resize re-checking screen details.

Simplifications:

• syiro.device.SupportsTouch no longer any particular default.
• Changed array setting to string setting for orientationchange and touch events.
• Simplified syiro.device.FetchScreenDetails, dropping all the unnecessary if / else if conditions and repetitive var setting.
• Using syiro.utilities.TypeOfThing to ensure feature support is what we expect.

syiro.events Module

Simplifications:

• Changed eventStrings Object to Strings.
• Set mouse events as defaults in syiro.events.String.
• Variable setting and assigning in syiro.events.Add and syiro.events.Trigger.

syiro.init Module

Added:

• syiro.init.LoadColors(). This is the code DOM generation and color variable setting code from syiro.Init().
  • This function eliminates multiple unecessary getComputedStyle() calls.

Dropped / Removed:

• Dropped syiro.render.Scale call from syiro.init.MediaPlayer.

syiro.mediaplayer Module

Dropped / Removed:

• A bunch of syiro.mediaplayer.Configure code related to player error height / width, now handled in LESS.
• syiro.mediaplayer.CenterInformation, now using CSS calc in our LESS styling.
• CSS attribution setting in 'syiro.mediaplayer.ToggleMenuDialog`, given it is now handled in LESS.

syiro.render Module

Dropped / Removed:

• syiro.render.Scale function. This was primarily used for the Media Player and because we now handle height / width setting during Media Player generation, as well as LESS improvements, this is no longer needed.

Simplifications:

• Removed unnecessary positionList setting in syiro.render.Position.

Other

• Added AnimationOptions as a new TypeScript interface and updated syiro.animation.Animate to reflect those changes.
• Dropped Object generation in syiro.component.FetchDimensionsAndPosition, instead we just use the Object from getClientRects().
• Dropped unnecessary variable setting throughout code.
• Moved all Syiro Component code to src/typescript/components/
• Eliminated performance bottleneck in syiro.Init by calling syiro.init.LoadColors() with requestAnimationFrame if supported by the browser.

Syiro 1.6.0

Note: These do not include changes that happened in RC1 and RC2.

• Removed duplicate ComponentObject definition in interfaces. No affect on actual code.
• Merge of Audio Player and Video Player into Media Player, refactoring large sections of code, including how we
  now handle IsPlayable and IsStreamable.
• Implementing in-code deprecation notices.
• Implement new code-styling guidelines
• We are now using component.id and component.type instead of component["id"] and
  component["type"].
• Implement TypeOfThing checking in multiple locations, such as in our usage of for...in, for more stringent
  type checking.

Syiro 1.6.0 Release Candidate 2

• Implemented performance testing / benchmarking for the majority of functionality within Syiro, leveraging Perfily.
• Refined orientation support checking. syiro.device.OrientationObject will now consistently show the correct Object we should be doing event listening to.
• Implemented Grid and Grid Item Components, being able to define a specific amount of columns as well as using the default "dynamic" layout.
• Dropped old, backwards-compatible Dropdown component.
• Fix to syiro.Init where we were apparently calling dropdown.Toggle instead of button.Toggle.
• Implemented separate grid.html to test Grid. This is temporarily and will eventually be replaced with a proper test system that is on a per-Component basis rather than one convoluted test page.
• Changed how we check and if necessary create meta tags, adding in utf-8 charset checking. Also implemented main page component adding and assigning the main page Component to syiro.page for easy re-usability.
• Removed the deletion of HTMLElement via Syiro Data system for Buttongroup when adding a Button, since that is done automatically by the init system and can cause issues when modifying the Button that is added to the Buttongroup, before it is added to DOM.
• Change syiro.buttongroup.Toggle to require buttonComponent. This is a merely a part of the optional type system in Typescript and didn't affect the actual code.
• Changed syiro.component.Fetch data reading to no longer use an unnecessary break between some strings.
• Change location of Component Updating in List Item.
• Implemented AddLink append boolean -> string change, which is a shim that will be removed when we remove it from syiro.component.Add().
• Fixes to ensure we are doing proper menu checking during creation of Audio Player, Player Control, and Video Player.
• Fix to SetTime to ensure we are not setting over the actual duration.

Syiro 1.6.0 Release Candidate 1

• Fixes:
  • Improvements to syiro.utilities.TypeOfThing. It now properly detects when "thing" is undefined and better detection for when it is an actual Array.
  • Fixes to Basic Button positioning in navbar, empty button width fixes, Navbar will no longer sit above a Sidepane and Content Overlay.
  • Fixes to syiro.device.height and syiro.device.width.
  • Changed Content Overlay positioning to fixed so a website that exceeds 100% device height and therefore needs scrolling have a fixed Content Overlay over it.
• Improvements:
  • Refined interfaces, introducing the ComponentObject interface and using that throughout Syiro code to differentiate between Object and ComponentObject.
  • Separated out Lists in Sidepane into different div container so we can enable scrollable navigation. As a result, in this release, defining a logo or Searchbox Component Object in the items key/val properties during creation of a Sidepane will no longer work. They are their own dedicated logo and searchbox keys now.
  • Refactored @media selectors in Sidepane.
  • Links are now supported in List Item Components via syiro.listitem.SetLink(), which uses the standard LinkPropertiesInterface that the Navbar uses. You can also set a link
    during creation of a List Item by applying a LinkPropertiesInterface to a link key in the properties Object. You are allowed to have an image while using a link inside the List Item.
  • Completely rewrote Data system

Syiro 1.5.3

• Eliminated temporary fix for nested Lists and their Header toggling with more permanent one, introduced by improving syiro.list.Toggle.
• Changed syiro.utilities.ElementCreator to use syiro.utilities.TypeOfThing for accurate Element checking.

Syiro 1.5.2

• Deprecation of old Navbar functions, as well as Header and Footer Components.
• Implemented syiro.utilities.TypeOfThing, eliminating a lot of redundant type checking, including
  syiro.component.IsComponentObject().
  • All references to syiro.component.IsComponentObject() have been changed to TypeOfThing().
  • syiro.component.FetchComponentObject() has been simplified as a result and more robust.
• Some type checking fixes were implemented in syiro.component.CSS().
• Large chunks of syiro.component.Add() and syiro.component.Remove() have been cleaned up, lots of variable declarations removed and more robust adding of different Elements and Objects.
• Eliminated unnecessary temp element setting in syiro.animation module.
• Simplification in multiple places in syiro.button module.
• Implemented throughout multiple modules a simplified boolean assignment, eliminated a multitude of if statement in exchange for simplified comparisons, which is very noticable in syiro.device.Detect().
• Continued implementation of for..of usage in Typescript code.
• Massive cleanup of syiro.events module, separating the triggering of events into syiro.events.Trigger, which now enables the manual triggering of events (utilitized by Searchbox functionality).
• Implementation of Button Component inside Searchbox, which triggers events tied to input event on the Searchbox's inner input Element. You can now disable the input triggering for the Searchbox input and only use the Button if you set DisableInputTrigger to true (which isn't default) in Searchbox properties when creating a Searchbox.
• Fixes to player menu inner List styling.

Syiro 1.5.1

• Implemented List Headers and nested Lists inside List Components.
• Bug fix to syiro.component.Add and tweaks to syiro.init functions.
• Increased Sidepane width by 50px.

Syiro 1.5.0

• Refactored Syiro Player code:
  • Completely changed Syiro Player initialization, which is now syiro.init.Player() and syiro.init.PlayerControl() and binds the proper Objects to reduce in-function calls.
  • Tweaked touch detection for Player to enable faster functions.
  • Implemented syiro.player.IsPlayable() and syiro.player.IsStreamable(), both which return booleanvalues as well as change the player accordingly.
  • Improved the use of Syiro's data system, eliminating unnecessary checks and added more Delete calls instead of "adding" as false (which is return if key doesn't exist anyways).
  • Simplified syiro.player.PlayOrPause().
  • Simplified syiro.player.SetSources()
  • Fixes to volume button toggling.
  • syiro.player.SetTime() now enables you to provide any Number from 0.1 to 100 and we will set the volume properly.
• It is now possible to only define an artist or song in the Audio Player.
• Dropped font-smoothing style attribute from body since only vendor prefixed ones are used currently.
• Cleanup of interfaces.ts, eliminated all unnecessary comparisons of values to true booleans.

Known Issues:

• Gecko-based browsers do not properly render linear-gradienton the slider in the Players.
• Just ignore the dynamicTest page. It is derp to say the least.

Syiro 1.5.0 Release Candidate 2

• Rewrote and refactored large amounts of Syiro's Init system, splitting it off into a new module syiro.init.
• Resolved issues with incorrect Toggle Button active value being provided to functions.
• Changed all Generate() calls with New() when creating Components. Generate() is still available for backwards compatibility.
• Changed module to namespace in accordance with finalized Typescript 1.5 release.
• Refactored MutationObserver support, which is now implemented in syiro.device.Detect(), resolving issue #2. As a result, syiro.device.SupportsMutationObserver
  now exists and there are accurate screen height / width information now being provided via syiro.device.height and syiro.device.width on non-MutationObserver supported
  browsers, such as some IE versions. You will still need to add a Syiro Component for it to properly trigger, but it is a fix for oudated browsers nonetheless.