Merge remote-tracking branch '1hitsong/unstable' into ChapterSkip

.github/release.yml

@@ -0,0 +1,27 @@
+changelog:
+  categories:
+    - title: 🆕 New Features
+      labels:
+        - "new-feature"
+    - title: ⚙️ New Settings
+      labels:
+        - "new-setting"
+    - title: 🐛 Bug Fixes
+      labels:
+        - "bug-fix"
+    - title: 🧹 Code Cleanup
+      labels:
+        - "code-cleanup"
+    - title: 💻 Dev Improvements
+      labels:
+        - "dev-improvement"
+    - title: 📝 Documentation
+      labels:
+        - "documentation"
+    - title: ⭐ Additional Updates
+      labels:
+        - "*"
+      exclude:
+        labels:
+          - dependencies
+          - ignore-changelog

.github/workflows/auto-close-stale-pr.yml

@@ -5,6 +5,7 @@ on:
 
 jobs:
   stale:
+    if: github.repository == 'jellyfin/jellyfin-roku'
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write
@@ -13,6 +14,7 @@ jobs:
         with:
           days-before-issue-stale: -1
           days-before-issue-close: -1
+          stale-pr-label: stale
           stale-pr-message: "This pull request has been inactive for 21 days and will be automatically closed in 7 days if there is no further activity."
           close-pr-message: "This pull request has been closed because it has been inactive for 28 days. You may submit a new pull request if desired."
           days-before-pr-stale: 21

.github/workflows/automations.yml

@@ -12,6 +12,7 @@ on:
 
 jobs:
   project:
+    if: github.repository == 'jellyfin/jellyfin-roku'
     name: Project board 📊
     runs-on: ubuntu-latest
     steps:
@@ -23,12 +24,13 @@ jobs:
           column: In progress
           repo-token: ${{ secrets.JF_BOT_TOKEN }}
   label:
+    if: github.repository == 'jellyfin/jellyfin-roku'
     name: Labeling 🏷️
     runs-on: ubuntu-latest
     steps:
       - name: Check all PRs for merge conflicts ⛔
         uses: eps1lon/actions-label-merge-conflict@releases/2.x
         with:
-          dirtyLabel: "merge conflict"
+          dirtyLabel: "merge-conflict"
           commentOnDirty: "This pull request has merge conflicts. Please resolve the conflicts so the PR can be reviewed. Thanks!"
           repoToken: ${{ secrets.JF_BOT_TOKEN }}

.github/workflows/build-docs.yml

@@ -7,12 +7,11 @@ on:
 
 jobs:
   docs:
+    if: github.repository == 'jellyfin/jellyfin-roku'
     runs-on: ubuntu-latest
-
     permissions:
       # Give the default GITHUB_TOKEN write permission to commit and push the changed files back to the repository.
       contents: write
-
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
         with:

.github/workflows/deploy-api-docs.yml

@@ -23,6 +23,7 @@ concurrency:
 
 jobs:
   deploy:
+    if: github.repository == 'jellyfin/jellyfin-roku'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}

Makefile

@@ -1,28 +1,114 @@
-
+##########################################################################
-#########################################################################
+# Need curl and npm in your $PATH
-# Makefile Usage:
+# If you want to get_images, you'll also need convert from ImageMagick
-#
-# 1) Make sure that you have the curl command line executable in your path
-# 2) Set the variable ROKU_DEV_TARGET in your environment to the IP
-#    address of your Roku box. (e.g. export ROKU_DEV_TARGET=192.168.1.1.
-#    Set in your this variable in your shell startup (e.g. .bashrc)
-# 3) and set up the ROKU_DEV_PASSWORD environment variable, too
 ##########################################################################
 
-APPNAME = Jellyfin_Roku
+VERSION := 1.6.6
-VERSION = 1.6.6
 
