diff --git a/ios/CHANGELOG.md b/ios/CHANGELOG.md index b060c4c..1569feb 100644 --- a/ios/CHANGELOG.md +++ b/ios/CHANGELOG.md @@ -11,3 +11,4 @@ The iOS app, `ios/`. Format: [Keep a Changelog](https://keepachangelog.com/en/1. - The icon shows All Subscriptions' unread count, as the page's badge does: set when the app comes forward, after an item is marked read, and by a refresh iOS runs now and then while the app is closed, so it can be hours behind (#421). - Episodes kept on the phone, with the page's Keep button, play with no connection: the app fetches the file in the background, even with the app closed, and plays it from the phone; where you got to and what you finished offline is sent once the connection is back. Signing out removes them (#425). - A sleep timer in the player, kept by the phone, so it pauses on time with the screen locked, fading out over the last ten seconds; and an AirPlay button beside it, for another speaker or a TV (#429). +- Presses are felt: a light tap on play, pause, flag and pull to refresh, a success on marking read, a warning with an error (#430). diff --git a/ios/README.md b/ios/README.md index 6556901..76e05d9 100644 --- a/ios/README.md +++ b/ios/README.md @@ -72,6 +72,7 @@ Page to app, on `webkit.messageHandlers.ipx`: | `{t:"keep", url}` `{t:"unkeep", url}` | keep a file on the phone, or let it go: the page's path for it, `/media/42` or `/media/42/deadair` (#425) | | `{t:"clearKept"}` | signing out: everything kept goes | | `{t:"sleep", secs}` | pause after `secs`, fading out over the last ten; 0 turns the timer off (#429) | +| `{t:"haptic", kind}` | a press felt: `tap`, `done` (marked read) or `warn` (an error) (#430) | | `{t:"route", x, y, w, h}` | open the AirPlay picker, pointing at the page's button, in the web view's points (#429) | App to page, as `window.ipxNative.on(...)`: diff --git a/ios/Sources/Bridge.swift b/ios/Sources/Bridge.swift index 9a87cd7..06b817b 100644 --- a/ios/Sources/Bridge.swift +++ b/ios/Sources/Bridge.swift @@ -14,6 +14,8 @@ final class Bridge: NSObject, WKScriptMessageHandler { private weak var webView: WKWebView? private let playback: Playback + private let impact = UIImpactFeedbackGenerator(style: .light) + private let notice = UINotificationFeedbackGenerator() /// The system's AirPlay picker, which has no API to open it but its own button: kept on the /// web view, invisible, and pressed when the page's button is. private lazy var routePicker: AVRoutePickerView = { @@ -91,6 +93,7 @@ final class Bridge: NSObject, WKScriptMessageHandler { case "clearKept": Offline.shared.removeAll() case "sleep": playback.sleep(after: m["secs"] as? Double ?? 0) case "route": showRoutes(m) + case "haptic": haptic(m["kind"] as? String) default: break } } @@ -110,6 +113,16 @@ final class Bridge: NSObject, WKScriptMessageHandler { button.sendActions(for: primary ? .primaryActionTriggered : .touchUpInside) } + /// The page's presses felt (#430): light for a tap, the system's success and warning for + /// something done and something gone wrong, as Mail and Messages use them. + private func haptic(_ kind: String?) { + switch kind { + case "done": notice.notificationOccurred(.success) + case "warn": notice.notificationOccurred(.warning) + default: impact.impactOccurred() + } + } + private static func controls(in v: UIView) -> [UIControl] { v.subviews.flatMap { ($0 as? UIControl).map { [$0] } ?? controls(in: $0) } } diff --git a/ios/project.yml b/ios/project.yml index fb562b0..e7adac8 100644 --- a/ios/project.yml +++ b/ios/project.yml @@ -25,7 +25,7 @@ targets: properties: CFBundleDisplayName: iPX CFBundleShortVersionString: $(MARKETING_VERSION) - CFBundleVersion: "7" + CFBundleVersion: "8" # Playing on with the screen locked. A plist key, not a signed entitlement, so it works on # a free personal team; CarPlay's own dashboard app is an entitlement Apple has to grant. UIBackgroundModes: [audio, fetch] diff --git a/tests/native-bridge.ts b/tests/native-bridge.ts index a8a18dd..387984a 100644 --- a/tests/native-bridge.ts +++ b/tests/native-bridge.ts @@ -170,6 +170,11 @@ since(); vm.runInContext('sleepIn(0)', ctx); ok(last('sleep')?.secs === 0, 'turning the timer off did not reach the app'); +// Haptics (#430): the page asks, the phone does. +since(); +vm.runInContext('toast("Unable to play", true)', ctx); +ok(last('haptic')?.kind === 'warn', 'an error was not felt'); + if (failed) { console.error(`\n${failed} failed`); process.exit(1); } -console.log('OK: native-bridge: the host takes playback, keeping and the sleep timer, and the page follows it'); +console.log('OK: native-bridge: the host takes playback, keeping, the sleep timer and haptics, and the page follows it'); process.exit(0); diff --git a/web/CHANGELOG.md b/web/CHANGELOG.md index f808904..57873c5 100644 --- a/web/CHANGELOG.md +++ b/web/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- In the iOS app, presses are felt: play, pause, flag, pull to refresh, marking read and errors each give the phone's haptic for it (#430). - A sleep timer in the player: 5 minutes to an hour, then playback fades out and pauses. In the iOS app the phone keeps the time, so it works with the screen locked; the app and Safari also get an AirPlay button. On a phone the title has the player's top line to itself, with the controls either side of play below it (#429). - In the iOS app, Keep on this device keeps the episode on the phone, where the app's own player plays it with no connection; until now the app had no Keep button (#425). - An episode kept on this device says so in its row of the list, On this device, not only in its files (#413). diff --git a/web/src/feedpage.ts b/web/src/feedpage.ts index 2d04782..f284cfb 100644 --- a/web/src/feedpage.ts +++ b/web/src/feedpage.ts @@ -163,7 +163,7 @@ async function feedAction(a: string,f: Feed){ try{ await api('/api/fetch',{method:'POST',body:JSON.stringify({feed:f.id,force:true})}); } catch(e){ spinEnd(); throw e; } } - if(a==='read'){ const r=await api(`/api/feeds/${encodeURIComponent(f.id)}/read-all`,{method:'POST'}); toast(`Marked ${r.marked} read`); await loadFeeds(true); renderFeed(); loadEntries(); } + if(a==='read'){ const r=await api(`/api/feeds/${encodeURIComponent(f.id)}/read-all`,{method:'POST'}); haptic('done'); toast(`Marked ${r.marked} read`); await loadFeeds(true); renderFeed(); loadEntries(); } if(a==='rm') removeFeed(f); if(a==='pin'){ try{ @@ -190,7 +190,7 @@ async function allAction(a: string){ if(!confirm(`Mark all ${n} unread item${n===1?'':'s'} read, in every feed you subscribe to?`)) return; try{ const r=await api('/api/read-all',{method:'POST'}); - toast(`Marked ${r.marked} read`); await loadFeeds(true); renderFeed(); loadEntries(); + haptic('done'); toast(`Marked ${r.marked} read`); await loadFeeds(true); renderFeed(); loadEntries(); }catch(e){ toast(why(e),true); } } } diff --git a/web/src/gestures.ts b/web/src/gestures.ts index 4349ea0..84aba74 100644 --- a/web/src/gestures.ts +++ b/web/src/gestures.ts @@ -156,7 +156,7 @@ document.addEventListener('touchend', () => { if(!g) return; if(g.pane === 'list'){ pullShow(0); - if(g.dy >= PULL) refreshFeed(); + if(g.dy >= PULL){ haptic('tap'); refreshFeed(); } return; } const i = S.entries.findIndex(x => entryKey(x) === S.sel); diff --git a/web/src/items.ts b/web/src/items.ts index d51ef70..71dbfdf 100644 --- a/web/src/items.ts +++ b/web/src/items.ts @@ -524,11 +524,11 @@ async function epAction(a: string, e: Entry, el: HTMLElement|null, encId?: numbe const enc=(encId!=null && e.enclosures.find(x=>x.id===encId)) || e.enclosures[0]; const path=`/api/entries/${encodeURIComponent(e.feed_id)}/${encodeURIComponent(e.guid)}`; try{ - if(a==='play') play(e, encId!=null ? enc : undefined); + if(a==='play'){ haptic('tap'); play(e, encId!=null ? enc : undefined); } if(a==='offline' && enc) await toggleKept(enc, entryName(e).text); if(a==='share') await share(entryName(e).text, encId!=null ? enc.url : e.link!, el??undefined); - if(a==='flag'){ e.flagged=!e.flagged; await api(path+'/flags',{method:'POST',body:JSON.stringify({flagged:e.flagged})}); redraw(); } - if(a==='read'){ await setRead(e,!e.read); redraw(); } + if(a==='flag'){ e.flagged=!e.flagged; await api(path+'/flags',{method:'POST',body:JSON.stringify({flagged:e.flagged})}); haptic('tap'); redraw(); } + if(a==='read'){ await setRead(e,!e.read); haptic(e.read?'done':'tap'); redraw(); } if(a==='get'){ if(!enc) return; await api(`/api/enclosures/${enc.id}/download`,{method:'POST'}); diff --git a/web/src/native.ts b/web/src/native.ts index 5206677..b0782e1 100644 --- a/web/src/native.ts +++ b/web/src/native.ts @@ -24,6 +24,15 @@ const ipxHost: ((m: any) => void) | null = (() => { })(); if (ipxHost) installNativePlayback(); + +/// A press felt as well as seen, in the app (#430): the phone's haptics, which a page cannot reach. +/// `tap` for play, pause and the like, `done` for something finished (marked read), `warn` for an +/// error. An app without them ignores the message; a browser has no host to send it to. +function haptic(kind: 'tap'|'done'|'warn'){ + // An error toasted while the script is still loading comes here before this file has declared + // ipxHost, which then throws; a haptic is not worth breaking that error's toast for. + try{ ipxHost?.({t:'haptic', kind}); }catch{} +} // Here, after ipxHost exists: in the app the button waits for the host to say it has a picker. paintRoute(); diff --git a/web/src/player.ts b/web/src/player.ts index c20444a..da5c69b 100644 --- a/web/src/player.ts +++ b/web/src/player.ts @@ -172,7 +172,7 @@ audio.addEventListener('playing',()=>{ asked=0; waited=0; }); audio.addEventListener('error',()=>{ if(audio.error) report('player_error',{msg:`media error ${audio.error.code}: ${audio.error.message}`,...playing()}); }); -$('#pplay').onclick=()=>audio.paused?audio.play():audio.pause(); +$('#pplay').onclick=()=>{haptic('tap');audio.paused?audio.play():audio.pause()}; $('#pback').onclick=()=>audio.currentTime-=15; $('#pfwd').onclick=()=>audio.currentTime+=30; $('#seek').oninput=(e: Event)=>{const d=audio.duration;if(d)audio.currentTime=d*Number((e.target as HTMLInputElement).value)/1000}; diff --git a/web/src/util.ts b/web/src/util.ts index 3fa6068..11003be 100644 --- a/web/src/util.ts +++ b/web/src/util.ts @@ -228,6 +228,7 @@ async function share(title: string, url: string, btn?: HTMLElement){ function toast(msg: string, bad?: boolean){ const t=document.createElement('div'), box=$('#toasts'); t.className='toast'+(bad?' bad':''); t.textContent=msg; + if(bad) haptic('warn'); const go=()=>{t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),320)}; // An error stays until it is put away: gone after six seconds, it was easy to miss and could not // be read again (#303).