Merge pull request #34 from bitfeed-project/tiny-screens

Support for tiny screens

client/src/App.svelte

@@ -4,13 +4,6 @@
 	import config from './config.js'
 	import { settings } from './stores.js'
 
-	if (URL) {
-		const queryParams = (new URL(document.location)).searchParams
-		if (queryParams.get('noTrack') != null) {
-			$settings.noTrack = true
-		}
-	}
-
 	if (!$settings.noTrack && config.public) analytics.init()
 </script>
 

client/src/components/Sidebar.svelte

@@ -56,6 +56,10 @@ function showBlock () {
     flex-direction: column-reverse;
     justify-content: flex-start;
     align-items: flex-start;
+
+    @media (max-width: 480px) and (max-height: 480px) {
+      display: none;
+    }
   }
 </style>
 

client/src/components/TxViz.svelte

@@ -3,7 +3,7 @@
   import TxController from '../controllers/TxController.js'
   import TxRender from './TxRender.svelte'
   import getTxStream from '../controllers/TxStream.js'
-  import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings } from '../stores.js'
+  import { settings, overlay, serverConnected, serverDelay, txCount, mempoolCount, mempoolScreenHeight, frameRate, avgFrameRate, blockVisible, tinyScreen, currentBlock, selectedTx, blockAreaSize, devEvents, devSettings } from '../stores.js'
   import BlockInfo from '../components/BlockInfo.svelte'
   import TxInfo from '../components/TxInfo.svelte'
   import Sidebar from '../components/Sidebar.svelte'
@@ -74,8 +74,6 @@
     $devEvents.addOneCallback = fakeTx
     $devEvents.addManyCallback = fakeTxs
     $devEvents.addBlockCallback = fakeBlock
-
-    if (!$settings.showMessages) $settings.showMessages = true
   })
 
   function resize () {
@@ -88,6 +86,12 @@
         height
       })
     }
+    const aspectRatio = window.innerWidth / window.innerHeight
+    if ((aspectRatio >= 1 && window.innerWidth < 480) || (aspectRatio <= 1 && window.innerHeight < 480)) {
+      $tinyScreen = true
+    } else {
+      $tinyScreen = false
+    }
   }
 
   function changedMode () {
@@ -226,17 +230,19 @@
       left: 0.5rem;
       font-size: 0.9rem;
       color: var(--palette-x);
+    }
 
-      // &::before {
+    .mempool-info {
-      //   content: '';
+      position: absolute;
-      //   position: absolute;
+      bottom: .5em;
-      //   left: 0;
+      left: 0.5rem;
-      //   top: 0;
+      right: 0.5em;
-      //   right: 0;
+      font-size: 0.9rem;
-      //   bottom: 0;
+      color: var(--palette-x);
-      //   background: var(--palette-b);
+      display: flex;
-      //   opacity: 0.5;
+      flex-direction: row;
-      // }
+      justify-content: space-between;
+      align-items: baseline;
     }
 
     .height-bar {
@@ -277,6 +283,11 @@
       text-align: left;
       padding: 1rem;
       flex-shrink: 0;
+      box-sizing: border-box;
+
+      .row {
+        margin-bottom: 5px;
+      }
 
       .status-light {
         display: inline-block;
@@ -296,7 +307,6 @@
       }
 
       .stat-counter, .fx-ticker {
-        margin-top: 5px;
         white-space: nowrap;
         cursor: pointer;
 
@@ -310,6 +320,21 @@
           color: var(--palette-good);
         }
       }
+
+      .block-height {
+        margin-bottom: 5px;
+        color: white;
+      }
+
+      &.tiny {
+        width: 100%;
+        .row {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+        }
+      }
     }
   }
 
@@ -399,14 +424,21 @@
 
     <div class="mempool-height" style="bottom: calc({$mempoolScreenHeight + 20}px)">
       <div class="height-bar" />