-ZIP_EXCLUDE= -x xml/* -x artwork/* -x \*.pkg -x storeassets\* -x keys\* -x \*/.\* -x *.git* -x *.DS* -x *.pkg* -x dist/**\*  -x out/**\* 
+## usage
 
-include app.mk
+.PHONY: help
+help:
+	@echo "targets"
+	@echo "  build-dev    build development package"
+	@echo "  build-prod   build production package"
+	@echo "  build-tests  build tests package"
+	@echo "  format       format brighscripts"
+	@echo "  lint         lint code and documentation"
+	@echo "  get_images   update official jellyfin images"
+	@echo "targets needing ROKU_DEV_TARGET"
+	@echo "  home         press the home button on device"
+	@echo "  launch       launch installed"
+	@echo "targets needing ROKU_DEV_TARGET and ROKU_DEV_PASSWORD"
+	@echo "  install      install on device"
+	@echo "  remove       remove installed from device"
+	@echo "  screenshot   take a screenshot"
+	@echo "  deploy       lint, remove, install"
+	@echo "environment"
+	@echo "  ROKU_DEV_TARGET with device's IP"
+	@echo "  ROKU_DEV_PASSWORD with device's password"
 
-dev: 
+## development
-	$(MAKE) BUILD='dev' package
 
-beta: 
+BUILT_PKG := out/$(notdir $(CURDIR)).zip
-	$(MAKE) BUILD='beta' package
 
-release: 
+node_modules/: package-lock.json; npm ci
-	$(MAKE) BUILD='release' package
 
-deploy: prep_staging remove install
+.PHONY: build-dev build-prod build-tests
+.NOTPARALLEL: build-dev build-prod build-tests # output to the same file
+build-dev: node_modules/; npm run build
+build-prod: node_modules/; npm run build-prod
+build-tests: node_modules/; npm run build-tests
+
+# default to build-dev if file doesn't exist
+$(BUILT_PKG):; $(MAKE) build-dev
+
+.PHONY: format
+format: node_modules/; npm run format
+
+.PHONY: lint
+lint: node_modules/; npm run lint
+
+## roku box
+
+CURL_CMD ?= curl --show-error
+
+ifdef ROKU_DEV_TARGET
+
+.PHONY: home launch
+home:
+	$(CURL_CMD) -XPOST http://$(ROKU_DEV_TARGET):8060/keypress/home
+	sleep 2 # wait for device reaction
+launch:
+	$(CURL_CMD) -XPOST http://$(ROKU_DEV_TARGET):8060/launch/dev
+
+ifdef ROKU_DEV_PASSWORD
+
+CURL_LOGGED_CMD := $(CURL_CMD) --user rokudev:$(ROKU_DEV_PASSWORD) --digest
+
+EXTRACT_ERROR_CMD := grep "<font color" | sed "s/<font color=\"red\">//" | sed "s[</font>[["
+.PHONY: install remove
+install: $(BUILT_PKG) home
+	$(CURL_LOGGED_CMD) -F "mysubmit=Install" -F "archive=@$<" -F "passwd=" http://$(ROKU_DEV_TARGET)/plugin_install | $(EXTRACT_ERROR_CMD)
+	$(MAKE) launch
+remove:
+	$(CURL_LOGGED_CMD) -F "mysubmit=Delete" -F "archive=" -F "passwd=" http://$(ROKU_DEV_TARGET)/plugin_install | $(EXTRACT_ERROR_CMD)
+
+.PHONY: screenshot
+screenshot:
+	$(CURL_LOGGED_CMD) -o screenshot.jpg "http://$(ROKU_DEV_TARGET)/pkgs/dev.jpg"
+
+.PHONY: deploy
+.NOTPARALLEL: deploy
+deploy: lint remove install
+
+endif # ROKU_DEV_PASSWORD
+
+endif # ROKU_DEV_TARGET
+
+## sync branding
+
+CONVERT_CMD ?= convert -gravity center
+CONVERT_BLUEBG_CMD := $(CONVERT_CMD) -background "\#000b25"
+BANNER := images/banner-dark.svg
+ICON := images/icon-transparent.svg
+
+images/:; mkdir $@
+
+.PHONY: redo # force rerun
+$(BANNER) $(ICON): images/ redo
+	$(CURL_CMD) https://raw.githubusercontent.com/jellyfin/jellyfin-ux/master/branding/SVG/$(@F) > $@
+
+images/logo.png: $(BANNER); $(CONVERT_CMD) -background none -scale 1000x48 -extent 180x48 $< $@
+images/channel-poster_fhd.png: $(BANNER); $(CONVERT_BLUEBG_CMD) -scale 535x400 -extent 540x405 $< $@
+images/channel-poster_hd.png: $(BANNER); $(CONVERT_BLUEBG_CMD) -scale 275x205 -extent 336x210 $< $@
+images/channel-poster_sd.png: $(BANNER); $(CONVERT_BLUEBG_CMD) -scale 182x135 -extent 246x140 $< $@
+images/splash-screen_fhd.jpg: $(BANNER); $(CONVERT_BLUEBG_CMD) -scale 540x540 -extent 1920x1080 $< $@
+images/splash-screen_hd.jpg: $(BANNER); $(CONVERT_BLUEBG_CMD) -scale 360x360 -extent 1280x720 $< $@
+images/splash-screen_sd.jpg: $(BANNER); $(CONVERT_BLUEBG_CMD) -scale 240x240 -extent 720x480 $< $@
+
+.PHONY: get_images
+get_images: $(ICON)
+get_images: images/logo.png
+get_images: images/channel-poster_fhd.png images/channel-poster_hd.png images/channel-poster_sd.png
+get_images: images/splash-screen_fhd.jpg images/splash-screen_hd.jpg images/splash-screen_sd.jpg

README.md

@@ -3,6 +3,7 @@
 
 [![Logo Banner](https://raw.githubusercontent.com/jellyfin/jellyfin-ux/master/branding/SVG/banner-logo-solid.svg?sanitize=true "Jellyfin")](https://jellyfin.org)
 
+[![Code Documentation](https://img.shields.io/badge/Code%20Documentation-purple)](https://jellyfin.github.io/jellyfin-roku/)
 [![Build Status](https://img.shields.io/github/actions/workflow/status/jellyfin/jellyfin-roku/build-dev.yml?logo=github&branch=unstable "Build Status")](https://github.com/jellyfin/jellyfin-roku/actions/workflows/build-dev.yml?query=branch%3Aunstable)
 [![Current Release](https://img.shields.io/github/release/jellyfin/jellyfin-roku.svg?logo=github "Current Release")](https://github.com/jellyfin/jellyfin-roku/releases)
 [![Translation Status](https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-roku/svg-badge.svg "Translation Status")](https://translate.jellyfin.org/projects/jellyfin/jellyfin-roku/?utm_source=widget)

app.mk

@@ -1,215 +0,0 @@
-#########################################################################
-# common include file for application Makefiles
-#
-# Makefile Common Usage:
-# > make
-# > make install
-# > make remove
-#
-# By default, ZIP_EXCLUDE will exclude -x \*.pkg -x storeassets\* -x keys\* -x .\*
-# If you define ZIP_EXCLUDE in your Makefile, it will override the default setting.
-#
-# To exclude different files from being added to the zipfile during packaging
-# include a line like this:ZIP_EXCLUDE= -x keys\*
-# that will exclude any file who's name begins with 'keys'
-# to exclude using more than one pattern use additional '-x <pattern>' arguments
-# ZIP_EXCLUDE= -x \*.pkg -x storeassets\*
-#
-# Important Notes:
-# To use the "install" and "remove" targets to install your
-# application directly from the shell, you must do the following:
-#
-# 1) Make sure that you have the curl command line executable in your path
-# 2) Set the variable ROKU_DEV_TARGET in your environment to the IP
-#    address of your Roku box. (e.g. export ROKU_DEV_TARGET=192.168.1.1.
-#    Set in your this variable in your shell startup (e.g. .bashrc)
-# 3) Set the variable ROKU_DEV_PASSWORD in your environment for the password
-#    associated with the rokudev account.
-##########################################################################
-
-BUILD = dev
-
-DISTREL = $(shell pwd)/out
-COMMONREL ?= $(shell pwd)/common
-SOURCEREL = $(shell pwd)
-
-ZIPREL = $(DISTREL)/apps
-STAGINGREL = $(DISTREL)/staging
-PKGREL = $(DISTREL)/packages
-
-APPSOURCEDIR = source
-IMPORTFILES = $(foreach f,$(IMPORTS),$(COMMONREL)/$f.brs)
-IMPORTCLEANUP = $(foreach f,$(IMPORTS),$(APPSOURCEDIR)/$f.brs)
-
-GITCOMMIT = $(shell git rev-parse --short HEAD)
-BUILDDATE = $(shell date -u | awk '{ print $$2,$$3,$$6,$$4 }')
-
-BRANDING_ROOT = https://raw.githubusercontent.com/jellyfin/jellyfin-ux/master/branding/SVG
-ICON_SOURCE = icon-transparent.svg
-BANNER_SOURCE = banner-dark.svg
-OUTPUT_DIR = ./images
-
-# Locales supported by Roku
-SUPPORTED_LOCALES = en_US en_GB fr_CA es_ES de_DE it_IT pt_BR
-
-ifdef ROKU_DEV_PASSWORD
-    USERPASS = rokudev:$(ROKU_DEV_PASSWORD)
-else
-    USERPASS = rokudev
-endif
-
-ifndef ZIP_EXCLUDE
-  ZIP_EXCLUDE= -x \*.pkg -x storeassets\* -x keys\* -x \*/.\*
-endif
-
-HTTPSTATUS = $(shell curl --silent --write-out "\n%{http_code}\n" $(ROKU_DEV_TARGET))
-
-ifeq "$(HTTPSTATUS)" " 401"
-	CURLCMD = curl -S --tcp-fastopen --connect-timeout 2 --max-time 30 --retry 5
-else
-	CURLCMD = curl -S --tcp-fastopen --connect-timeout 2 --max-time 30 --retry 5 --user $(USERPASS) --digest
-endif
-
-home:
-	@echo "Forcing roku to main menu screen $(ROKU_DEV_TARGET)..."
-	curl -s -S -d '' http://$(ROKU_DEV_TARGET):8060/keypress/home
-	sleep 2
-
-prep_staging:
-	@echo "*** Preparing Staging Area ***"
-	@echo "  >> removing old application zip $(ZIPREL)/$(APPNAME).zip"
-	@if [ -e "$(ZIPREL)/$(APPNAME).zip" ]; \
-	then \
-		rm  $(ZIPREL)/$(APPNAME).zip; \
-	fi
-
-	@echo "  >> creating destination directory $(ZIPREL)"
-	@if [ ! -d $(ZIPREL) ]; \
-	then \
-		mkdir -p $(ZIPREL); \
-	fi
-
-	@echo "  >> setting directory permissions for $(ZIPREL)"
-	@if [ ! -w $(ZIPREL) ]; \
-	then \
-		chmod 755 $(ZIPREL); \
-	fi
-
-	@echo "  >> creating destination directory $(STAGINGREL)"
-	@if [ -d $(STAGINGREL) ]; \
-	then \
-		find $(STAGINGREL) -delete; \
-	fi; \
-	mkdir -p $(STAGINGREL); \
-	chmod -R 755 $(STAGINGREL); \
-
-	echo "  >> moving application to $(STAGINGREL)"
-	cp $(SOURCEREL)/manifest $(STAGINGREL)/manifest
-	cp -r $(SOURCEREL)/source $(STAGINGREL)
-	cp -r $(SOURCEREL)/components $(STAGINGREL)
-	cp -r $(SOURCEREL)/images $(STAGINGREL)
-	cp -r $(SOURCEREL)/settings $(STAGINGREL)
-	
-	# Copy only supported languages over to staging
-	mkdir $(STAGINGREL)/locale
-	cp -r $(foreach f,$(SUPPORTED_LOCALES),$(SOURCEREL)/locale/$f) $(STAGINGREL)/locale
-	
-ifneq ($(BUILD), dev)
-	echo "COPYING $(BUILD)"
-	cp $(SOURCEREL)/resources/branding/$(BUILD)/* $(STAGINGREL)/images
-endif
-
-package: prep_staging 
-	@echo "*** Creating $(APPNAME).zip ***"
-	@echo "  >> copying imports"
-	@if [ "$(IMPORTFILES)" ]; \
-	then \
-		mkdir $(APPSOURCEDIR)/common; \
-		cp -f -p -v $(IMPORTFILES) $(APPSOURCEDIR)/common/; \
-	fi \
-
-	@echo "  >> generating build info file"
-	mkdir -p $(STAGINGREL)/$(APPSOURCEDIR)
-	@if [ -e "$(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs" ]; \
-	then \
-		rm  $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs; \
-	fi
-	echo "  >> generating build info file";\
-	echo "Function BuildDate()" >> $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs
-	echo "  return \"${BUILDDATE}\"" >> $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs
-	echo "End Function" >> $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs
-	echo "Function BuildCommit()" >> $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs
-	echo "  return \"${GITCOMMIT}\"" >> $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs
-	echo "End Function" >> $(STAGINGREL)/$(APPSOURCEDIR)/buildinfo.brs
-
-	# zip .png files without compression
-	# do not zip up any files ending with '~'
-	@echo "  >> creating application zip $(STAGINGREL)/../apps/$(APPNAME)-$(BUILD).zip"
-	@if [ -d $(STAGINGREL) ]; \
-	then \
-		cd $(STAGINGREL); \
-		(zip -0 -r "../apps/$(APPNAME)-$(BUILD).zip" . -i \*.png $(ZIP_EXCLUDE)); \
-		(zip -9 -r "../apps/$(APPNAME)-$(BUILD).zip" . -x \*~ -x \*.png $(ZIP_EXCLUDE)); \
-		cd $(SOURCEREL);\
-	else \
-		echo "Source for $(APPNAME) not found at $(STAGINGREL)"; \
-	fi
-
-	@if [ "$(IMPORTCLEANUP)" ]; \
-	then \
-		echo "  >> deleting imports";\
-		rm -r -f $(APPSOURCEDIR)/common; \
-	fi \
-
-	@echo "*** packaging $(APPNAME)-$(BUILD) complete ***"
-
-prep_commit:
-	npm run format
-	npm ci
-	npm run validate
-	npm run check-formatting
-
-install: prep_staging package home
-	@echo "Installing $(APPNAME)-$(BUILD) to host $(ROKU_DEV_TARGET)"
-	@$(CURLCMD) --user $(USERPASS) --digest -F "mysubmit=Install" -F "archive=@$(ZIPREL)/$(APPNAME)-$(BUILD).zip" -F "passwd=" http://$(ROKU_DEV_TARGET)/plugin_install | grep "<font color" | sed "s/<font color=\"red\">//" | sed "s[</font>[["
-
-remove:
-	@echo "Removing $(APPNAME) from host $(ROKU_DEV_TARGET)"
-	@if [ "$(HTTPSTATUS)" == " 401" ]; \
-	then \
-		$(CURLCMD) --user $(USERPASS) --digest -F "mysubmit=Delete" -F "archive=" -F "passwd=" http://$(ROKU_DEV_TARGET)/plugin_install | grep "<font color" | sed "s/<font color=\"red\">//" | sed "s[</font>[[" ; \
-	else \
-		curl -s -S -F "mysubmit=Delete" -F "archive=" -F "passwd=" http://$(ROKU_DEV_TARGET)/plugin_install | grep "<font color" | sed "s/<font color=\"red\">//" | sed "s[</font>[[" ; \
-	fi
-
-get_images:
-	@if [ ! -d $(OUTPUT_DIR) ]; \
-	then \
-		mkdir -p $(OUTPUT_DIR); \
-		echo "Creating images folder"; \
-	fi
-
-	echo "Downloading SVG source files from $(BRANDING_ROOT)"
-	@wget $(BRANDING_ROOT)/$(ICON_SOURCE) > /dev/null
-	@wget $(BRANDING_ROOT)/$(BANNER_SOURCE) > /dev/null
-	echo "Finished downloading SVG files"
-
-	echo "Creating image files"
-	@convert -background "#000b25" -gravity center -scale 535x400 -extent 540x405 $(BANNER_SOURCE) $(OUTPUT_DIR)/channel-poster_fhd.png
-	@convert -background "#000b25" -gravity center -scale 275x205 -extent 336x210 $(BANNER_SOURCE) $(OUTPUT_DIR)/channel-poster_hd.png
-	@convert -background "#000b25" -gravity center -scale 182x135 -extent 246x140 $(BANNER_SOURCE) $(OUTPUT_DIR)/channel-poster_sd.png
-
-	@convert -background none -gravity center -scale 1000x48 -extent 180x48 $(BANNER_SOURCE) $(OUTPUT_DIR)/logo.png
-
-	@convert -background "#000b25" -gravity center -scale 540x540 -extent 1920x1080 $(BANNER_SOURCE) $(OUTPUT_DIR)/splash-screen_fhd.jpg
-	@convert -background "#000b25" -gravity center -scale 360x360 -extent 1280x720 $(BANNER_SOURCE) $(OUTPUT_DIR)/splash-screen_hd.jpg
-	@convert -background "#000b25" -gravity center -scale 240x240 -extent 720x480 $(BANNER_SOURCE) $(OUTPUT_DIR)/splash-screen_sd.jpg
-	echo "Finished creating image files"
-
-screenshot:
-	SCREENSHOT_TIME=`date "+%s"`; \
-	curl -m 1 -o screenshot.jpg --user $(USERPASS) --digest "http://$(ROKU_DEV_TARGET)/pkgs/dev.jpg?time=$$SCREENSHOT_TIME" -H 'Accept: image/png,image/*;q=0.8,*/*;q=0.5' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate'
-
-
-
-

