Amazon FireTV Apps, Features and Tips

  • Official App Store
  • Live TV
  • SideLoad
  • Unofficial App Store
  • Controllers
  • Watch Local Content
  • Watch Local Network Content (eg. Stuff on laptop or phone on the same wifi network)
    • You can use VLC to watch content saved on another local device using your home network.
    • Plex
      • This even allows you to play local network content without active internet connection.
  • Cast/Mirror Screen
    • Firestick supports android screen mirroring out of the box.
    • Windows 10 is not supported.
  • App List
    • OFFICIAL (from Amazon App Store)
      • Plex
      • VLC
      • Gaana
      • NDTV
      • Raaga
      • ScoopWhoop
      • TED
      • TVF
      • Hotstar
      • Firefox
      • Youtube Web
    • PAID
      • Amazon Music
      • Amazon Prime Video
    • SIDE LOADED
  • App Launcher
    • The sideloaded apps would be visible only on the “manage applications” section in options of home->applications, and not in normal app list. Hence it’s best to have a 3rd party app launcher like Firestarter. It also updates all apps automatically
  • Rooting
Advertisements

Remove Filmstrip from web videos using Javascript

  • Make the video zoom and fill the screen without breaking aspect ratio:
    • Simply add this property to the html5 <video> element: object-fitcover;
  • Break the aspect ratio and simply remove filmstrip by increasing video height:
    • Simply add this property to the html5 <video> element: object-fitfill;
    • ref: https://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site
  • Manual Aspect ratio:
    • Use the scale prop of html5 video element. Eg. transformscaleY(1.32);
  • Calculate: https://gist.github.com/jimjeffers/1219207
    • @video.addEventListener("loadedmetadata", (event) =>
      actualRatio = @video.videoWidth/@video.videoHeight
      targetRatio = $(@video).width()/$(@video).height()
      adjustmentRatio = targetRatio/actualRatio
      $(@video).css("-webkit-transform","scaleX(#{adjustmentRatio})")
      )
  • Didn’t work:
    • height: auto; : ref: http://activelab.io/tutorials/html-5-full-screen-and-responsive-videos

Tampermonkey script to scale amazon prime video and remove filmstrip

// ==UserScript==
// @name Scale Video
// @namespace https://www.primevideo.com/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://www.primevideo.com/detail/*
// @grant none
// ==/UserScript==

(function() {
‘use strict’;
var refreshIntervalId = setInterval(function(){
//console.log(‘checking’);
if(document.getElementsByClassName(‘vsc-initialized’).length > 0){
document.getElementsByClassName(‘vsc-initialized’)[1].style[“object-fit”] = “fill”;
clearInterval(refreshIntervalId);}
}, 300);

// Your code here…
})();

Deep Learning Overview

Ideas for Angular App Architecture

  • PWA
    • Making our app a Progressive Web App would enhance our control over caching and optimistic updates.
  • Service Worker
    • This will allow us to do periodic background syncs and send push notifications to users.
    • @angular/service-worker package from the core team would help with this.
  • SSR
    • Server-side rendering, especially for the landing pages would greatly enhance the initial load time.
    • Angular Universal will help us accomplish this.
  • AOT Build
    • Having Ahead of Time build using Angular CLI would speed up rendering as the templates would be precompiled.
    • This along with tree shaking would also make our bundles smaller as we wouldn’t need to download the compiler like we do for JIT today.
  • Code Splitting
    • Creating separate bundles for key routes would allow granular control over the resources we send to the client.
    • For instance we’ll not send feature bundle to users who’re not entitled to use it.
  • Router Store
    • Like we use ngRx store for Redux, we can also levarage @ngrx/router-store to manage app routes.
  • Schematics
    • We can leverage CLI Schematics to scaffold consistent templates across all artifacts.
    • @ngrx/schematics also integrates with the CLI and can help us generate Redux artifacts.
  • Angular CDK
    • The Angular Component Dev Kit package would help us manage our component layouts, overlays, accessibility etc. features.
  • Angular Elements
    • This is new in Angular 6 and can be leveraged for exposing our components as the Web Components standard.
  • Storybook
    • We can use the Storybook library to showcase our UI components library.
    • It’ll allows us to view the different states of each component, and interactively develop and test components.
  • NgRx Data
    • This is a new library that we can leverage along with ngrx entity
    • It will help us replace our currently handwritten reducers and selectors and reduce boilerplate.