-      <span class="mempool-count">Mempool: { numberFormat.format(Math.round($mempoolCount)) } unconfirmed</span>
+      {#if $tinyScreen}
+        <div class="mempool-info">
+          <span class="left">Mempool</span>
+          <span class="right">{ numberFormat.format(Math.round($mempoolCount)) }</span>
+        </div>
+      {:else}
+        <span class="mempool-count">Mempool: { numberFormat.format(Math.round($mempoolCount)) } unconfirmed</span>
+      {/if}
     </div>
 
     <div class="block-area-wrapper">
       <div class="spacer"></div>
       <div class="block-area-outer" style="width: {$blockAreaSize}px; height: {$blockAreaSize}px">
         <div class="block-area">
-          <BlockInfo block={$currentBlock} visible={$blockVisible} on:hideBlock={hideBlock} />
+          <BlockInfo block={$currentBlock} visible={$blockVisible && !$tinyScreen} on:hideBlock={hideBlock} />
         </div>
         {#if config.dev && config.debug && $devSettings.guides }
           <div class="guide-area" />
@@ -422,11 +454,14 @@
   {/if}
 
   <div class="top-bar">
-    <div class="status">
+    <div class="status" class:tiny={$tinyScreen}>
       <div class="row">
         {#if $settings.showFX && fxLabel }
           <span class="fx-ticker {fxColor}" on:click={() => { $sidebarToggle = 'settings'}}>{ fxLabel }</span>
         {/if}
+        {#if $tinyScreen && $currentBlock }
+          <span class="block-height"><b>Block: </b>{ numberFormat.format($currentBlock.height) }</span>
+        {/if}
       </div>
       <div class="row">
         {#if $settings.showNetworkStatus }
@@ -435,7 +470,7 @@
       </div>
     </div>
     <div class="spacer" />
-    {#if config.messagesEnabled && $settings.showMessages }
+    {#if config.messagesEnabled && $settings.showMessages && !$tinyScreen }
       <Alerts />
     {/if}
   </div>

client/src/controllers/TxController.js

@@ -107,8 +107,6 @@ export default class TxController {
       return
     }
 
-    this.poolScene.scrollLock = true
-
     const block = new BitcoinBlock(blockData)
     this.knownBlocks[block.id] = true
     if (this.clearBlockTimeout) clearTimeout(this.clearBlockTimeout)
@@ -142,9 +140,10 @@ export default class TxController {
     this.blockScene.initialLayout()
     setTimeout(() => { this.poolScene.scrollLock = false; this.poolScene.layoutAll() }, 4000)
 
-    currentBlock.set(block)
     blockVisible.set(true)
 
+    currentBlock.set(block)
+
     return block
   }
 

client/src/stores.js

@@ -19,19 +19,22 @@ function createCounter () {
 	}
 }
 
-function createCachedDict (namespace, defaultValues) {
+function createCachedDict (namespace, setValues, defaultValues) {
 	const initial = {
 		...defaultValues
 	}
 
-	// load from local storage
 	Object.keys(initial).forEach(field => {
-		const val = localStorage.getItem(`${namespace}-${field}`)
+		// fields take setValues first, then fall back to cached values, then defaults
-		if (val != null) {
+		if (setValues[field] != null) initial[field] = setValues[field]
-			try {
+		else {
-				initial[field] = JSON.parse(val)
+			const val = localStorage.getItem(`${namespace}-${field}`)
-			} catch (e) {
+			if (val != null) {
-				initial[field] = val
+				try {
+					initial[field] = JSON.parse(val)
+				} catch (e) {
+					initial[field] = val
+				}
 			}
 		}
 	})
@@ -96,7 +99,7 @@ export const settingsOpen = writable(false)
 let localeCurrencyCode = LocaleCurrency.getCurrency(navigator.language)
 if (!currencies[localeCurrencyCode]) localeCurrencyCode = 'USD'
 
-export const settings = createCachedDict('settings', {
+const defaultSettings = {
 	darkMode: true,
 	showNetworkStatus: true,
 	currency: localeCurrencyCode,
@@ -105,13 +108,28 @@ export const settings = createCachedDict('settings', {
 	colorByFee: false,
 	fancyGraphics: true,
 	showMessages: true,
-	noTrack: false
+	noTrack: false,
-})
+}
+
+const searchParams = URL ? (new URL(document.location)).searchParams : {}
+const urlSettings = Object.keys(defaultSettings).reduce((map, key) => {
+	const param = searchParams.get(key)
+	if (param != null) {
+		if (param.toLowerCase() === 'false') map[key] = false
+		else map[key] = param
+	}
+
+	return map
+}, {})
+if (urlSettings.showMessages == null) urlSettings.showMessages = true
+
+export const settings = createCachedDict('settings', urlSettings, defaultSettings)
+
 export const colorMode = derived([settings], ([$settings]) => {
 	return $settings.colorByFee ? "fee" : "age"
 })
 
-export const devSettings = (config.dev && config.debug) ? createCachedDict('dev-settings', {
+export const devSettings = (config.dev && config.debug) ? createCachedDict('dev-settings', {}, {
 	guides: false,
 	layoutHints: false,
 }) : writable({})
@@ -127,3 +145,7 @@ export const overlay = writable(null)
 export const highlight = writable([])
 export const newHighlightQuery = writable(null)
 export const highlightingFull = writable(false)
+
+const aspectRatio = window.innerWidth / window.innerHeight
+let isTinyScreen = (window.innerWidth < 480 && window.innerHeight < 480)
+export const tinyScreen = writable(isTinyScreen)