bsconfig-tests.json

@@ -23,7 +23,6 @@
   "diagnosticFilters": ["node_modules/**/*", "**/roku_modules/**/*"],
   "autoImportComponentScript": true,
   "allowBrighterScriptInBrightScript": true,
-  "createPackage": false,
   "stagingFolderPath": "build",
   "plugins": ["rooibos-roku"],
   "rooibos": {

components/ButtonGroupVert.bs

@@ -0,0 +1,44 @@
+sub init()
+    m.top.layoutDirection = "vert"
+    m.top.observeField("focusedChild", "onFocusChanged")
+    m.top.observeField("focusButton", "onFocusButtonChanged")
+end sub
+
+sub onFocusChanged()
+    if m.top.hasFocus()
+        m.top.getChild(0).setFocus(true)
+        m.top.focusButton = 0
+    end if
+end sub
+
+sub onFocusButtonChanged()
+    m.top.getChild(m.top.focusButton).setFocus(true)
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    if key = "OK"
+        m.top.selected = m.top.focusButton
+        return true
+    end if
+
+    if not press then return false
+
+    if key = "down"
+        i = m.top.focusButton
+        target = i + 1
+        if target >= m.top.getChildCount() then return false
+        m.top.focusButton = target
+        return true
+    else if key = "up"
+        i = m.top.focusButton
+        target = i - 1
+        if target < 0 then return false
+        m.top.focusButton = target
+        return true
+    else if key = "left" or key = "right"
+        m.top.escape = key
+        return true
+    end if
+
+    return false
+end function

components/ButtonGroupVert.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="ButtonGroupVert" extends="ButtonGroup">
+  <interface>
+    <field id="escape" type="string" alwaysNotify="true" />
+    <field id="selected" type="integer" alwaysNotify="true" />
+  </interface>
+</component>

components/Buttons/SlideOutButton.bs

@@ -0,0 +1,100 @@
+sub init()
+    m.buttonBackground = m.top.findNode("buttonBackground")
+    m.buttonIcon = m.top.findNode("buttonIcon")
+    m.buttonText = m.top.findNode("buttonText")
+
+    m.buttonText.visible = false
+
+    m.originalWidth = 0
+
+    m.top.observeField("background", "onBackgroundChanged")
+    m.top.observeField("icon", "onIconChanged")
+    m.top.observeField("text", "onTextChanged")
+    m.top.observeField("height", "onHeightChanged")
+    m.top.observeField("width", "onWidthChanged")
+    m.top.observeField("padding", "onPaddingChanged")
+    m.top.observeField("focusedChild", "onFocusChanged")
+
+    m.top.observeField("highlighted", "onHighlightChanged")
+end sub
+
+sub onFocusChanged()
+    if m.top.hasFocus()
+        m.buttonText.visible = true
+        m.buttonBackground.blendColor = m.top.focusBackground
+        m.top.width = 250
+    else
+        m.buttonText.visible = false
+        m.top.width = m.originalWidth
+        onHighlightChanged()
+    end if
+end sub
+
+sub onHighlightChanged()
+    if m.top.highlighted
+        m.buttonBackground.blendColor = m.top.highlightBackground
+    else
+        m.buttonBackground.blendColor = m.top.background
+    end if
+end sub
+
+sub onBackgroundChanged()
+    m.buttonBackground.blendColor = m.top.background
+    m.top.unobserveField("background")
+end sub
+
+sub onIconChanged()
+    m.buttonIcon.uri = m.top.icon
+end sub
+
+sub onTextChanged()
+    m.buttonText.text = m.top.text
+end sub
+
+sub setIconSize()
+    height = m.buttonBackground.height
+    width = m.buttonBackground.width
+    if height > 0 and width > 0
+        ' TODO: Use smallest number between them
+        m.buttonIcon.height = m.top.height
+
+        if m.top.padding > 0
+            m.buttonIcon.height = m.buttonIcon.height - m.top.padding
+        end if
+
+        m.buttonIcon.width = m.buttonIcon.height
+
+        m.buttonIcon.translation = [m.top.padding, ((height - m.buttonIcon.height) / 2)]
+        m.buttonText.translation = [m.top.padding + m.buttonIcon.width + 10, 12]
+    end if
+end sub
+
+sub onHeightChanged()
+    m.buttonBackground.height = m.top.height
+    setIconSize()
+end sub
+
+sub onWidthChanged()
+    if m.originalWidth = 0
+        m.originalWidth = m.top.width
+    end if
+
+    m.buttonBackground.width = m.top.width
+    setIconSize()
+end sub
+
+sub onPaddingChanged()
+    setIconSize()
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    if not press then return false
+
+    if key = "OK" and m.top.hasFocus()
+        ' Simply toggle the selected field to trigger the next event
+        m.top.selected = not m.top.selected
+        return true
+    end if
+
+    return false
+end function

components/Buttons/SlideOutButton.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="SlideOutButton" extends="Group">
+  <children>
+      <Poster id="buttonBackground" uri="pkg:/images/white.9.png" />
+      <Poster id="buttonIcon" />
+      <Label id="buttonText" color="#ffffff" font="font:SmallestSystemFont" horizAlign="center" />
+  </children>
+  <interface>
+    <field id="background" type="color" value="" />
+    <field id="focusBackground" type="color" value="" />
+    <field id="highlightBackground" type="color" value="" />
+    <field id="text" type="string" value="" />
+    <field id="padding" type="integer" value="-1" />
+    <field id="height" type="integer" value="" />
+    <field id="width" type="integer" value="" />
+    <field id="icon" type="string" value="" />
+    <field id="selected" type="boolean" value="false" />
+    <field id="highlighted" type="boolean" value="false" />
+  </interface>
+</component>

components/ItemGrid/LoadVideoContentTask.brs

@@ -142,7 +142,6 @@ sub LoadItems_AddVideoContent(video as object, mediaSourceId as dynamic, audio_s
 
 
     ' 'TODO: allow user selection of subtitle track before playback initiated, for now set to no subtitles
-
     video.directPlaySupported = m.playbackInfo.MediaSources[0].SupportsDirectPlay
     fully_external = false
 
@@ -165,8 +164,8 @@ sub LoadItems_AddVideoContent(video as object, mediaSourceId as dynamic, audio_s
     end if
 
     if video.directPlaySupported
-        addVideoContentURL(video, mediaSourceId, audio_stream_idx, fully_external)
         video.isTranscoded = false
+        addVideoContentURL(video, mediaSourceId, audio_stream_idx, fully_external)
     else
         if m.playbackInfo.MediaSources[0].TranscodingUrl = invalid
             ' If server does not provide a transcode URL, display a message to the user
@@ -204,15 +203,13 @@ sub addVideoContentURL(video, mediaSourceId, audio_stream_idx, fully_external)
             fully_external = true
             video.content.url = m.playbackInfo.MediaSources[0].Path
         end if
-    else:
+    else
-        params = {}
+        params = {
-
-        params.append({
             "Static": "true",
             "Container": video.container,
             "PlaySessionId": video.PlaySessionId,
             "AudioStreamIndex": audio_stream_idx
-        })
+        }
 
         if mediaSourceId <> ""
             params.MediaSourceId = mediaSourceId

components/JFVideo.brs

@@ -90,10 +90,13 @@ end sub
 '
 ' Runs Next Episode button animation and sets focus to button
 sub showNextEpisodeButton()
-    if m.global.session.user.configuration.EnableNextEpisodeAutoPlay and not m.nextEpisodeButton.visible
+    if m.top.content.contenttype <> 4 then return ' only display when content is type "Episode"
+    if m.nextupbuttonseconds = 0 then return ' is the button disabled?
+
+    if m.nextEpisodeButton.opacity = 0 and m.global.session.user.configuration.EnableNextEpisodeAutoPlay
+        m.nextEpisodeButton.visible = true
         m.showNextEpisodeButtonAnimation.control = "start"
         m.nextEpisodeButton.setFocus(true)
-        m.nextEpisodeButton.visible = true
     end if
 end sub
 
@@ -117,13 +120,22 @@ end sub
 
 ' Checks if we need to display the Next Episode button
 sub checkTimeToDisplayNextEpisode()
-    if m.top.content.contenttype <> 4 then return
+    if m.top.content.contenttype <> 4 then return ' only display when content is type "Episode"
-    if m.nextupbuttonseconds = 0 then return
+    if m.nextupbuttonseconds = 0 then return ' is the button disabled?
 
-    if int(m.top.position) >= (m.top.duration - m.nextupbuttonseconds)
+    if isValid(m.top.duration) and isValid(m.top.position)
-        showNextEpisodeButton()
+        nextEpisodeCountdown = Int(m.top.duration - m.top.position)
-        updateCount()
+
-        return
+        if nextEpisodeCountdown < 0 and m.nextEpisodeButton.opacity = 0.9
+            hideNextEpisodeButton()
+            return
+        else if nextEpisodeCountdown > 1 and int(m.top.position) >= (m.top.duration - m.nextupbuttonseconds - 1)
+            updateCount()
+            if m.nextEpisodeButton.opacity = 0
+                showNextEpisodeButton()
+            end if
+            return
+        end if
     end if
 
     if m.nextEpisodeButton.visible or m.nextEpisodeButton.hasFocus()
@@ -266,8 +278,8 @@ function onKeyEvent(key as string, press as boolean) as boolean
         return true
     else
         'Hide Next Episode Button
-        if m.nextEpisodeButton.visible or m.nextEpisodeButton.hasFocus()
+        if m.nextEpisodeButton.opacity > 0 or m.nextEpisodeButton.hasFocus()
-            m.nextEpisodeButton.visible = false
+            m.nextEpisodeButton.opacity = 0
             m.nextEpisodeButton.setFocus(false)
             m.top.setFocus(true)
         end if

components/JFVideo.xml

@@ -40,7 +40,7 @@
     <Animation id="showNextEpisodeButton" duration="1.0" repeat="false" easeFunction="inQuad">
       <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[0.0, .9]" fieldToInterp="nextEpisode.opacity" />
     </Animation>
-    <Animation id="hideNextEpisodeButton" duration=".2" repeat="false" easeFunction="inQuad">
+    <Animation id="hideNextEpisodeButton" duration=".25" repeat="false" easeFunction="inQuad">
       <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[.9, 0]" fieldToInterp="nextEpisode.opacity" />
     </Animation>
   </children>

components/keyboards/IntegerKeyboard.bs

@@ -0,0 +1,81 @@
+sub init()
+    m.top.keyGrid.keyDefinitionUri = "pkg:/components/keyboards/IntegerKeyboardKDF.json"
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    if key = "back"
+        m.top.escape = key
+        return true
+    end if
+
+    if not press then return false
+
+    if key = "left"
+        if m.top.textEditBox.hasFocus()
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "1"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "4"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "7"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "backspace"
+            m.top.escape = key
+            return true
+        end if
+    end if
+
+    if key = "right"
+        if m.top.textEditBox.hasFocus()
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "3"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "6"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "9"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "submit"
+            m.top.escape = key
+            return true
+        end if
+    end if
+
+    if key = "up"
+        if m.top.textEditBox.hasFocus()
+            m.top.escape = key
+            return true
+        end if
+    end if
+
+    if key = "down"
+        if m.top.focusedChild.keyFocused = "0"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "backspace"
+            m.top.escape = key
+            return true
+        else if m.top.focusedChild.keyFocused = "submit"
+            m.top.escape = key
+            return true
+        end if
+    end if
+
+    return false
+end function
+
+function keySelected(key as string) as boolean
+    if key = "submit"
+        m.top.submit = true
+        return true
+    end if
+
+    return false
+end function

components/keyboards/IntegerKeyboard.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8" ?>
+
+<component name="IntegerKeyboard" extends="DynamicCustomKeyboard">
+    <interface>
+        <function name="keySelected" />
+        <field id="submit" type="bool" alwaysNotify="true" />
+        <field id="escape" type="string" alwaysNotify="true" />
+    </interface>
+</component>

components/keyboards/IntegerKeyboardKDF.json

@@ -0,0 +1,73 @@
+{
+  "keyboardWidthFHD": 495,
+  "keyboardHeightFHD": 300,
+  "keyboardWidthHD": 324,
+  "keyboardHeightHD": 200,
+  "sections": [
+    {
+      "grids": [
+        {
+          "rows": [
+            {
+              "keys": [
+                {
+                  "label": "1"
+                },
+                {
+                  "label": "2"
+                },
+                {
+                  "label": "3"
+                }
+              ]
+            },
+            {
+              "keys": [
+                {
+                  "label": "4"
+                },
+                {
+                  "label": "5"
+                },
+                {
+                  "label": "6"
+                }
+              ]
+            },
+            {
+              "keys": [
+                {
+                  "label": "7"
+                },
+                {
+                  "label": "8"
+                },
+                {
+                  "label": "9"
+                }
+              ]
+            },
+            {
+              "keys": [
+                {
+                  "icon": "theme:DKB_DeleteKeyBitmap",
+                  "focusIcon": "theme:DKB_DeleteKeyFocusBitmap",
+                  "autoRepeat": 1,
+                  "strOut": "backspace"
+                },
+                {
+                  "label": "0"
+                },
+                {
+                  "icon": "pkg:/images/icons/check_white.png",
+                  "focusIcon": "pkg:/images/icons/check_black.png",
+                  "strOut": "submit"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

components/music/ArtistView.xml

@@ -33,11 +33,11 @@
 
     </SectionScroller>
 
-    <bgv_ButtonGroupVert id="sectionNavigation" translation="[-100, 175]" itemSpacings="[10]">
+    <ButtonGroupVert id="sectionNavigation" translation="[-100, 175]" itemSpacings="[10]">
-      <sob_SlideOutButton background="#070707" focusBackground="#00a4dc" highlightBackground="#555555" padding="20" icon="pkg:/images/icons/details.png" text="Details" height="50" width="60" />
+      <SlideOutButton background="#070707" focusBackground="#00a4dc" highlightBackground="#555555" padding="20" icon="pkg:/images/icons/details.png" text="Details" height="50" width="60" />
-      <sob_SlideOutButton id="albumsLink" background="#070707" focusBackground="#00a4dc" highlightBackground="#555555" padding="20" icon="pkg:/images/icons/cd.png" text="Albums" height="50" width="60" />
+      <SlideOutButton id="albumsLink" background="#070707" focusBackground="#00a4dc" highlightBackground="#555555" padding="20" icon="pkg:/images/icons/cd.png" text="Albums" height="50" width="60" />
-      <sob_SlideOutButton id="appearsOnLink" background="#070707" focusBackground="#00a4dc" highlightBackground="#555555" padding="20" icon="pkg:/images/icons/cassette.png" text="Appears On" height="50" width="60" />
+      <SlideOutButton id="appearsOnLink" background="#070707" focusBackground="#00a4dc" highlightBackground="#555555" padding="20" icon="pkg:/images/icons/cassette.png" text="Appears On" height="50" width="60" />
-    </bgv_ButtonGroupVert>
+    </ButtonGroupVert>
 
     <Animation id="pageLoad" duration="1" repeat="false">
       <Vector2DFieldInterpolator key="[0.5, 1.0]" keyValue="[[-100, 175], [40, 175]]" fieldToInterp="sectionNavigation.translation" />

components/search/SearchResults.brs

@@ -41,6 +41,13 @@ sub loadResults()
     m.searchSelect.itemdata = m.searchTask.results
     m.searchSelect.query = m.top.SearchAlpha
     m.searchHelpText.visible = false
+    if m.searchTask.results.TotalRecordCount = 0
+        ' make sure focus is on the keyboard
+        if m.searchSelect.isinFocusChain()
+            m.searchAlphabox.setFocus(true)
+        end if
+        return
+    end if
     m.searchAlphabox = m.top.findnode("searchResults")
     m.searchAlphabox.translation = "[470, 85]"
 end sub
@@ -57,9 +64,21 @@ function onKeyEvent(key as string, press as boolean) as boolean
     if key = "left" and m.searchSelect.isinFocusChain()
         m.searchAlphabox.setFocus(true)
         return true
-    else if key = "right"
+    else if key = "right" and m.searchSelect.content <> invalid and m.searchSelect.content.getChildCount() > 0
         m.searchSelect.setFocus(true)
         return true
+    else if key = "play" and m.searchSelect.isinFocusChain() and m.searchSelect.rowItemFocused.count() > 0
+        print "play was pressed from search results"
+        if m.searchSelect.rowItemFocused <> invalid
+            selectedContent = m.searchSelect.content.getChild(m.searchSelect.rowItemFocused[0])
+            if selectedContent <> invalid
+                selectedItem = selectedContent.getChild(m.searchSelect.rowItemFocused[1])
+                if selectedItem <> invalid
+                    m.top.quickPlayNode = selectedItem
+                    return true
+                end if
+            end if
+        end if
     end if
     return false
 

components/search/SearchRow.brs

@@ -65,7 +65,7 @@ function getData()
         "PlaylistsFolder": { "label": "Playlist", "count": 0 }
     }
 
-    for each item in itemData.searchHints
+    for each item in itemData.Items
         if content_types[item.type] <> invalid
             content_types[item.type].count += 1
         end if
@@ -86,10 +86,9 @@ sub addRow(data, title, type_filter)
     itemData = m.top.itemData
     row = data.CreateChild("ContentNode")
     row.title = title
-    for each item in itemData.SearchHints
+    for each item in itemData.Items
         if item.type = type_filter
             row.appendChild(item)
         end if
     end for
 end sub
-

components/settings/settings.brs

@@ -1,7 +1,6 @@
 import "pkg:/source/utils/config.brs"
 import "pkg:/source/utils/misc.brs"
 import "pkg:/source/roku_modules/log/LogMixin.brs"
-import "pkg:/source/api/sdk.bs"
 
 sub init()
     m.log = log.Logger("Settings")
@@ -202,16 +201,21 @@ sub radioSettingChanged()
     set_user_setting(selectedSetting.settingName, m.radioSetting.content.getChild(m.radioSetting.checkedItem).id)
 end sub
 
+' Returns true if any of the data entry forms are in focus
+function isFormInFocus() as boolean
+    if isValid(m.settingDetail.focusedChild) or m.radioSetting.hasFocus() or m.boolSetting.hasFocus() or m.integerSetting.hasFocus()
+        return true
+    end if
+    return false
+end function
+
 function onKeyEvent(key as string, press as boolean) as boolean
     if not press then return false
 
     if (key = "back" or key = "left") and m.settingsMenu.focusedChild <> invalid and m.userLocation.Count() > 1
         LoadMenu({})
         return true
-    else if (key = "back" or key = "left") and m.settingDetail.focusedChild <> invalid
+    else if (key = "back" or key = "left") and isFormInFocus()
-        m.settingsMenu.setFocus(true)
-        return true
-    else if (key = "back" or key = "left") and m.radioSetting.hasFocus()
         m.settingsMenu.setFocus(true)
         return true
     end if

components/settings/settings.xml

@@ -35,7 +35,7 @@
       </ContentNode>
     </RadioButtonList>
 
-    <intkeyboard_integerKeyboard translation="[1034, 510]" id="integerSetting" maxLength="3" domain="numeric" visible="false" />
+    <IntegerKeyboard translation="[1034, 510]" id="integerSetting" maxLength="3" domain="numeric" visible="false" />
 
   </children>
 </component>

components/video/VideoPlayerView.brs

@@ -51,6 +51,7 @@ sub init()
     m.nextEpisodeButton = m.top.findNode("nextEpisode")
     m.nextEpisodeButton.text = tr("Next Episode")
     m.nextEpisodeButton.setFocus(false)
+    m.nextupbuttonseconds = m.global.session.user.settings["playback.nextupbuttonseconds"].ToInt()
 
     m.showNextEpisodeButtonAnimation = m.top.findNode("showNextEpisodeButton")
     m.hideNextEpisodeButtonAnimation = m.top.findNode("hideNextEpisodeButton")
@@ -380,18 +381,24 @@ end sub
 ' Runs Next Episode button animation and sets focus to button
 sub showNextEpisodeButton()
     if m.pauseMenu.visible then return
+    if m.top.content.contenttype <> 4 then return ' only display when content is type "Episode"
+    if m.nextupbuttonseconds = 0 then return ' is the button disabled?
 
-    if m.global.session.user.configuration.EnableNextEpisodeAutoPlay and not m.nextEpisodeButton.visible
+    if m.nextEpisodeButton.opacity = 0 and m.global.session.user.configuration.EnableNextEpisodeAutoPlay
+        m.nextEpisodeButton.visible = true
         m.showNextEpisodeButtonAnimation.control = "start"
         m.nextEpisodeButton.setFocus(true)
-        m.nextEpisodeButton.visible = true
     end if
 end sub
 
 '
 'Update count down text
 sub updateCount()
-    m.nextEpisodeButton.text = tr("Next Episode") + " " + Int(m.top.duration - m.top.position).toStr()
+    nextEpisodeCountdown = Int(m.top.duration - m.top.position)
+    if nextEpisodeCountdown < 0
+        nextEpisodeCountdown = 0
+    end if
+    m.nextEpisodeButton.text = tr("Next Episode") + " " + nextEpisodeCountdown.toStr()
 end sub
 
 '
@@ -404,10 +411,22 @@ end sub
 
 ' Checks if we need to display the Next Episode button
 sub checkTimeToDisplayNextEpisode()
-    if int(m.top.position) >= (m.top.duration - 30)
+    if m.top.content.contenttype <> 4 then return ' only display when content is type "Episode"
-        showNextEpisodeButton()
+    if m.nextupbuttonseconds = 0 then return ' is the button disabled?
-        updateCount()
+
-        return
+    if isValid(m.top.duration) and isValid(m.top.position)
+        nextEpisodeCountdown = Int(m.top.duration - m.top.position)
+
+        if nextEpisodeCountdown < 0 and m.nextEpisodeButton.opacity = 0.9
+            hideNextEpisodeButton()
+            return
+        else if nextEpisodeCountdown > 1 and int(m.top.position) >= (m.top.duration - m.nextupbuttonseconds - 1)
+            updateCount()
+            if m.nextEpisodeButton.opacity = 0
+                showNextEpisodeButton()
+            end if
+            return
+        end if
     end if
 
     if m.nextEpisodeButton.visible or m.nextEpisodeButton.hasFocus()
@@ -584,8 +603,8 @@ function onKeyEvent(key as string, press as boolean) as boolean
         return true
     else
         'Hide Next Episode Button
-        if m.nextEpisodeButton.visible or m.nextEpisodeButton.hasFocus()
+        if m.nextEpisodeButton.opacity > 0 or m.nextEpisodeButton.hasFocus()
-            m.nextEpisodeButton.visible = false
+            m.nextEpisodeButton.opacity = 0
             m.nextEpisodeButton.setFocus(false)
             m.top.setFocus(true)
         end if

components/video/VideoPlayerView.xml

@@ -43,7 +43,7 @@
     <Animation id="showNextEpisodeButton" duration="1.0" repeat="false" easeFunction="inQuad">
       <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[0.0, .9]" fieldToInterp="nextEpisode.opacity" />
     </Animation>
-    <Animation id="hideNextEpisodeButton" duration=".2" repeat="false" easeFunction="inQuad">
+    <Animation id="hideNextEpisodeButton" duration=".25" repeat="false" easeFunction="inQuad">
       <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[.9, 0]" fieldToInterp="nextEpisode.opacity" />
     </Animation>
   </children>

dictionary.txt

@@ -6,6 +6,7 @@ sideload
 Sideload
 Reddit
 DEVGUIDE
+ImageMagick
 ing
 hardcode
 Hardcoding

docs/DEVGUIDE.md

@@ -5,25 +5,23 @@ Follow the steps below to install the app on your personal Roku device. This wil
 - [Dev Guide For The Jellyfin Roku App](#dev-guide-for-the-jellyfin-roku-app)
   - [Developer Mode](#developer-mode)
   - [Clone the GitHub Repo](#clone-the-github-repo)
+  - [Install Dependencies](#install-dependencies)
   - [Method 1: Visual Studio Code](#method-1-visual-studio-code)
     - [Install VSCode](#install-vscode)
     - [Usage](#usage)
     - [Hardcoding Roku Information](#hardcoding-roku-information)
-  - [Method 2: Sideload to Roku Device Manually](#method-2-sideload-to-roku-device-manually)
+  - [Method 2: Command Line](#method-2-command-line)
-  - [Method 3: Direct load to Roku Device](#method-3-direct-load-to-roku-device)
+    - [Workflow](#workflow)
-    - [Login Details](#login-details)
+    - [Install Command Line Dependencies](#install-command-line-dependencies)
-    - [Install Necessary Packages](#install-necessary-packages)
     - [Deploy](#deploy)
-  - [Bug/Crash Reports](#bugcrash-reports)
+    - [Bug/Crash Reports](#bugcrash-reports)
-  - [Upgrade](#upgrade)
+    - [(Optional) Update Images](#optional-update-images)
-  - [Command Line Workflow](#command-line-workflow)
   - [Committing](#committing)
-  - [(Optional) Update Images](#optional-update-images)
   - [Adding a User Setting](#adding-a-user-setting)
     - [The order of any particular menu is as follows](#the-order-of-any-particular-menu-is-as-follows)
     - [When giving your setting a name](#when-giving-your-setting-a-name)
     - [When giving your setting a description](#when-giving-your-setting-a-description)
-      - [**Remember to add all new strings to locale/en\_US/translations.ts**](#remember-to-add-all-new-strings-to-localeen_ustranslationsts)
+      - [**Remember to add all new strings to locale/en_US/translations.ts**](#remember-to-add-all-new-strings-to-localeen_ustranslationsts)
 
 ## Developer Mode
 
@@ -43,7 +41,11 @@ Open up the new folder:
 cd jellyfin-roku
 ```
 
-Install Dependencies:
+## Install Dependencies
+
+You'll need [`npm`](https://nodejs.org), version 16 at least.
+
+Then, use it to install dependencies
 
 ```bash
 npm install
@@ -73,33 +75,36 @@ Out of the box, the BrightScript extension will prompt you to pick a Roku device
 
 ```json
 {
-    "brightscript.debug.host": "YOUR_ROKU_HOST_HERE",
+  "brightscript.debug.host": "YOUR_ROKU_HOST_HERE",
-    "brightscript.debug.password": "YOUR_ROKU_DEV_PASSWORD_HERE",
+  "brightscript.debug.password": "YOUR_ROKU_DEV_PASSWORD_HERE"
 }
 ```
 
 Example:
 ![image](https://user-images.githubusercontent.com/2544493/170485209-0dbe6787-8026-47e7-9095-1df96cda8a0a.png)
 
-## Method 2: Sideload to Roku Device Manually
+## Method 2: Command Line
 
-Install Necessary Packages
+### Workflow
 
-```bash
+Modify code -> `make build-dev install` -> Use Roku remote to test changes -> `telnet ${ROKU_DEV_TARGET} 8085` -> `CTRL + ]` -> `quit + ENTER`
-sudo apt-get install wget make zip
+
-```
+You will need to use telnet to see log statements, warnings, and error reports. You won't always need to telnet into your device but the workflow above is typical when you are new to BrightScript or are working on tricky code.
+
+### Install Command Line Dependencies
+
+You'll need [`make`](https://www.gnu.org/software/make) and [`curl`](https://curl.se).
 
 Build the package
 
 ```bash
-make dev
+make build-dev
 ```
 
-This will create a zip in `out/apps/Jellyfin_Roku-dev.zip`. Login to your Roku's device in your browser and upload the zip file then run install.
+This will create a zip in `out/jellyfin-roku.zip`, that you can upload on your Roku's device via your browser.
+Or you can continue with the next steps to do it via the command line.
 
-## Method 3: Direct load to Roku Device
+### Deploy
-
-### Login Details
 
 Run this command - replacing the IP and password with your Roku device IP and dev password from the first step:
 
@@ -108,16 +113,6 @@ export ROKU_DEV_TARGET=192.168.1.234
 export ROKU_DEV_PASSWORD=password
 ```
 
-Normally you would have to open up your browser and upload a .zip file containing the app code. These commands enable the app to be zipped up and installed on the Roku automatically which is essential for developers and makes it easy to upgrade in the future for users.
-
-### Install Necessary Packages
-
-```bash
-sudo apt-get install wget make zip
-```
-
-### Deploy
-
 Package up the application, send it to your Roku, and launch the channel:
 
 ```bash
@@ -126,9 +121,9 @@ make install
 
 Note: You only have to run this command once if you are not a developer. The Jellyfin channel will still be installed after rebooting your Roku device.
 
-## Bug/Crash Reports
+### Bug/Crash Reports
 
-Did the app crash? Find a nasty bug? Use the this command to view the error log and [report it to the developers](https://github.com/jellyfin/jellyfin-roku/issues):
+Did the app crash? Find a nasty bug? Use this command to view the error log and [report it to the developers](https://github.com/jellyfin/jellyfin-roku/issues):
 
 ```bash
 telnet ${ROKU_DEV_TARGET} 8085
@@ -136,51 +131,17 @@ telnet ${ROKU_DEV_TARGET} 8085
 
 To exit telnet: `CTRL + ]` and then type `quit + ENTER`
 
-## Upgrade
+You can also take a screenshot of the app to augment the bug report.
-
-Navigate to the folder where you installed the app then upgrade the code to the latest version:
 
 ```bash
-git pull
+make screenshot
 ```
 
-Deploy the app:
+### (Optional) Update Images
-
-```bash
-make install
-```
-
-## Command Line Workflow
-
-Modify code -> `make install` -> Use Roku remote to test changes -> `telnet ${ROKU_DEV_TARGET} 8085` -> `CTRL + ]` -> `quit + ENTER`
-
-Unfortunately there is no debugger. You will need to use telnet to see log statements, warnings, and error reports. You won't always need to telnet into your device but the workflow above is typical when you are new to BrightScript or are working on tricky code.
-
-Install necessary packages:
-
-```bash
-sudo apt-get install nodejs npm
-```
-
-## Committing
-
-Before committing your code, please run:
-
-```bash
-make prep_commit
-```
-
-This will format your code and run the CI checks locally to ensure you will pass the CI tests.
-
-## (Optional) Update Images
 
 This repo already contains all necessary images for the app. This script only needs to be run when the [official Jellyfin images](https://github.com/jellyfin/jellyfin-ux) are changed to allow us to update the repo images.
 
-Install necessary packages:
+You'll need `convert`, from [ImageMagick](https://imagemagick.org)
-
-```bash
-sudo apt-get install imagemagick
-```
 
 Download and convert images:
 
@@ -188,9 +149,19 @@ Download and convert images:
 make get_images
 ```
 
+## Committing
+
+Before committing your code, please run:
+
+```bash
+npm run lint
+```
+
+And fix any encountered issue.
+
 ## Adding a User Setting
 
-Your new functionality may need a setting to configure its behavior, or, sometimes, we may ask you to add a setting for your new functionality, so that users may enable or disable it.  If you find yourself in this position, please observe the following considerations when adding your new user setting.
+Your new functionality may need a setting to configure its behavior, or, sometimes, we may ask you to add a setting for your new functionality, so that users may enable or disable it. If you find yourself in this position, please observe the following considerations when adding your new user setting.
 
 ### The order of any particular menu is as follows
 
@@ -200,7 +171,7 @@ Your new functionality may need a setting to configure its behavior, or, sometim
 
 ### When giving your setting a name
 
-Ideally, your setting will be named with a relevant noun such as ```Cinema Mode``` or ```Codec Support.``` Sometimes there is no such name that is sufficiently specific, such as with ```Clock```. In this case you must use a verb phrase to name your setting, such as ```Hide Clock.``` If your verb phrase _must_ be long to be specific, you may drop implied verbs if absolutely necessary, such as how ```Text Subtitles Only``` drops the implied ```Show.``` Do not use the infinitive form ```action-doing``` or ```doing stuff.``` Instead, use the imperative: ```Do Action``` or ```Do Stuff.``` Remember that _characters are a commodity in names._
+Ideally, your setting will be named with a relevant noun such as `Cinema Mode` or `Codec Support.` Sometimes there is no such name that is sufficiently specific, such as with `Clock`. In this case you must use a verb phrase to name your setting, such as `Hide Clock.` If your verb phrase _must_ be long to be specific, you may drop implied verbs if absolutely necessary, such as how `Text Subtitles Only` drops the implied `Show.` Do not use the infinitive form `action-doing` or `doing stuff.` Instead, use the imperative: `Do Action` or `Do Stuff.` Remember that _characters are a commodity in names._
 
 Generally, we should not repeat the name of a setting's parent in the setting's name. Being a child of that parent implies that the settings are related to it.