Compare commits

..
68 changed files with 416 additions and 2773 deletions
-94
View File
@@ -26,100 +26,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
## Inter 4.1
Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION AND CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
DEALINGS IN THE FONT SOFTWARE.
## Framework7 documentation placeholder media ## Framework7 documentation placeholder media
The development-only Sky UI Kitchen Sink includes placeholder images mirrored The development-only Sky UI Kitchen Sink includes placeholder images mirrored
+6 -78
View File
@@ -56,7 +56,6 @@ import { useNotesStore } from '@/stores/notes'
import { useMemosStore } from '@/stores/memos' import { useMemosStore } from '@/stores/memos'
import { useWeatherStore } from '@/stores/weather' import { useWeatherStore } from '@/stores/weather'
import { useEasyShareStore } from '@/stores/easyshare' import { useEasyShareStore } from '@/stores/easyshare'
import { useRadioStore } from '@/stores/radio'
import { import {
useNotificationsStore, useNotificationsStore,
type PhoneNotification, type PhoneNotification,
@@ -71,15 +70,10 @@ import type {
CompanyUnreadCounts, CompanyUnreadCounts,
} from '@/types/companies' } from '@/types/companies'
import type { PhoneCall } from '@/types/phone' import type { PhoneCall } from '@/types/phone'
import type { DynamicIslandActivity } from '@/types/dynamicIsland'
import type { EasyShareEvent } from '@/types/easyshare' import type { EasyShareEvent } from '@/types/easyshare'
import type { CryptoMarketChangedData } from '@/types/crypto' import type { CryptoMarketChangedData } from '@/types/crypto'
import type { CityWarnEventData } from '@/types/citywarn' import type { CityWarnEventData } from '@/types/citywarn'
import { nuiCall } from '@/utils/nui' import { nuiCall } from '@/utils/nui'
import {
installPhoneAudioController,
setPhoneOutputVolume,
} from '@/utils/phoneAudio'
import { formatTimer } from '@/utils/clock' import { formatTimer } from '@/utils/clock'
import { parsePhonePreferences } from '@/utils/preferences' import { parsePhonePreferences } from '@/utils/preferences'
import { getHairlinePixelStyle } from '@/utils/rendering' import { getHairlinePixelStyle } from '@/utils/rendering'
@@ -88,7 +82,6 @@ import { isTrustedRootMessageSource } from '@/utils/windowMessages'
import SpringboardView from '@/views/SpringboardView.vue' import SpringboardView from '@/views/SpringboardView.vue'
type AppMessage = { type AppMessage = {
openHome?: boolean
type?: string type?: string
data?: data?:
| CalendarReminderData | CalendarReminderData
@@ -320,7 +313,6 @@ const notes = useNotesStore()
const memos = useMemosStore() const memos = useMemosStore()
const weather = useWeatherStore() const weather = useWeatherStore()
const easyShare = useEasyShareStore() const easyShare = useEasyShareStore()
const radio = useRadioStore()
const notifications = useNotificationsStore() const notifications = useNotificationsStore()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
@@ -343,13 +335,8 @@ const DARK_STATUS_BAR_APP_IDS = new Set([
'minesweeper', 'minesweeper',
'number-merge', 'number-merge',
]) ])
const isDynamicIslandGalleryRoute = computed(
() => isDevelopment && route.name === 'development-dynamic-islands',
)
const isDevelopmentRoute = computed( const isDevelopmentRoute = computed(
() => () => isDevelopment && route.name === 'development-sky-ui',
isDevelopment &&
(route.name === 'development-sky-ui' || isDynamicIslandGalleryRoute.value),
) )
const appTransitionName = computed(() => const appTransitionName = computed(() =>
route.query.transition === 'app-switch' ? 'app-switch' : 'app-window', route.query.transition === 'app-switch' ? 'app-switch' : 'app-window',
@@ -369,12 +356,9 @@ const setupPreviewDismissed = ref(false)
const setupDevelopmentSkipped = ref(false) const setupDevelopmentSkipped = ref(false)
const setupAppearanceSelected = ref(false) const setupAppearanceSelected = ref(false)
const pendingUnlockRoute = ref<string | null>(null) const pendingUnlockRoute = ref<string | null>(null)
const openHomeRequested = ref(false)
const unlockedServicesLoaded = ref(false) const unlockedServicesLoaded = ref(false)
const controlCenterOpened = ref(false) const controlCenterOpened = ref(false)
const activitySuspended = ref(false) const activitySuspended = ref(false)
const dynamicIslandExpanded = ref(false)
const dynamicIslandActivity = ref<DynamicIslandActivity | null>(null)
const simPicker = ref<SimPickerPayload | null>(null) const simPicker = ref<SimPickerPayload | null>(null)
const setupRequired = computed( const setupRequired = computed(
() => () =>
@@ -448,12 +432,6 @@ const phoneResolutionStyle = computed<CSSProperties>(() => ({
})) }))
const phoneStageStyle = computed<CSSProperties>(() => ({ const phoneStageStyle = computed<CSSProperties>(() => ({
...phoneResolutionStyle.value, ...phoneResolutionStyle.value,
'--phone-live-activity-peek-height':
dynamicIslandActivity.value === 'music'
? '190px'
: dynamicIslandActivity.value === 'recording'
? '132px'
: '112px',
visibility: activitySuspended.value ? 'hidden' : 'visible', visibility: activitySuspended.value ? 'hidden' : 'visible',
})) }))
const phoneDisplayStyle = computed<CSSProperties>(() => ({ const phoneDisplayStyle = computed<CSSProperties>(() => ({
@@ -471,7 +449,6 @@ let unlockTimer: number | undefined
let passcodeLockTimer: number | undefined let passcodeLockTimer: number | undefined
let hardwareVolumeHudTimer: number | undefined let hardwareVolumeHudTimer: number | undefined
let unlockedServicesIdle: number | undefined let unlockedServicesIdle: number | undefined
let removePhoneAudioController: (() => void) | undefined
let phoneClosePending = false let phoneClosePending = false
let simPickerClosePending = false let simPickerClosePending = false
@@ -781,7 +758,6 @@ function onMessage(event: MessageEvent<AppMessage>): void {
}) })
} }
} else if (event.data?.type === 'app:open') { } else if (event.data?.type === 'app:open') {
openHomeRequested.value = event.data.openHome === true
hydratePhone(event.data.data as PhoneOpenPayload) hydratePhone(event.data.data as PhoneOpenPayload)
void syncNavigationState().then(() => nuiCall('ui:opened')) void syncNavigationState().then(() => nuiCall('ui:opened'))
} else if (event.data?.type === 'device:updated') { } else if (event.data?.type === 'device:updated') {
@@ -1497,7 +1473,6 @@ function onFocusOut(event: FocusEvent): void {
} }
onMounted(() => { onMounted(() => {
removePhoneAudioController = installPhoneAudioController()
document.addEventListener('focusin', onFocusIn) document.addEventListener('focusin', onFocusIn)
document.addEventListener('focusout', onFocusOut) document.addEventListener('focusout', onFocusOut)
window.addEventListener('message', onMessage) window.addEventListener('message', onMessage)
@@ -1612,23 +1587,6 @@ watch(
}, },
) )
watch(
() => Boolean(dynamicIslandActivity.value || calls.activeCall),
(active) => {
void nuiCall('ui:live-activity', { active })
},
{ immediate: true },
)
watch(
hardwareAlertVolume,
(volume) => {
setPhoneOutputVolume(volume / 100)
if (radio.data.connected) void radio.setVolume(volume)
},
{ immediate: true },
)
watch( watch(
() => phone.isOpen, () => phone.isOpen,
(isOpen) => { (isOpen) => {
@@ -1661,8 +1619,7 @@ watch(
} }
isLocked.value = setupRequired.value isLocked.value = setupRequired.value
? false ? false
: developmentLockScreenPreview || : !isDevelopment || developmentLockScreenPreview
(!isDevelopment && phone.security.enabled)
passcodeRequired.value = isLocked.value && phone.security.enabled passcodeRequired.value = isLocked.value && phone.security.enabled
unlockedServicesLoaded.value = false unlockedServicesLoaded.value = false
controlCenterOpened.value = false controlCenterOpened.value = false
@@ -1680,18 +1637,8 @@ watch(
startPasscodeLock(passcodeRetrySeconds.value) startPasscodeLock(passcodeRetrySeconds.value)
} }
phone.setLaunchOrigin(null) phone.setLaunchOrigin(null)
if (setupRequired.value) { if (isLocked.value || setupRequired.value) void router.replace('/')
void router.replace('/') else loadUnlockedPhoneData()
} else if (openHomeRequested.value) {
openHomeRequested.value = false
if (isLocked.value) pendingUnlockRoute.value = '/'
else {
void router.replace('/')
loadUnlockedPhoneData()
}
} else if (!isLocked.value) {
loadUnlockedPhoneData()
}
}, },
) )
@@ -1703,7 +1650,6 @@ watch(
) )
onBeforeUnmount(() => { onBeforeUnmount(() => {
removePhoneAudioController?.()
updateTextInputFocus(false) updateTextInputFocus(false)
cancelUnlockedPhoneDataLoad() cancelUnlockedPhoneDataLoad()
weather.stop() weather.stop()
@@ -1742,15 +1688,12 @@ onBeforeUnmount(() => {
phone.isOpen || phone.isOpen ||
notifications.current || notifications.current ||
calls.activeCall || calls.activeCall ||
dynamicIslandActivity ||
notifications.devicePreviews.length notifications.devicePreviews.length
" "
class="phone-stage" class="phone-stage"
:class="{ :class="{
'phone-stage--browser-preview': isBrowserPreview, 'phone-stage--browser-preview': isBrowserPreview,
'phone-stage--landscape': phone.cameraLandscape, 'phone-stage--landscape': phone.cameraLandscape,
'phone-stage--live-activity':
!phone.isOpen && Boolean(dynamicIslandActivity || calls.activeCall),
'phone-stage--peek': notifications.isPeeking, 'phone-stage--peek': notifications.isPeeking,
}" }"
:style="phoneStageStyle" :style="phoneStageStyle"
@@ -1770,25 +1713,14 @@ onBeforeUnmount(() => {
@open="openNotificationPreview" @open="openNotificationPreview"
/> />
<div <div
v-if=" v-if="phone.isOpen || notifications.current || calls.activeCall"
phone.isOpen ||
notifications.current ||
calls.activeCall ||
dynamicIslandActivity
"
class="phone-resolution-wrapper phone-resolution-wrapper--primary" class="phone-resolution-wrapper phone-resolution-wrapper--primary"
> >
<div
id="phone-home-drag-portal"
class="phone-home-drag-portal"
aria-hidden="true"
></div>
<div class="phone-resolution-canvas phone-resolution-canvas--primary"> <div class="phone-resolution-canvas phone-resolution-canvas--primary">
<section <section
class="phone-device" class="phone-device"
:class="{ :class="{
'phone-app--light': !displayedDarkMode, 'phone-app--light': !displayedDarkMode,
'phone-device--island-expanded': dynamicIslandExpanded,
[`phone-app--${phone.preferences.settings.graphicsMode}`]: true, [`phone-app--${phone.preferences.settings.graphicsMode}`]: true,
}" }"
:aria-label="phone.t('Common.phone')" :aria-label="phone.t('Common.phone')"
@@ -1900,6 +1832,7 @@ onBeforeUnmount(() => {
@control-center="toggleControlCenter" @control-center="toggleControlCenter"
@lock="lockPhone" @lock="lockPhone"
/> />
<PhoneDynamicIsland v-if="!setupRequired" />
<SpringboardView <SpringboardView
v-if="!isDevelopmentRoute && !setupRequired" v-if="!isDevelopmentRoute && !setupRequired"
@edit-mode-change="springboardEditing = $event" @edit-mode-change="springboardEditing = $event"
@@ -1985,11 +1918,6 @@ onBeforeUnmount(() => {
aria-hidden="true" aria-hidden="true"
draggable="false" draggable="false"
/> />
<PhoneDynamicIsland
v-if="!setupRequired && !isDynamicIslandGalleryRoute"
@expanded-change="dynamicIslandExpanded = $event"
@live-activity-change="dynamicIslandActivity = $event"
/>
</section> </section>
</div> </div>
</div> </div>
@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs'
import { describe, expect, it } from 'vitest' import { describe, expect, it } from 'vitest'
const source = readFileSync(new URL('./App.vue', import.meta.url), 'utf8').replace(/\r\n/g, '\n') const source = readFileSync(new URL('./App.vue', import.meta.url), 'utf8')
const mainCss = readFileSync( const mainCss = readFileSync(
new URL('./assets/main.css', import.meta.url), new URL('./assets/main.css', import.meta.url),
'utf8', 'utf8',
@@ -22,32 +22,15 @@ describe('browser development preview contract', () => {
it('starts unlocked while preserving an explicit lock screen preview', () => { it('starts unlocked while preserving an explicit lock screen preview', () => {
expect(source).toContain("developmentParameters.has('lockScreenPreview')") expect(source).toContain("developmentParameters.has('lockScreenPreview')")
expect(source).toContain( expect(source).toContain(': !isDevelopment || developmentLockScreenPreview')
'developmentLockScreenPreview ||\n (!isDevelopment && phone.security.enabled)',
)
expect(source).toContain("developmentParameters.has('setupPreview')") expect(source).toContain("developmentParameters.has('setupPreview')")
}) })
it('restores the active route after the lock screen', () => { it('loads authenticated app data without replacing direct app routes', () => {
expect(source).toMatch( expect(source).toContain(
/if \(setupRequired\.value\) \{[\s\S]*?router\.replace\('\/'\)/,
)
expect(source).toMatch(
/else if \(!isLocked\.value\) \{\s*loadUnlockedPhoneData\(\)/,
)
expect(source).not.toContain(
"if (isLocked.value || setupRequired.value) void router.replace('/')", "if (isLocked.value || setupRequired.value) void router.replace('/')",
) )
}) expect(source).toContain('else loadUnlockedPhoneData()')
it('opens Space-triggered live activities on Home or the enabled lock screen', () => {
expect(source).toContain(
'openHomeRequested.value = event.data.openHome === true',
)
expect(source).toContain(
"if (isLocked.value) pendingUnlockRoute.value = '/'",
)
expect(source).toContain("void router.replace('/')")
}) })
it('requires the passcode again after a full device lock', () => { it('requires the passcode again after a full device lock', () => {
@@ -92,10 +75,6 @@ describe('browser development preview contract', () => {
it('uses layout zoom so the fixed-resolution phone stays sharply rasterized', () => { it('uses layout zoom so the fixed-resolution phone stays sharply rasterized', () => {
expect(source).toContain('phone-resolution-canvas--primary') expect(source).toContain('phone-resolution-canvas--primary')
expect(source).toMatch(
/phone-resolution-wrapper--primary[\s\S]*?id="phone-home-drag-portal"[\s\S]*?phone-resolution-canvas--primary/,
)
expect(source.match(/id="phone-home-drag-portal"/g)).toHaveLength(1)
expect(source).toContain("'--phone-rendered-height'") expect(source).toContain("'--phone-rendered-height'")
expect(source).toContain("'--phone-rendered-width'") expect(source).toContain("'--phone-rendered-width'")
expect(mainCss).toMatch( expect(mainCss).toMatch(
@@ -121,9 +100,7 @@ describe('browser development preview contract', () => {
expect(source).toContain("developmentParameters.has('browserPreview')") expect(source).toContain("developmentParameters.has('browserPreview')")
expect(source).toContain('import.meta.env.DEV ||') expect(source).toContain('import.meta.env.DEV ||')
expect(source).toContain("'phone-stage--browser-preview': isBrowserPreview") expect(source).toContain("'phone-stage--browser-preview': isBrowserPreview")
expect(source).toContain( expect(source).toContain('return (availableScale * 0.94) / PHONE_BASE_SCALE')
'return (availableScale * 0.94) / PHONE_BASE_SCALE',
)
expect(mainCss).toMatch( expect(mainCss).toMatch(
/\.phone-stage--browser-preview\s*\{[^}]*place-items:\s*center;[^}]*padding:\s*0;/s, /\.phone-stage--browser-preview\s*\{[^}]*place-items:\s*center;[^}]*padding:\s*0;/s,
) )
Binary file not shown.
Binary file not shown.
+87 -70
View File
@@ -211,11 +211,9 @@
} }
} }
:root { :root {
font-family: var(--sky-font-family); font-family:
font-feature-settings: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue',
'liga' 1, sans-serif;
'calt' 1;
font-optical-sizing: auto;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -236,9 +234,7 @@ body,
user-select: none; user-select: none;
} }
button, button,
input, input {
textarea,
select {
font: inherit; font: inherit;
} }
button { button {
@@ -263,20 +259,6 @@ button {
transform: translateY(calc(100% - 190px)); transform: translateY(calc(100% - 190px));
transform-origin: right bottom; transform-origin: right bottom;
} }
.phone-stage--live-activity .phone-resolution-wrapper--primary .phone-device {
pointer-events: none;
transform: translateY(
calc(100% - var(--phone-live-activity-peek-height, 145px))
);
transform-origin: right bottom;
}
.phone-stage--live-activity
.phone-device
> :not(.phone-screen):not(.phone-device__frame):not(.phone-dynamic-island),
.phone-stage--live-activity .phone-screen > * {
visibility: hidden;
}
.phone-lift-enter-active { .phone-lift-enter-active {
transition: opacity 0.52s linear; transition: opacity 0.52s linear;
} }
@@ -299,18 +281,6 @@ button {
height: var(--phone-rendered-height, 844px); height: var(--phone-rendered-height, 844px);
} }
.phone-home-drag-portal {
position: absolute;
z-index: 70;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.phone-home-drag-portal * {
pointer-events: none !important;
}
.phone-resolution-canvas { .phone-resolution-canvas {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -414,7 +384,7 @@ button {
overflow: hidden; overflow: hidden;
border: 1px solid rgb(255 255 255 / 16%); border: 1px solid rgb(255 255 255 / 16%);
border-radius: 15px; border-radius: 15px;
color: #a9abb2; color: #0a84ff;
background: rgb(47 47 51 / 98%); background: rgb(47 47 51 / 98%);
box-shadow: 0 8px 24px rgb(0 0 0 / 28%); box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
pointer-events: none; pointer-events: none;
@@ -702,9 +672,6 @@ button {
transition: transform 280ms var(--sky-ease-out, ease-out); transition: transform 280ms var(--sky-ease-out, ease-out);
will-change: transform; will-change: transform;
} }
.phone-device--island-expanded .phone-notification {
top: 130px !important;
}
.phone-notification__icon { .phone-notification__icon {
width: 38px; width: 38px;
height: 38px; height: 38px;
@@ -828,6 +795,78 @@ button {
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
} }
.phone-dynamic-island {
position: absolute;
z-index: 98;
top: 12px;
left: 50%;
display: flex;
align-items: center;
gap: 10px;
width: 300px;
min-height: 72px;
padding: 10px 12px 10px 16px;
border: 1px solid rgb(255 255 255 / 10%);
border-radius: 28px;
color: #fff;
background: #050505;
box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
transform: translateX(-50%);
}
.phone-dynamic-island__caller {
min-width: 0;
flex: 1;
}
.phone-dynamic-island__caller span,
.phone-dynamic-island__caller strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phone-dynamic-island__caller span {
color: rgb(255 255 255 / 58%);
font-size: 11px;
line-height: 14px;
}
.phone-dynamic-island__caller strong {
margin-top: 2px;
font-size: 15px;
line-height: 18px;
}
.phone-dynamic-island__actions {
display: flex;
gap: 8px;
}
.phone-dynamic-island__actions .sky-button--icon-only {
width: 44px;
min-width: 44px;
height: 44px;
}
.phone-dynamic-island__actions svg {
width: 19px;
height: 19px;
}
.phone-dynamic-island__answer {
--sky-app-accent: #34c759;
}
.phone-dynamic-island-enter-active,
.phone-dynamic-island-leave-active {
transition:
opacity 180ms ease,
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.phone-dynamic-island-enter-from,
.phone-dynamic-island-leave-to {
opacity: 0;
transform: translateX(-50%) scale(0.86);
}
@media (prefers-reduced-motion: reduce) {
.phone-dynamic-island-enter-active,
.phone-dynamic-island-leave-active {
transition: none;
}
}
.phone-home-indicator { .phone-home-indicator {
position: absolute; position: absolute;
z-index: 90; z-index: 90;
@@ -1302,7 +1341,8 @@ button {
overflow: hidden; overflow: hidden;
background: #000; background: #000;
color: #f5f5f7; color: #f5f5f7;
font-family: var(--sky-font-family); font-family:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
} }
.darkchat-page button, .darkchat-page button,
.darkchat-page input, .darkchat-page input,
@@ -2637,30 +2677,8 @@ button {
.springboard--widget-dragging .springboard-widget-page-scroll { .springboard--widget-dragging .springboard-widget-page-scroll {
overflow: visible; overflow: visible;
} }
.home-drag-layer { .springboard--home-dragging .springboard-page--apps {
position: absolute; overflow: visible;
overflow: hidden;
pointer-events: none;
}
.home-drag-layer * {
pointer-events: none !important;
}
.home-drag-position {
position: absolute;
top: 0;
left: 0;
will-change: transform;
}
.home-drag-ghost {
position: absolute;
top: 0;
left: 0;
margin: 0;
opacity: 1;
transition: none !important;
animation: none !important;
transform-origin: 0 0;
will-change: transform;
} }
.app-grid { .app-grid {
display: grid; display: grid;
@@ -2695,9 +2713,6 @@ button {
transition: transform var(--springboard-page-duration) transition: transform var(--springboard-page-duration)
var(--springboard-page-easing); var(--springboard-page-easing);
} }
.app-icon-item--drag-source {
opacity: 0;
}
.app-icon-remove { .app-icon-remove {
position: absolute; position: absolute;
z-index: 4; z-index: 4;
@@ -2823,6 +2838,7 @@ button {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 11px;
} }
.app-icon--calculator { .app-icon--calculator {
background: linear-gradient(145deg, #76767b, #1b1b1d); background: linear-gradient(145deg, #76767b, #1b1b1d);
@@ -7581,17 +7597,18 @@ button {
min-height: var(--springboard-grid-row); min-height: var(--springboard-grid-row);
} }
.app-icon-button { .app-icon-button {
font-family: var(--sky-font-family); font-family:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
touch-action: none; touch-action: none;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
.app-icon-label { .app-icon-label {
min-height: var(--sky-home-label-height); min-height: 15px;
font-size: var(--sky-home-label-font-size); font-size: 11.5px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.15px; letter-spacing: -0.15px;
line-height: var(--sky-home-label-height); line-height: 15px;
text-align: center; text-align: center;
} }
.springboard-edit-add { .springboard-edit-add {
@@ -14,10 +14,6 @@ const callsServer = readFileSync(
new URL('../../sky_phone/source/server/calls.lua', import.meta.url), new URL('../../sky_phone/source/server/calls.lua', import.meta.url),
'utf8', 'utf8',
).replace(/\r\n/g, '\n') ).replace(/\r\n/g, '\n')
const phoneServer = readFileSync(
new URL('../../sky_phone/source/server/phone.lua', import.meta.url),
'utf8',
).replace(/\r\n/g, '\n')
const companiesStore = readFileSync( const companiesStore = readFileSync(
new URL('./stores/companies.ts', import.meta.url), new URL('./stores/companies.ts', import.meta.url),
'utf8', 'utf8',
@@ -89,35 +85,3 @@ describe('Companies outbound service-line call contract', () => {
expect(startCompanyCall).not.toContain('data.callerNumber') expect(startCompanyCall).not.toContain('data.callerNumber')
}) })
}) })
describe('Companies background call availability contract', () => {
it('keeps call availability enabled after the phone UI closes', () => {
const closeDevice = sourceBlock(
phoneServer,
`Bridge.Callbacks.Register(${quote}sky_phone:device:close${quote}`,
`Bridge.Callbacks.Register(${quote}sky_phone:device:notification-open${quote}`,
)
expect(closeDevice).toContain('sessions[source] = nil')
expect(closeDevice).not.toContain(
'SkyPhoneCompanies.ClearCallAvailability(source)',
)
})
it('routes background calls only to an owned phone with the same registered SIM', () => {
const getCallTargets = sourceBlock(
companiesServer,
'function SkyPhoneCompanies.GetCallTargets(',
'\n\nlocal function profile_row(',
)
expect(getCallTargets).toContain('SkyPhone.LoadDevice(readiness.imei)')
expect(getCallTargets).toContain(
'SkyPhone.FindDeviceSlots(source, readiness.imei)',
)
expect(getCallTargets).toContain('device.sim_id == readiness.sim_id')
expect(getCallTargets).toContain('device.sim_type == "registered"')
expect(getCallTargets).toContain('device.registered_at ~= nil')
expect(getCallTargets).not.toContain('current_device(source, true)')
})
})
+2 -5
View File
@@ -30,13 +30,11 @@ const props = withDefaults(
app: PhoneAppDefinition app: PhoneAppDefinition
compact?: boolean compact?: boolean
editMode?: boolean editMode?: boolean
externalDragVisual?: boolean
showLabel?: boolean showLabel?: boolean
}>(), }>(),
{ {
compact: false, compact: false,
editMode: false, editMode: false,
externalDragVisual: false,
showLabel: true, showLabel: true,
}, },
) )
@@ -65,14 +63,14 @@ let dragStartPage = 0
let dragPageWidth = 0 let dragPageWidth = 0
let dragPageMetrics: SpringboardDragMetrics | null = null let dragPageMetrics: SpringboardDragMetrics | null = null
const dragStyle = computed(() => const dragStyle = computed(() =>
isDragging.value && !props.externalDragVisual isDragging.value
? { ? {
transform: `translate3d(${springboardPageDragCompensation(dragStartPage, phone.currentPage, dragPageWidth)}px, 0, 0)`, transform: `translate3d(${springboardPageDragCompensation(dragStartPage, phone.currentPage, dragPageWidth)}px, 0, 0)`,
} }
: undefined, : undefined,
) )
const dragPointerStyle = computed(() => const dragPointerStyle = computed(() =>
isDragging.value && !props.externalDragVisual isDragging.value
? { ? {
transform: `translate3d(${dragOffset.value.x}px, ${dragOffset.value.y}px, 0)`, transform: `translate3d(${dragOffset.value.x}px, ${dragOffset.value.y}px, 0)`,
} }
@@ -302,7 +300,6 @@ onBeforeUnmount(() => {
class="app-icon-item" class="app-icon-item"
:class="{ :class="{
'app-icon-item--compact': compact, 'app-icon-item--compact': compact,
'app-icon-item--drag-source': isDragging && externalDragVisual,
'app-icon-item--dragging': isDragging, 'app-icon-item--dragging': isDragging,
'app-icon-item--editing': editMode, 'app-icon-item--editing': editMode,
}" }"
+2 -5
View File
@@ -22,13 +22,11 @@ const props = withDefaults(
apps: PhoneAppDefinition[] apps: PhoneAppDefinition[]
defaultName: string defaultName: string
editMode?: boolean editMode?: boolean
externalDragVisual?: boolean
folder: HomeFolder folder: HomeFolder
showLabel?: boolean showLabel?: boolean
}>(), }>(),
{ {
editMode: false, editMode: false,
externalDragVisual: false,
showLabel: true, showLabel: true,
}, },
) )
@@ -57,14 +55,14 @@ let stopPointerSession: (() => void) | null = null
const folderName = computed(() => props.folder.name || props.defaultName) const folderName = computed(() => props.folder.name || props.defaultName)
const dragStyle = computed(() => const dragStyle = computed(() =>
isDragging.value && !props.externalDragVisual isDragging.value
? { ? {
transform: `translate3d(${springboardPageDragCompensation(dragStartPage, phone.currentPage, dragPageWidth)}px, 0, 0)`, transform: `translate3d(${springboardPageDragCompensation(dragStartPage, phone.currentPage, dragPageWidth)}px, 0, 0)`,
} }
: undefined, : undefined,
) )
const dragPointerStyle = computed(() => const dragPointerStyle = computed(() =>
isDragging.value && !props.externalDragVisual isDragging.value
? { ? {
transform: `translate3d(${dragOffset.value.x}px, ${dragOffset.value.y}px, 0)`, transform: `translate3d(${dragOffset.value.x}px, ${dragOffset.value.y}px, 0)`,
} }
@@ -234,7 +232,6 @@ onBeforeUnmount(() => {
<div <div
class="home-folder-item app-icon-item" class="home-folder-item app-icon-item"
:class="{ :class="{
'app-icon-item--drag-source': isDragging && externalDragVisual,
'app-icon-item--dragging': isDragging, 'app-icon-item--dragging': isDragging,
'app-icon-item--editing': editMode, 'app-icon-item--editing': editMode,
'home-folder-item--dragging': isDragging, 'home-folder-item--dragging': isDragging,
@@ -331,7 +331,8 @@ function finishPageSwipe(event: PointerEvent): void {
z-index: 70; z-index: 70;
inset: 0; inset: 0;
color: #fff; color: #fff;
font-family: var(--sky-font-family); font-family:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
} }
.home-folder-backdrop { .home-folder-backdrop {
+2 -5
View File
@@ -3,7 +3,6 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import payphoneFrame from '@/assets/img/payphone/american-payphone-frame.png' import payphoneFrame from '@/assets/img/payphone/american-payphone-frame.png'
import { nuiCall } from '@/utils/nui' import { nuiCall } from '@/utils/nui'
import { registerPhoneMediaElement } from '@/utils/phoneAudio'
import { isTrustedRootMessageSource } from '@/utils/windowMessages' import { isTrustedRootMessageSource } from '@/utils/windowMessages'
type PayphoneState = type PayphoneState =
@@ -71,9 +70,7 @@ const buttonSounds: HTMLAudioElement[] = []
function prepareButtonSounds(): void { function prepareButtonSounds(): void {
if (buttonSounds.length) return if (buttonSounds.length) return
for (let index = 0; index < 4; index += 1) { for (let index = 0; index < 4; index += 1) {
const sound = registerPhoneMediaElement( const sound = new Audio(`${import.meta.env.BASE_URL}sounds/button.mp3`)
new Audio(`${import.meta.env.BASE_URL}sounds/button.mp3`),
)
sound.preload = 'auto' sound.preload = 'auto'
sound.volume = 0.55 sound.volume = 0.55
buttonSounds.push(sound) buttonSounds.push(sound)
@@ -402,7 +399,7 @@ onBeforeUnmount(() => {
rgb(30 38 42 / 35%), rgb(30 38 42 / 35%),
rgb(0 0 0 / 84%) 72% rgb(0 0 0 / 84%) 72%
); );
font-family: var(--sky-font-family); font-family: 'Segoe UI', Arial, sans-serif;
pointer-events: auto; pointer-events: auto;
user-select: none; user-select: none;
} }
@@ -5,15 +5,8 @@ import { describe, expect, it } from 'vitest'
const source = readFileSync( const source = readFileSync(
new URL('./PhoneDynamicIsland.vue', import.meta.url), new URL('./PhoneDynamicIsland.vue', import.meta.url),
'utf8', 'utf8',
).replace(/\r\n/g, '\n')
const appSource = readFileSync(
new URL('../App.vue', import.meta.url),
'utf8',
).replace(/\r\n/g, '\n')
const mainCss = readFileSync(
new URL('../assets/main.css', import.meta.url),
'utf8',
) )
const appSource = readFileSync(new URL('../App.vue', import.meta.url), 'utf8')
const recorderSource = readFileSync( const recorderSource = readFileSync(
new URL('./PhoneMemoRecorder.vue', import.meta.url), new URL('./PhoneMemoRecorder.vue', import.meta.url),
'utf8', 'utf8',
@@ -26,23 +19,16 @@ const clockSource = readFileSync(
new URL('../views/apps/ClockApp.vue', import.meta.url), new URL('../views/apps/ClockApp.vue', import.meta.url),
'utf8', 'utf8',
) )
const serverMemosSource = readFileSync(
new URL('../../../sky_phone/source/server/memos.lua', import.meta.url),
'utf8',
)
describe('Phone Dynamic Island contract', () => { describe('Phone Dynamic Island contract', () => {
it('renders once at phone shell level instead of forcing calls into Phone', () => { it('renders once at phone shell level instead of forcing calls into Phone', () => {
expect(appSource).toContain( expect(appSource).toContain(
"import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'", "import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'",
) )
expect(appSource).toContain('<PhoneDynamicIsland v-if="!setupRequired" />')
expect(appSource).toContain( expect(appSource).toContain(
"'phone-device--island-expanded': dynamicIslandExpanded", 'phone.isOpen || notifications.current || calls.activeCall',
) )
expect(appSource).toMatch(
/class="phone-device__frame"[\s\S]*?<PhoneDynamicIsland[\s\S]*?@expanded-change="dynamicIslandExpanded = \$event"[\s\S]*?@live-activity-change="dynamicIslandActivity = \$event"/,
)
expect(appSource).toContain('dynamicIslandActivity ||')
expect(appSource).not.toContain( expect(appSource).not.toContain(
"window.setTimeout(() => void router.push('/apps/phone'), 0)", "window.setTimeout(() => void router.push('/apps/phone'), 0)",
) )
@@ -59,44 +45,7 @@ describe('Phone Dynamic Island contract', () => {
expect(source).toContain('call.answeredAt ?? call.startedAt') expect(source).toContain('call.answeredAt ?? call.startedAt')
}) })
it('hides an activity in its owning foreground app but restores it after closing', () => {
expect(source).toContain(
'if (!currentActivity || !phone.isOpen) return currentActivity',
)
expect(source).toContain("activeAppId.value === 'phone'")
expect(source).toContain(
"currentActivity === 'recording' && activeAppId.value === 'memos'",
)
expect(source).toContain("activeAppId.value === 'clock'")
expect(source).toContain(
"currentActivity === 'music' && activeAppId.value === 'music'",
)
})
it('shows only a compact frame and island for background live activities', () => {
expect(source).toContain("'live-activity-change': [activity:")
expect(source).toContain("emit('live-activity-change', nextActivity)")
expect(appSource).toContain(
"'phone-stage--live-activity':\n !phone.isOpen && Boolean(dynamicIslandActivity || calls.activeCall)",
)
expect(mainCss).toMatch(
/\.phone-stage--live-activity[\s\S]*?pointer-events:\s*none;[\s\S]*?--phone-live-activity-peek-height/,
)
expect(mainCss).toMatch(
/\.phone-stage--live-activity[\s\S]*?> :not\(\.phone-screen\):not\(\.phone-device__frame\):not\(\.phone-dynamic-island\)[\s\S]*?\.phone-screen > \*[\s\S]*?visibility:\s*hidden;/,
)
expect(appSource).toContain("? '190px'")
expect(appSource).toContain("? '132px'")
expect(appSource).toContain(": '112px'")
expect(source).toContain(
"!phone.isOpen ||\n activity.value === 'incoming-call' ||",
)
})
it('connects music, recorder, timer, and stopwatch controls to their stores', () => { it('connects music, recorder, timer, and stopwatch controls to their stores', () => {
expect(source).toContain(
"if (music.isPlaying && music.currentTrack) return 'music'",
)
expect(source).toContain('@click.stop="music.previous()"') expect(source).toContain('@click.stop="music.previous()"')
expect(source).toContain('@click.stop="music.toggle()"') expect(source).toContain('@click.stop="music.toggle()"')
expect(source).toContain('@click.stop="music.next()"') expect(source).toContain('@click.stop="music.next()"')
@@ -104,31 +53,9 @@ describe('Phone Dynamic Island contract', () => {
expect(source).toContain('clock.pauseTimer(Date.now())') expect(source).toContain('clock.pauseTimer(Date.now())')
expect(source).toContain('clock.pauseStopwatch(Date.now())') expect(source).toContain('clock.pauseStopwatch(Date.now())')
expect(source).toContain('clock.addLap(Date.now())') expect(source).toContain('clock.addLap(Date.now())')
expect(source).not.toContain('phone-dynamic-island__lap')
expect(source).toContain('phone-dynamic-island__stopwatch-meta')
expect(source).toContain('{{ stopwatchLapLabel }}')
expect(source).toContain('{{ stopwatchLapValue }}')
expect(source).toContain('{{ stopwatchTotalDisplay }}')
}) })
it('matches the reference music player and timer control layouts', () => { it('keeps recorder state available across app changes', () => {
expect(source).toContain('phone-dynamic-island__music-equalizer')
expect(source).toContain('phone-dynamic-island__progress-track')
expect(source).toContain('{{ musicElapsedLabel }}')
expect(source).toContain('{{ musicRemainingLabel }}')
expect(source).not.toContain('Airplay')
expect(source).toContain('<X aria-hidden="true" />')
expect(source).toMatch(
/\.phone-dynamic-island--timer\.phone-dynamic-island__copy|\.phone-dynamic-island--timer \.phone-dynamic-island__copy/,
)
expect(source).toContain(
'.phone-dynamic-island--music .phone-dynamic-island__actions--media',
)
expect(source).toContain('justify-content: center')
expect(source).toContain('gap: 34px')
})
it('keeps recorder state available across app changes and phone closes', () => {
expect(recorderSource).toContain( expect(recorderSource).toContain(
"message.type === 'memo:recordStateRequest'", "message.type === 'memo:recordStateRequest'",
) )
@@ -138,15 +65,6 @@ describe('Phone Dynamic Island contract', () => {
expect(memosSource).not.toContain( expect(memosSource).not.toContain(
"if (recordingActive.value) postRecorderCommand('memo:recordCancel')", "if (recordingActive.value) postRecorderCommand('memo:recordCancel')",
) )
expect(recorderSource).toContain('() => phone.device?.imei ?? null')
expect(recorderSource).not.toContain(
'if (!isOpen || deviceSessionChanged) cancelRecording()',
)
expect(recorderSource).toContain('deviceImei: finalDeviceImei')
expect(serverMemosSource).toContain('device_owner(src, data.deviceImei)')
expect(serverMemosSource).toContain(
'SkyPhone.FindDeviceSlots(source, imei)[1]',
)
}) })
it('opens both clock live activities on the correct clock tab', () => { it('opens both clock live activities on the correct clock tab', () => {
@@ -157,68 +75,13 @@ describe('Phone Dynamic Island contract', () => {
) )
}) })
it('opens activities by tapping the island without a separate expand icon', () => {
expect(source).toContain('@click.stop="toggleExpanded"')
expect(source).toContain('@click.stop="openActivity"')
expect(source).not.toContain('Maximize2')
expect(source).not.toContain('phone-dynamic-island__open-icon')
})
it('collapses expanded activities on taps, swipes, and scrolling outside', () => {
expect(source).toContain('ref="islandElement"')
expect(source).toContain(
"document.addEventListener('pointerdown', onOutsidePointerDown, true)",
)
expect(source).toContain(
"document.addEventListener('scroll', collapseExpanded, true)",
)
expect(source).toContain('islandElement.value?.contains(event.target)')
expect(source).toContain('expanded.value = false')
expect(source).toContain(
"document.removeEventListener('pointerdown', onOutsidePointerDown, true)",
)
expect(source).toContain(
"document.removeEventListener('scroll', collapseExpanded, true)",
)
})
it('animates state changes and moves popup notifications below expanded UI', () => { it('animates state changes and moves popup notifications below expanded UI', () => {
expect(source).toContain('<Transition name="phone-dynamic-island">') expect(source).toContain('<Transition name="phone-dynamic-island">')
expect(source).toContain( expect(source).toContain(
'<Transition name="phone-dynamic-island-content" mode="out-in">', '<Transition name="phone-dynamic-island-content" mode="out-in">',
) )
expect(source).toContain(".phone-dynamic-island[data-expanded='true']") expect(source).toContain(".phone-dynamic-island[data-expanded='true']")
expect(source).toContain("emit('expanded-change', false)") expect(source).toContain('~ .phone-notification-provider')
expect(mainCss).toContain(
'.phone-device--island-expanded .phone-notification',
)
expect(source).toContain('@media (prefers-reduced-motion: reduce)') expect(source).toContain('@media (prefers-reduced-motion: reduce)')
}) })
it('renders below the top edge and above the physical camera frame', () => {
expect(source).toMatch(
/\.phone-dynamic-island\s*\{[^}]*z-index:\s*102;[^}]*top:\s*30px;/s,
)
expect(mainCss).not.toMatch(/\.phone-dynamic-island\s*\{/)
})
it('keeps compact and expanded islands close to the physical camera proportions', () => {
expect(source).toMatch(
/\.phone-dynamic-island\s*\{[^}]*width:\s*126px;[^}]*height:\s*38px;/s,
)
expect(source).toMatch(
/\.phone-dynamic-island\[data-expanded='true'\]\s*\{[^}]*width:\s*318px;[^}]*height:\s*74px;/s,
)
expect(source).toMatch(
/\.phone-dynamic-island--incoming-call\[data-expanded='true'\]\s*\{[^}]*height:\s*68px;/s,
)
expect(source).toMatch(
/\.phone-dynamic-island--music\[data-expanded='true'\]\s*\{[^}]*width:\s*316px;[^}]*height:\s*150px;/s,
)
expect(source).toMatch(
/\.phone-dynamic-island--stopwatch\[data-expanded='true'\]\s*\{[^}]*height:\s*70px;/s,
)
expect(source).toContain('box-sizing: border-box')
expect(source).toContain('padding: 8px 16px 8px 10px')
})
}) })
File diff suppressed because it is too large Load Diff
+13 -10
View File
@@ -54,7 +54,6 @@ let metadata: MemoRecordingMetadata = { note: '', pinned: false, title: '' }
let currentState: MemoRecorderStateName = 'idle' let currentState: MemoRecorderStateName = 'idle'
let currentElapsedMs = 0 let currentElapsedMs = 0
let currentCorrelationId = '' let currentCorrelationId = ''
let recordingDeviceImei = ''
let removeRecorderErrorListener: (() => void) | null = null let removeRecorderErrorListener: (() => void) | null = null
function postRecorderState(state: MemoRecorderStateName, error?: string): void { function postRecorderState(state: MemoRecorderStateName, error?: string): void {
@@ -154,7 +153,6 @@ function resetRecordingData(): void {
pausedStartedAt = 0 pausedStartedAt = 0
totalPausedMs = 0 totalPausedMs = 0
currentElapsedMs = 0 currentElapsedMs = 0
recordingDeviceImei = ''
liveLevels = Array(LIVE_LEVEL_SAMPLES).fill(0.08) liveLevels = Array(LIVE_LEVEL_SAMPLES).fill(0.08)
} }
@@ -191,8 +189,7 @@ function failRecording(error: string, generation = recordingGeneration): void {
} }
async function startRecording(data: Record<string, unknown>): Promise<void> { async function startRecording(data: Record<string, unknown>): Promise<void> {
const deviceImei = phone.device?.imei if (!phone.isOpen) {
if (!phone.isOpen || !deviceImei) {
console.error('[Memos] Cannot start a recording while the phone is closed.') console.error('[Memos] Cannot start a recording while the phone is closed.')
return return
} }
@@ -220,7 +217,6 @@ async function startRecording(data: Record<string, unknown>): Promise<void> {
metadata = { note: '', pinned: false, title: '' } metadata = { note: '', pinned: false, title: '' }
updateMetadata(data) updateMetadata(data)
resetRecordingData() resetRecordingData()
recordingDeviceImei = deviceImei
postRecorderState('starting') postRecorderState('starting')
try { try {
const acquiredStream = await navigator.mediaDevices.getUserMedia({ const acquiredStream = await navigator.mediaDevices.getUserMedia({
@@ -344,7 +340,6 @@ async function stopRecording(data: Record<string, unknown>): Promise<void> {
if (generation !== recordingGeneration) return if (generation !== recordingGeneration) return
const waveform = compressedWaveform() const waveform = compressedWaveform()
const finalMetadata = { ...metadata } const finalMetadata = { ...metadata }
const finalDeviceImei = recordingDeviceImei
const exceededSizeLimit = recordingTooLarge const exceededSizeLimit = recordingTooLarge
cleanupRecorder(false) cleanupRecorder(false)
resetRecordingData() resetRecordingData()
@@ -360,7 +355,6 @@ async function stopRecording(data: Record<string, unknown>): Promise<void> {
liveLevels = waveform.slice(-LIVE_LEVEL_SAMPLES) liveLevels = waveform.slice(-LIVE_LEVEL_SAMPLES)
const uploadData = { const uploadData = {
correlationId, correlationId,
deviceImei: finalDeviceImei,
durationMs, durationMs,
mimeType, mimeType,
note: finalMetadata.note, note: finalMetadata.note,
@@ -575,9 +569,18 @@ function onMessage(event: MessageEvent): void {
onMounted(() => window.addEventListener('message', onMessage)) onMounted(() => window.addEventListener('message', onMessage))
watch( watch(
() => phone.device?.imei ?? null, () =>
(imei, previousImei) => { [
if (previousImei && imei !== previousImei) cancelRecording() phone.isOpen,
phone.device?.imei ?? null,
phone.deviceSessionToken,
] as const,
([isOpen, imei, sessionToken], previous) => {
const deviceSessionChanged =
previous !== undefined &&
previous[0] &&
(previous[1] !== imei || previous[2] !== sessionToken)
if (!isOpen || deviceSessionChanged) cancelRecording()
}, },
) )
+1 -1
View File
@@ -210,7 +210,7 @@ onBeforeUnmount(() => {
z-index: 40; z-index: 40;
display: flex; display: flex;
pointer-events: none; pointer-events: none;
font-family: var(--sky-font-family); font-family: Inter, ui-sans-serif, system-ui, sans-serif;
} }
.radio-hud[data-horizontal='left'] { .radio-hud[data-horizontal='left'] {
@@ -677,7 +677,9 @@ onBeforeUnmount(() => {
backdrop-filter: blur(26px) saturate(125%); backdrop-filter: blur(26px) saturate(125%);
-webkit-backdrop-filter: blur(26px) saturate(125%); -webkit-backdrop-filter: blur(26px) saturate(125%);
cursor: pointer; cursor: pointer;
font-family: var(--sky-font-family); font-family:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
'Segoe UI', sans-serif;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
touch-action: none; touch-action: none;
+1 -6
View File
@@ -1,5 +1,3 @@
import { getPhoneOutputVolume } from '@/utils/phoneAudio'
export type MemorySound = 'flip' | 'match' | 'mismatch' | 'win' export type MemorySound = 'flip' | 'match' | 'mismatch' | 'win'
type Tone = { type Tone = {
@@ -48,10 +46,7 @@ export function playMemorySound(sound: MemorySound, enabled: boolean): void {
oscillator.type = tone.type oscillator.type = tone.type
oscillator.frequency.setValueAtTime(tone.frequency, start) oscillator.frequency.setValueAtTime(tone.frequency, start)
gain.gain.setValueAtTime(0.0001, start) gain.gain.setValueAtTime(0.0001, start)
gain.gain.exponentialRampToValueAtTime( gain.gain.exponentialRampToValueAtTime(tone.volume, start + 0.012)
Math.max(0.0001, tone.volume * getPhoneOutputVolume()),
start + 0.012,
)
gain.gain.exponentialRampToValueAtTime(0.0001, end) gain.gain.exponentialRampToValueAtTime(0.0001, end)
oscillator.connect(gain) oscillator.connect(gain)
gain.connect(audioContext.destination) gain.connect(audioContext.destination)
@@ -1,5 +1,3 @@
import { registerPhoneMediaElement } from '@/utils/phoneAudio'
import flagUrl from '@/assets/audio/minesweeper/flag.wav?url' import flagUrl from '@/assets/audio/minesweeper/flag.wav?url'
import clearUrl from '@/assets/audio/minesweeper/clear.wav?url' import clearUrl from '@/assets/audio/minesweeper/clear.wav?url'
import mineUrl from '@/assets/audio/minesweeper/mine.wav?url' import mineUrl from '@/assets/audio/minesweeper/mine.wav?url'
@@ -30,7 +28,7 @@ function getPlayers(sound: MinesweeperSound): HTMLAudioElement[] {
if (existing) return existing if (existing) return existing
const players = Array.from({ length: 3 }, () => { const players = Array.from({ length: 3 }, () => {
const player = registerPhoneMediaElement(new Audio(soundUrls[sound])) const player = new Audio(soundUrls[sound])
player.preload = 'auto' player.preload = 'auto'
player.volume = 0.82 player.volume = 0.82
return player return player
@@ -1,5 +1,3 @@
import { getPhoneOutputVolume } from '@/utils/phoneAudio'
export type NeonDropSound = export type NeonDropSound =
| 'clear' | 'clear'
| 'drop' | 'drop'
@@ -50,10 +48,7 @@ function playSequence(sound: NeonDropSound): void {
oscillator.type = type oscillator.type = type
oscillator.frequency.setValueAtTime(frequency, start + delay) oscillator.frequency.setValueAtTime(frequency, start + delay)
gain.gain.setValueAtTime(0.0001, start + delay) gain.gain.setValueAtTime(0.0001, start + delay)
gain.gain.exponentialRampToValueAtTime( gain.gain.exponentialRampToValueAtTime(0.12, start + delay + 0.008)
Math.max(0.0001, 0.12 * getPhoneOutputVolume()),
start + delay + 0.008,
)
gain.gain.exponentialRampToValueAtTime(0.0001, start + delay + duration) gain.gain.exponentialRampToValueAtTime(0.0001, start + delay + duration)
oscillator.connect(gain) oscillator.connect(gain)
gain.connect(context.destination) gain.connect(context.destination)
@@ -1,5 +1,3 @@
import { registerPhoneMediaElement } from '@/utils/phoneAudio'
import gameOverUrl from '@/assets/audio/number-merge/game-over.wav?url' import gameOverUrl from '@/assets/audio/number-merge/game-over.wav?url'
import mergeUrl from '@/assets/audio/number-merge/merge.wav?url' import mergeUrl from '@/assets/audio/number-merge/merge.wav?url'
import moveUrl from '@/assets/audio/number-merge/move.wav?url' import moveUrl from '@/assets/audio/number-merge/move.wav?url'
@@ -20,7 +18,7 @@ function getPlayers(sound: NumberMergeSound): HTMLAudioElement[] {
if (existing) return existing if (existing) return existing
const players = Array.from({ length: 3 }, () => { const players = Array.from({ length: 3 }, () => {
const player = registerPhoneMediaElement(new Audio(soundUrls[sound])) const player = new Audio(soundUrls[sound])
player.preload = 'auto' player.preload = 'auto'
player.volume = 0.82 player.volume = 0.82
return player return player
@@ -1,5 +1,3 @@
import { registerPhoneMediaElement } from '@/utils/phoneAudio'
import crashUrl from '@/assets/audio/sky-flappy/crash.wav?url' import crashUrl from '@/assets/audio/sky-flappy/crash.wav?url'
import flapUrl from '@/assets/audio/sky-flappy/flap.wav?url' import flapUrl from '@/assets/audio/sky-flappy/flap.wav?url'
import pointUrl from '@/assets/audio/sky-flappy/point.wav?url' import pointUrl from '@/assets/audio/sky-flappy/point.wav?url'
@@ -13,7 +11,7 @@ export function playSkyFlappySound(sound: SkyFlappySound, enabled: boolean): voi
let players = pools.get(sound) let players = pools.get(sound)
if (!players) { if (!players) {
players = Array.from({ length: 3 }, () => { players = Array.from({ length: 3 }, () => {
const player = registerPhoneMediaElement(new Audio(urls[sound])) const player = new Audio(urls[sound])
player.preload = 'auto' player.preload = 'auto'
player.volume = 0.84 player.volume = 0.84
return player return player
@@ -1,5 +1,3 @@
import { registerPhoneMediaElement } from '@/utils/phoneAudio'
import fallUrl from '@/assets/audio/tower-stack/fall.wav?url' import fallUrl from '@/assets/audio/tower-stack/fall.wav?url'
import hitUrl from '@/assets/audio/tower-stack/hit.wav?url' import hitUrl from '@/assets/audio/tower-stack/hit.wav?url'
import perfectUrl from '@/assets/audio/tower-stack/perfect.wav?url' import perfectUrl from '@/assets/audio/tower-stack/perfect.wav?url'
@@ -20,7 +18,7 @@ function getPlayers(sound: TowerStackSound): HTMLAudioElement[] {
if (existing) return existing if (existing) return existing
const players = Array.from({ length: 3 }, () => { const players = Array.from({ length: 3 }, () => {
const player = registerPhoneMediaElement(new Audio(soundUrls[sound])) const player = new Audio(soundUrls[sound])
player.preload = 'auto' player.preload = 'auto'
player.volume = 0.84 player.volume = 0.84
return player return player
-37
View File
@@ -1,37 +0,0 @@
import { readFileSync } from 'node:fs'
import { describe, expect, it } from 'vitest'
const appSource = readFileSync(new URL('./App.vue', import.meta.url), 'utf8')
const audioSource = readFileSync(
new URL('./utils/phoneAudio.ts', import.meta.url),
'utf8',
)
const mainCss = readFileSync(
new URL('./assets/main.css', import.meta.url),
'utf8',
)
const musicSource = readFileSync(
new URL('./stores/music.ts', import.meta.url),
'utf8',
)
describe('phone audio output contract', () => {
it('applies the hardware volume to app media and live YouTube playback', () => {
expect(appSource).toContain('installPhoneAudioController()')
expect(appSource).toContain('setPhoneOutputVolume(volume / 100)')
expect(appSource).toContain(
'if (radio.data.connected) void radio.setVolume(volume)',
)
expect(audioSource).toContain(
"document.addEventListener('play', onMediaPlay, true)",
)
expect(audioSource).toContain('localVolume * outputVolume')
expect(musicSource).toContain('registerPhoneMediaElement(new Audio())')
expect(musicSource).toContain('store.volume * getPhoneOutputVolume() * 100')
})
it('renders the hardware speaker symbol in grey', () => {
expect(mainCss).toMatch(/\.phone-volume-hud\s*\{[\s\S]*?color:\s*#a9abb2;/)
})
})
+1 -17
View File
@@ -3,7 +3,7 @@ import { readFileSync } from 'node:fs'
import { describe, expect, it } from 'vitest' import { describe, expect, it } from 'vitest'
const readResourceFile = (path: string) => const readResourceFile = (path: string) =>
readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8').replace(/\r\n/g, '\n') readFileSync(new URL(`../../sky_phone/${path}`, import.meta.url), 'utf8')
const readFrontendFile = (path: string) => const readFrontendFile = (path: string) =>
readFileSync(new URL(path, import.meta.url), 'utf8') readFileSync(new URL(path, import.meta.url), 'utf8')
@@ -232,22 +232,6 @@ describe('phone inventory contracts', () => {
) )
}) })
it('opens a running live activity with Space without affecting normal gameplay', () => {
const phoneClient = readResourceFile('source/client/main.lua')
expect(phoneClient).toContain(
'RegisterCommand("sky_phone_live_activity_open"',
)
expect(phoneClient).toContain(
'if not live_activity_active or is_open or open_requested then',
)
expect(phoneClient).toContain(
'RegisterKeyMapping(\n "sky_phone_live_activity_open"',
)
expect(phoneClient).toContain('"SPACE"')
expect(phoneClient).toContain('RegisterNUICallback("ui:live-activity"')
})
it('keeps a server-selected unique handset as the preferred hotkey device', () => { it('keeps a server-selected unique handset as the preferred hotkey device', () => {
const phoneServer = readResourceFile('source/server/phone.lua') const phoneServer = readResourceFile('source/server/phone.lua')
-6
View File
@@ -15,12 +15,6 @@ const developmentRoutes: RouteRecordRaw[] = import.meta.env.DEV
name: 'development-sky-ui', name: 'development-sky-ui',
path: '/development/sky-ui/:demo?', path: '/development/sky-ui/:demo?',
}, },
{
component: () =>
import('@/views/development/PhoneDynamicIslandGallery.vue'),
name: 'development-dynamic-islands',
path: '/development/dynamic-islands',
},
] ]
: [] : []
+6 -41
View File
@@ -64,41 +64,6 @@ describe('app store', () => {
expect(apps.isInstalled('snake')).toBe(false) expect(apps.isInstalled('snake')).toBe(false)
expect(apps.isInstalled('health')).toBe(true) expect(apps.isInstalled('health')).toBe(true)
expect(apps.isInstalled('citywarn')).toBe(true) expect(apps.isInstalled('citywarn')).toBe(true)
expect(apps.homeLayout.dock).toEqual([
'phone',
'messages',
'camera',
'clock',
])
for (const dockAppId of ['phone', 'messages', 'camera', 'clock']) {
expect(apps.homeLayout.grid).not.toContain(dockAppId)
}
})
it('migrates current layouts so dock apps are not repeated in the grid', () => {
const apps = useAppStoreStore()
apps.hydrate({
homeLayout: {
dock: ['phone', 'messages', 'camera', 'clock'],
grid: ['phone', 'messages', 'calculator', 'camera', 'clock'],
hidden: [],
pageCount: 1,
version: HOME_LAYOUT_VERSION,
},
})
expect(apps.homeLayout.dock).toEqual([
'phone',
'messages',
'camera',
'clock',
])
for (const dockAppId of ['phone', 'messages', 'camera', 'clock']) {
expect(apps.homeLayout.grid).not.toContain(dockAppId)
}
expect(apps.homeLayout.grid).toContain('calculator')
expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
}) })
it('removes old automatic apps unless the player installed them', () => { it('removes old automatic apps unless the player installed them', () => {
@@ -355,7 +320,7 @@ describe('app store', () => {
const apps = useAppStoreStore() const apps = useAppStoreStore()
apps.hydrate(null) apps.hydrate(null)
mocks.phone.saveDeviceNamespace.mockClear() mocks.phone.saveDeviceNamespace.mockClear()
const sourceIndex = apps.homeLayout.grid.indexOf('calculator') const sourceIndex = apps.homeLayout.grid.indexOf('phone')
expect(sourceIndex).toBeGreaterThanOrEqual(0) expect(sourceIndex).toBeGreaterThanOrEqual(0)
expect( expect(
@@ -364,7 +329,7 @@ describe('app store', () => {
HOME_GRID_PAGE_SIZE, HOME_GRID_PAGE_SIZE,
]), ]),
).toBe(true) ).toBe(true)
expect(apps.homeLayout.grid[HOME_GRID_PAGE_SIZE]).toBe('calculator') expect(apps.homeLayout.grid[HOME_GRID_PAGE_SIZE]).toBe('phone')
expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1) expect(mocks.phone.saveDeviceNamespace).toHaveBeenCalledTimes(1)
}) })
@@ -421,18 +386,18 @@ describe('app store', () => {
mocks.phone.saveDeviceNamespace.mockClear() mocks.phone.saveDeviceNamespace.mockClear()
const notesIndex = apps.homeLayout.grid.indexOf('notes') const notesIndex = apps.homeLayout.grid.indexOf('notes')
const settingsIndex = apps.homeLayout.grid.indexOf('settings') const clockIndex = apps.homeLayout.grid.indexOf('clock')
const folderId = apps.createHomeFolder( const folderId = apps.createHomeFolder(
'grid', 'grid',
notesIndex, notesIndex,
'grid', 'grid',
settingsIndex, clockIndex,
'Utilities', 'Utilities',
) )
expect(folderId).toBeTruthy() expect(folderId).toBeTruthy()
expect(getHomeFolder(apps.homeLayout, folderId!)?.apps).toEqual([ expect(getHomeFolder(apps.homeLayout, folderId!)?.apps).toEqual([
'settings', 'clock',
'notes', 'notes',
]) ])
const mailIndex = apps.homeLayout.grid.indexOf('mail') const mailIndex = apps.homeLayout.grid.indexOf('mail')
@@ -440,7 +405,7 @@ describe('app store', () => {
apps.moveHomeFolderApp(folderId!, 2, 0) apps.moveHomeFolderApp(folderId!, 2, 0)
apps.renameHomeFolder(folderId!, 'Work') apps.renameHomeFolder(folderId!, 'Work')
expect(getHomeFolder(apps.homeLayout, folderId!)).toMatchObject({ expect(getHomeFolder(apps.homeLayout, folderId!)).toMatchObject({
apps: ['mail', 'notes', 'settings'], apps: ['mail', 'notes', 'clock'],
name: 'Work', name: 'Work',
}) })
+7 -10
View File
@@ -25,7 +25,6 @@ import {
parseHomeLayout, parseHomeLayout,
reflowHomeGridForWidgetChange, reflowHomeGridForWidgetChange,
renameHomeFolder, renameHomeFolder,
removeDockGridDuplicates,
removeHomeApp, removeHomeApp,
restoreHomeApp, restoreHomeApp,
type HomeArea, type HomeArea,
@@ -46,7 +45,7 @@ const pendingInstallations = new WeakMap<
>() >()
function getDefaultGridIds(): LaunchablePhoneAppId[] { function getDefaultGridIds(): LaunchablePhoneAppId[] {
return PHONE_APPS.filter((app) => app.dockOrder === null) return [...PHONE_APPS]
.sort((a, b) => a.gridOrder - b.gridOrder) .sort((a, b) => a.gridOrder - b.gridOrder)
.map((app) => app.id) .map((app) => app.id)
} }
@@ -264,16 +263,12 @@ export const useAppStoreStore = defineStore('app-store', {
getDefaultGridIds(), getDefaultGridIds(),
getDefaultDockIds(), getDefaultDockIds(),
) )
const parsedHomeLayout = parseHomeLayout( this.homeLayout = parseHomeLayout(
data?.homeLayout, data?.homeLayout,
defaults, defaults,
installedIds, installedIds,
false, false,
) )
const normalizedHomeLayout = removeDockGridDuplicates(parsedHomeLayout)
const removedDockGridDuplicates =
normalizedHomeLayout !== parsedHomeLayout
this.homeLayout = normalizedHomeLayout
const protectedHiddenAppIds = const protectedHiddenAppIds =
this.homeLayout.hidden.filter(isProtectedHomeApp) this.homeLayout.hidden.filter(isProtectedHomeApp)
for (const appId of protectedHiddenAppIds) { for (const appId of protectedHiddenAppIds) {
@@ -297,7 +292,6 @@ export const useAppStoreStore = defineStore('app-store', {
this.hydrated = true this.hydrated = true
if ( if (
protectedHiddenAppIds.length || protectedHiddenAppIds.length ||
removedDockGridDuplicates ||
removedLegacyDefaults || removedLegacyDefaults ||
layoutVersion === 2 || layoutVersion === 2 ||
layoutVersion === 3 || layoutVersion === 3 ||
@@ -326,8 +320,11 @@ export const useAppStoreStore = defineStore('app-store', {
getDefaultDockIds(), getDefaultDockIds(),
) )
const previous = JSON.stringify(this.homeLayout) const previous = JSON.stringify(this.homeLayout)
this.homeLayout = removeDockGridDuplicates( this.homeLayout = parseHomeLayout(
parseHomeLayout(this.homeLayout, defaults, installedIds, false), this.homeLayout,
defaults,
installedIds,
false,
) )
for (const appId of [...this.homeLayout.hidden]) { for (const appId of [...this.homeLayout.hidden]) {
+4 -16
View File
@@ -7,11 +7,6 @@ import type {
MusicTrack, MusicTrack,
} from '@/types/music' } from '@/types/music'
import { nuiCall } from '@/utils/nui' import { nuiCall } from '@/utils/nui'
import {
getPhoneOutputVolume,
registerPhoneMediaElement,
subscribePhoneOutputVolume,
} from '@/utils/phoneAudio'
export type YouTubePlayer = { export type YouTubePlayer = {
destroy: () => void destroy: () => void
@@ -53,7 +48,7 @@ declare global {
} }
} }
const audio = registerPhoneMediaElement(new Audio()) const audio = new Audio()
audio.preload = 'auto' audio.preload = 'auto'
const YOUTUBE_API_TIMEOUT_MS = 12000 const YOUTUBE_API_TIMEOUT_MS = 12000
let audioBound = false let audioBound = false
@@ -64,11 +59,6 @@ let youtubeApiPromise: Promise<YouTubeApi> | null = null
let youtubePlayer: YouTubePlayer | null = null let youtubePlayer: YouTubePlayer | null = null
let youtubeProgressTimer: number | null = null let youtubeProgressTimer: number | null = null
subscribePhoneOutputVolume((volume) => {
const localVolume = useMusicStore().volume
youtubePlayer?.setVolume(localVolume * volume * 100)
})
export function musicTrackKey( export function musicTrackKey(
track: Pick<MusicTrack, 'id' | 'source'>, track: Pick<MusicTrack, 'id' | 'source'>,
): string { ): string {
@@ -286,7 +276,7 @@ async function loadYouTubeTrack(videoId: string): Promise<void> {
const api = await loadYouTubeApi() const api = await loadYouTubeApi()
const store = useMusicStore() const store = useMusicStore()
if (youtubePlayer) { if (youtubePlayer) {
youtubePlayer.setVolume(store.volume * getPhoneOutputVolume() * 100) youtubePlayer.setVolume(store.volume * 100)
youtubePlayer.loadVideoById(videoId) youtubePlayer.loadVideoById(videoId)
youtubePlayer.playVideo() youtubePlayer.playVideo()
startYoutubeProgress() startYoutubeProgress()
@@ -329,9 +319,7 @@ async function loadYouTubeTrack(videoId: string): Promise<void> {
}, },
onReady: (event) => { onReady: (event) => {
youtubePlayer = event.target youtubePlayer = event.target
event.target.setVolume( event.target.setVolume(useMusicStore().volume * 100)
useMusicStore().volume * getPhoneOutputVolume() * 100,
)
event.target.playVideo() event.target.playVideo()
startYoutubeProgress() startYoutubeProgress()
resolve() resolve()
@@ -566,7 +554,7 @@ export const useMusicStore = defineStore('music', {
setVolume(value: number): void { setVolume(value: number): void {
this.volume = Math.max(0, Math.min(1, value)) this.volume = Math.max(0, Math.min(1, value))
audio.volume = this.volume audio.volume = this.volume
youtubePlayer?.setVolume(this.volume * getPhoneOutputVolume() * 100) youtubePlayer?.setVolume(this.volume * 100)
}, },
stop(): void { stop(): void {
stopActiveMedia() stopActiveMedia()
-7
View File
@@ -1,7 +0,0 @@
export type DynamicIslandActivity =
| 'call'
| 'incoming-call'
| 'music'
| 'recording'
| 'stopwatch'
| 'timer'
@@ -1,59 +0,0 @@
import { existsSync, readdirSync, readFileSync } from 'node:fs'
import { join } from 'node:path'
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
const sourceDirectory = fileURLToPath(new URL('..', import.meta.url))
const tokensSource = readFileSync(new URL('./tokens.css', import.meta.url), 'utf8')
const mainCssSource = readFileSync(
new URL('../assets/main.css', import.meta.url),
'utf8',
)
function styleSources(directory: string): Array<{
file: string
source: string
}> {
return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
const path = join(directory, entry.name)
if (entry.isDirectory()) return styleSources(path)
if (!/\.(?:css|vue)$/.test(entry.name)) return []
return [{ file: path, source: readFileSync(path, 'utf8') }]
})
}
describe('Inter font contract', () => {
it('bundles normal and italic variable fonts for every supported weight', () => {
expect(
existsSync(new URL('../assets/fonts/InterVariable.woff2', import.meta.url)),
).toBe(true)
expect(
existsSync(
new URL('../assets/fonts/InterVariable-Italic.woff2', import.meta.url),
),
).toBe(true)
expect(tokensSource.match(/@font-face/g)).toHaveLength(2)
expect(tokensSource.match(/font-weight:\s*100 900;/g)).toHaveLength(2)
expect(tokensSource).toContain("--sky-font-family: 'Inter', Arial, sans-serif;")
})
it('applies the shared font to the document and native form controls', () => {
expect(mainCssSource).toMatch(
/:root\s*\{[\s\S]*?font-family:\s*var\(--sky-font-family\);/,
)
expect(mainCssSource).toMatch(
/button,\s*input,\s*textarea,\s*select\s*\{\s*font:\s*inherit;/,
)
})
it('does not bypass the shared token with a generic system UI stack', () => {
const genericSystemStack =
/font-family\s*:\s*(?:-apple-system|BlinkMacSystemFont|system-ui|ui-sans-serif|['"]Segoe UI['"])/
const violations = styleSources(sourceDirectory)
.filter(({ source }) => genericSystemStack.test(source))
.map(({ file }) => file.slice(sourceDirectory.length + 1))
expect(violations).toEqual([])
})
})
+3 -2
View File
@@ -525,8 +525,9 @@
height: var(--sky-widget-label-height); height: var(--sky-widget-label-height);
overflow: hidden; overflow: hidden;
color: var(--sky-widget-label-color, #fff); color: var(--sky-widget-label-color, #fff);
font-family: var(--sky-font-family); font-family:
font-size: var(--sky-home-label-font-size); -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
font-size: 11.5px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.15px; letter-spacing: -0.15px;
line-height: var(--sky-widget-label-height); line-height: var(--sky-widget-label-height);
+4 -20
View File
@@ -1,19 +1,3 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../assets/fonts/InterVariable-Italic.woff2') format('woff2');
}
:root { :root {
--sky-device-pixel-ratio: 1; --sky-device-pixel-ratio: 1;
--sky-hairline-scale: 1; --sky-hairline-scale: 1;
@@ -42,7 +26,9 @@
--sky-font-title: 17px; --sky-font-title: 17px;
--sky-font-medium-title: 24px; --sky-font-medium-title: 24px;
--sky-font-large-title: 34px; --sky-font-large-title: 34px;
--sky-font-family: 'Inter', Arial, sans-serif; --sky-font-family:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF UI Text',
'Helvetica Neue', Helvetica, Arial, sans-serif;
--sky-transition-fast: 100ms; --sky-transition-fast: 100ms;
--sky-transition-normal: 200ms; --sky-transition-normal: 200ms;
--sky-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --sky-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
@@ -69,10 +55,8 @@
--sky-shadow-thumb: --sky-shadow-thumb:
0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12); 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);
--sky-glass-highlight-color: rgba(255, 255, 255, 0.5); --sky-glass-highlight-color: rgba(255, 255, 255, 0.5);
--sky-home-label-font-size: 13px;
--sky-home-label-height: 16px;
--sky-widget-label-gap: 5px; --sky-widget-label-gap: 5px;
--sky-widget-label-height: var(--sky-home-label-height); --sky-widget-label-height: 15px;
--sky-widget-radius-small: 23px; --sky-widget-radius-small: 23px;
--sky-widget-radius-medium: 25px; --sky-widget-radius-medium: 25px;
--sky-widget-radius-large: 28px; --sky-widget-radius-large: 28px;
-35
View File
@@ -21,7 +21,6 @@ import {
moveHomeFolderApp, moveHomeFolderApp,
parseHomeLayout, parseHomeLayout,
reflowHomeGridForWidgetChange, reflowHomeGridForWidgetChange,
removeDockGridDuplicates,
removeHomeApp, removeHomeApp,
renameHomeFolder, renameHomeFolder,
restoreHomeApp, restoreHomeApp,
@@ -79,40 +78,6 @@ describe('home layout', () => {
expect(layout.version).toBe(HOME_LAYOUT_VERSION) expect(layout.version).toBe(HOME_LAYOUT_VERSION)
}) })
it('removes dock apps from the grid and normalizes affected folders', () => {
const layout: HomeLayout = {
...defaults,
dock: [
'phone',
{
apps: ['messages', 'mail'],
id: 'folder-abcdef',
name: 'Dock',
type: 'folder',
},
null,
null,
],
grid: [
'phone',
{
apps: ['messages', 'notes'],
id: 'folder-ghijkl',
name: 'Grid',
type: 'folder',
},
'mail',
'clock',
...Array.from({ length: HOME_GRID_PAGE_SIZE - 4 }, () => null),
],
}
const normalized = removeDockGridDuplicates(layout)
expect(normalized.grid.slice(0, 3)).toEqual(['notes', 'clock', null])
expect(normalized.dock).toEqual(layout.dock)
})
it('migrates compact persisted arrays and appends newly installed apps', () => { it('migrates compact persisted arrays and appends newly installed apps', () => {
const layout = parseHomeLayout( const layout = parseHomeLayout(
{ {
-31
View File
@@ -505,37 +505,6 @@ export function createDefaultHomeLayout(
} }
} }
export function removeDockGridDuplicates(layout: HomeLayout): HomeLayout {
const dockAppIds = new Set<LaunchablePhoneAppId>()
for (const item of layout.dock) {
if (typeof item === 'string') dockAppIds.add(item)
if (isHomeFolder(item)) {
for (const appId of item.apps) dockAppIds.add(appId)
}
}
if (!dockAppIds.size) return layout
let changed = false
const grid = layout.grid.map((item): HomeSlot => {
if (typeof item === 'string') {
if (!dockAppIds.has(item)) return item
changed = true
return null
}
if (!isHomeFolder(item)) return null
const apps = item.apps.filter((appId) => !dockAppIds.has(appId))
if (apps.length === item.apps.length) return cloneItem(item)
changed = true
return normalizeFolder({ ...item, apps })
})
if (!changed) return layout
const next = cloneLayout(layout)
next.grid = compactGridPages(grid)
return next
}
export function parseHomeLayout( export function parseHomeLayout(
value: unknown, value: unknown,
defaults: HomeLayout, defaults: HomeLayout,
@@ -1,5 +1,4 @@
import { describe, expect, it } from 'vitest' import { describe, expect, it } from 'vitest'
import { runInNewContext } from 'node:vm'
import type { ExternalPhoneAppDefinition } from '@/types/apps' import type { ExternalPhoneAppDefinition } from '@/types/apps'
import { import {
@@ -140,79 +139,6 @@ describe('LB Phone app bridge', () => {
expect(() => new Function(runtime)).not.toThrow() expect(() => new Function(runtime)).not.toThrow()
}) })
it('applies the LB iframe layout contract before revealing vendor apps', () => {
const document = createLbPhoneFrameDocument(
'<!doctype html><html><head></head><body style="visibility:hidden"></body></html>',
{
appName: 'radio-app',
localStorage: {},
resourceName: 'lb-radioapp',
settings: createLbPhoneHostSettings({
deviceName: 'Main phone',
isDarkMode: true,
language: 'en',
preferences: DEFAULT_PHONE_PREFERENCES,
securityEnabled: false,
}),
ui: 'https://cfx-nui-lb-radioapp/ui/dist/index.html',
},
)
const runtime = /<script>([\s\S]*?)<\/script>/i.exec(document)?.[1]
expect(runtime).toBeTruthy()
const messageListeners: Array<(event: { data: unknown }) => void> = []
const readyListeners: Array<() => void> = []
const documentElement = { dataset: {}, style: {} }
const body = {
dataset: {},
style: { visibility: 'hidden' },
}
const sandbox = {
addEventListener(
eventName: string,
listener: (event: { data: unknown }) => void,
) {
if (eventName === 'message') messageListeners.push(listener)
},
componentsLoaded: undefined as boolean | undefined,
console,
document: {
addEventListener(eventName: string, listener: () => void) {
if (eventName === 'DOMContentLoaded') readyListeners.push(listener)
},
body,
documentElement,
},
parent: { postMessage() {} },
}
runInNewContext(runtime ?? '', sandbox)
expect(body.style.visibility).toBe('hidden')
expect(readyListeners).toHaveLength(1)
readyListeners[0]?.()
expect(documentElement.style).toMatchObject({
height: '100%',
margin: '0',
padding: '0',
width: '100%',
})
expect(body.dataset).toMatchObject({ device: 'phone', theme: 'dark' })
expect(body.style).toMatchObject({
height: '100%',
margin: '0',
padding: '0',
visibility: 'visible',
width: '100%',
})
body.style.visibility = 'hidden'
expect(messageListeners).toHaveLength(1)
messageListeners[0]?.({ data: 'componentsLoaded' })
expect(body.style.visibility).toBe('visible')
expect(sandbox.componentsLoaded).toBe(true)
})
it('persists isolated LB localStorage snapshots without app changes', () => { it('persists isolated LB localStorage snapshots without app changes', () => {
const values = new Map<string, string>() const values = new Map<string, string>()
const storage = { const storage = {
+1 -28
View File
@@ -130,25 +130,6 @@ function applySettings(nextSettings) {
if (document.body) document.body.dataset.theme = theme; if (document.body) document.body.dataset.theme = theme;
} }
function prepareDocument() {
Object.assign(document.documentElement.style, {
height: '100%',
margin: '0',
padding: '0',
width: '100%'
});
if (!document.body) return;
document.body.dataset.device = 'phone';
Object.assign(document.body.style, {
height: '100%',
margin: '0',
padding: '0',
visibility: 'visible',
width: '100%'
});
}
globalThis.resourceName = config.resourceName; globalThis.resourceName = config.resourceName;
globalThis.appName = config.appName; globalThis.appName = config.appName;
globalThis.components = globalThis.components ?? {}; globalThis.components = globalThis.components ?? {};
@@ -208,11 +189,6 @@ globalThis.getSettings = async () => globalThis.settings;
globalThis.addEventListener('message', (event) => { globalThis.addEventListener('message', (event) => {
const message = event.data; const message = event.data;
if (message === 'componentsLoaded') {
globalThis.componentsLoaded = true;
prepareDocument();
return;
}
if (!message || typeof message !== 'object') return; if (!message || typeof message !== 'object') return;
if (message.type === 'sky-phone:lb-settings') { if (message.type === 'sky-phone:lb-settings') {
@@ -234,10 +210,7 @@ globalThis.addEventListener('message', (event) => {
}); });
applySettings(config.settings); applySettings(config.settings);
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => applySettings(globalThis.settings), { once: true });
prepareDocument();
applySettings(globalThis.settings);
}, { once: true });
` `
function escapeAttribute(value: string): string { function escapeAttribute(value: string): string {
-96
View File
@@ -1,96 +0,0 @@
type PhoneAudioVolumeListener = (volume: number) => void
const mediaElements = new Map<HTMLMediaElement, boolean>()
const mediaLocalVolumes = new WeakMap<HTMLMediaElement, number>()
const volumeListeners = new Set<PhoneAudioVolumeListener>()
let documentListenerReferences = 0
let outputVolume = 1
function clampVolume(volume: number): number {
return Math.max(0, Math.min(1, Number.isFinite(volume) ? volume : 0))
}
function applyMediaVolume(element: HTMLMediaElement): void {
const localVolume = mediaLocalVolumes.get(element) ?? element.volume
const nextVolume = clampVolume(localVolume * outputVolume)
if (Math.abs(element.volume - nextVolume) < 0.001) return
element.volume = nextVolume
}
function onMediaVolumeChange(event: Event): void {
const element = event.currentTarget as HTMLMediaElement
const currentLocalVolume = mediaLocalVolumes.get(element) ?? element.volume
const expectedVolume = clampVolume(currentLocalVolume * outputVolume)
if (Math.abs(element.volume - expectedVolume) < 0.001) return
mediaLocalVolumes.set(element, clampVolume(element.volume))
applyMediaVolume(element)
}
function onMediaPlay(event: Event): void {
if (event.target instanceof HTMLMediaElement) {
trackPhoneMediaElement(event.target, false)
}
}
function trackPhoneMediaElement<T extends HTMLMediaElement>(
element: T,
persistent: boolean,
): T {
if (mediaElements.has(element)) {
if (persistent) mediaElements.set(element, true)
return element
}
mediaElements.set(element, persistent)
mediaLocalVolumes.set(element, clampVolume(element.volume))
element.addEventListener('volumechange', onMediaVolumeChange)
applyMediaVolume(element)
return element
}
export function getPhoneOutputVolume(): number {
return outputVolume
}
export function installPhoneAudioController(): () => void {
documentListenerReferences += 1
if (documentListenerReferences === 1) {
document.addEventListener('play', onMediaPlay, true)
document
.querySelectorAll<HTMLMediaElement>('audio, video')
.forEach((element) => trackPhoneMediaElement(element, false))
}
return () => {
documentListenerReferences = Math.max(0, documentListenerReferences - 1)
if (documentListenerReferences === 0) {
document.removeEventListener('play', onMediaPlay, true)
}
}
}
export function registerPhoneMediaElement<T extends HTMLMediaElement>(
element: T,
): T {
return trackPhoneMediaElement(element, true)
}
export function setPhoneOutputVolume(volume: number): void {
outputVolume = clampVolume(volume)
for (const [element, persistent] of mediaElements) {
if (!persistent && !element.isConnected && element.paused) {
element.removeEventListener('volumechange', onMediaVolumeChange)
mediaElements.delete(element)
continue
}
applyMediaVolume(element)
}
for (const listener of volumeListeners) listener(outputVolume)
}
export function subscribePhoneOutputVolume(
listener: PhoneAudioVolumeListener,
): () => void {
volumeListeners.add(listener)
return () => volumeListeners.delete(listener)
}
@@ -1,174 +0,0 @@
import { describe, expect, it } from 'vitest'
import {
normalizePhoneViewportRect,
readPhoneViewportGeometry,
type PhoneViewportRect,
} from '@/utils/phoneViewportGeometry'
type RectMeasurement = Pick<
DOMRectReadOnly,
'height' | 'left' | 'top' | 'width'
>
function measuredRect(
left: number,
top: number,
width: number,
height: number,
): RectMeasurement {
return { height, left, top, width }
}
function expectRectClose(
actual: PhoneViewportRect,
expected: PhoneViewportRect,
): void {
for (const key of [
'bottom',
'height',
'left',
'right',
'top',
'width',
] as const) {
expect(actual[key]).toBeCloseTo(expected[key], 6)
}
}
function createGeometryFixture(options: {
canvasOffsetHeight: number
canvasOffsetWidth: number
rawCanvasRect: RectMeasurement
wrapperRect: RectMeasurement
}): { anchor: Element; element: (rect: RectMeasurement) => Element } {
const wrapper = {
getBoundingClientRect: () => options.wrapperRect,
} as unknown as HTMLElement
const canvas = {
closest: (selector: string) =>
selector === '.phone-resolution-wrapper' ? wrapper : null,
getBoundingClientRect: () => options.rawCanvasRect,
offsetHeight: options.canvasOffsetHeight,
offsetWidth: options.canvasOffsetWidth,
} as unknown as HTMLElement
return {
anchor: {
closest: (selector: string) =>
selector === '.phone-resolution-canvas' ? canvas : null,
} as unknown as Element,
element: (rect) =>
({ getBoundingClientRect: () => rect }) as unknown as Element,
}
}
describe('phone viewport geometry', () => {
it('leaves modern Chrome measurements unchanged when the canvas BCR is already rendered', () => {
const wrapper = measuredRect(1573.09, 126.25, 322.92, 698.832)
const layer = measuredRect(1589.783336, 177.75, 289.533328, 603.2)
expectRectClose(normalizePhoneViewportRect(layer, wrapper, wrapper), {
bottom: layer.top + layer.height,
height: layer.height,
left: layer.left,
right: layer.left + layer.width,
top: layer.top,
width: layer.width,
})
})
it('calibrates live CEF 103 BCRs back inside the visible wrapper', () => {
const wrapper = measuredRect(1573.09, 126.25, 322.92, 698.832)
const rawCanvas = measuredRect(1899.87, 152.5, 389.98, 844)
const rawLayer = measuredRect(1920.03, 214.25, 349.66, 728.5)
const corrected = normalizePhoneViewportRect(rawLayer, rawCanvas, wrapper)
expect(corrected.left).toBeCloseTo(1589.7833360685163, 6)
expect(corrected.width).toBeCloseTo(289.5333278629674, 6)
expect(corrected.right).toBeCloseTo(1879.3166639314836, 6)
expect(corrected.left).toBeGreaterThan(wrapper.left)
expect(corrected.right).toBeLessThan(wrapper.left + wrapper.width)
})
it.each([
['80%', 0.6624],
['100%', 0.828],
['120%', 0.9936],
])(
'normalizes fractional positions, sizes, and deltas at %s scaling',
(_label, zoom) => {
const rawCanvas = measuredRect(1900.125, 212.75, 390, 844)
const wrapper = measuredRect(1530.5, 250.25, 390 * zoom, 844 * zoom)
const rawStart = measuredRect(
rawCanvas.left + 20.125,
rawCanvas.top + 50.375,
349.75,
73.125,
)
const rawEnd = measuredRect(
rawStart.left + 73.25,
rawStart.top - 41.75,
rawStart.width,
rawStart.height,
)
const start = normalizePhoneViewportRect(rawStart, rawCanvas, wrapper)
const end = normalizePhoneViewportRect(rawEnd, rawCanvas, wrapper)
expect(start.left).toBeCloseTo(wrapper.left + 20.125 * zoom, 6)
expect(start.top).toBeCloseTo(wrapper.top + 50.375 * zoom, 6)
expect(start.width).toBeCloseTo(349.75 * zoom, 6)
expect(start.height).toBeCloseTo(73.125 * zoom, 6)
expect(end.left - start.left).toBeCloseTo(73.25 * zoom, 6)
expect(end.top - start.top).toBeCloseTo(-41.75 * zoom, 6)
},
)
it('reads visual scale and normalized element rects from a canvas anchor', () => {
const fixture = createGeometryFixture({
canvasOffsetHeight: 844,
canvasOffsetWidth: 390,
rawCanvasRect: measuredRect(1899.87, 152.5, 389.98, 844),
wrapperRect: measuredRect(1573.09, 126.25, 322.92, 698.832),
})
const geometry = readPhoneViewportGeometry(fixture.anchor)
const layer = fixture.element(measuredRect(1920.03, 214.25, 349.66, 728.5))
expect(geometry).not.toBeNull()
expect(geometry?.scaleX).toBeCloseTo(0.828, 6)
expect(geometry?.scaleY).toBeCloseTo(0.828, 6)
expect(geometry?.rect(layer).left).toBeCloseTo(1589.7833360685163, 6)
})
it('uses finite identity fallbacks for zero geometry and missing anchors', () => {
const rawCanvas = measuredRect(100, 50, 0, 0)
const corrected = normalizePhoneViewportRect(
measuredRect(112.5, 58.25, 40, 20),
rawCanvas,
measuredRect(500, 300, 0, 0),
)
const fixture = createGeometryFixture({
canvasOffsetHeight: 0,
canvasOffsetWidth: 0,
rawCanvasRect: rawCanvas,
wrapperRect: measuredRect(500, 300, 0, 0),
})
const geometry = readPhoneViewportGeometry(fixture.anchor)
expect(corrected).toEqual({
bottom: 328.25,
height: 20,
left: 512.5,
right: 552.5,
top: 308.25,
width: 40,
})
expect(Object.values(corrected).every(Number.isFinite)).toBe(true)
expect(geometry?.scaleX).toBe(1)
expect(geometry?.scaleY).toBe(1)
expect(readPhoneViewportGeometry(null)).toBeNull()
expect(
readPhoneViewportGeometry({ closest: () => null } as unknown as Element),
).toBeNull()
})
})
@@ -1,73 +0,0 @@
export type PhoneViewportRect = {
bottom: number
height: number
left: number
right: number
top: number
width: number
}
type RectMeasurement = Pick<
DOMRectReadOnly,
'height' | 'left' | 'top' | 'width'
>
export type PhoneViewportGeometry = {
readonly scaleX: number
readonly scaleY: number
rect(element: Element): PhoneViewportRect
}
function positiveRatio(numerator: number, denominator: number): number {
return Number.isFinite(numerator) &&
Number.isFinite(denominator) &&
numerator > 0 &&
denominator > 0
? numerator / denominator
: 1
}
export function normalizePhoneViewportRect(
rawRect: RectMeasurement,
rawCanvasRect: RectMeasurement,
wrapperRect: RectMeasurement,
): PhoneViewportRect {
const factorX = positiveRatio(wrapperRect.width, rawCanvasRect.width)
const factorY = positiveRatio(wrapperRect.height, rawCanvasRect.height)
const left = wrapperRect.left + (rawRect.left - rawCanvasRect.left) * factorX
const top = wrapperRect.top + (rawRect.top - rawCanvasRect.top) * factorY
const width = rawRect.width * factorX
const height = rawRect.height * factorY
return {
bottom: top + height,
height,
left,
right: left + width,
top,
width,
}
}
export function readPhoneViewportGeometry(
anchor: Element | null,
): PhoneViewportGeometry | null {
const canvas = anchor?.closest<HTMLElement>('.phone-resolution-canvas')
const wrapper = canvas?.closest<HTMLElement>('.phone-resolution-wrapper')
if (!canvas || !wrapper) return null
const rawCanvasRect = canvas.getBoundingClientRect()
const wrapperRect = wrapper.getBoundingClientRect()
return {
scaleX: positiveRatio(wrapperRect.width, canvas.offsetWidth),
scaleY: positiveRatio(wrapperRect.height, canvas.offsetHeight),
rect(element: Element): PhoneViewportRect {
return normalizePhoneViewportRect(
element.getBoundingClientRect(),
rawCanvasRect,
wrapperRect,
)
},
}
}
@@ -140,56 +140,4 @@ describe('springboard widget drag', () => {
expect(delta.x).toBeCloseTo(100) expect(delta.x).toBeCloseTo(100)
expect(delta.y).toBeCloseTo(200) expect(delta.y).toBeCloseTo(200)
}) })
it.each([
['80% preview', 0.6624],
['80% production clamp', 2 / 3],
['100%', 0.828],
['120%', 0.9936],
])('keeps the rendered drag delta 1:1 at %s zoom', (_label, zoom) => {
const layoutWidth = 350
const layoutHeight = 808
const viewportLeft = 128.25
const viewportTop = 64.5
const viewportWidth = layoutWidth * zoom
const viewportHeight = layoutHeight * zoom
const pointerStart = {
x: viewportLeft + 48.5 * zoom,
y: viewportTop + 132.25 * zoom,
}
const viewportDelta = { x: 73.25, y: -41.75 }
const start = springboardViewportToLocal(
pointerStart.x,
pointerStart.y,
viewportLeft,
viewportTop,
viewportWidth,
viewportHeight,
layoutWidth,
layoutHeight,
)
const end = springboardViewportToLocal(
pointerStart.x + viewportDelta.x,
pointerStart.y + viewportDelta.y,
viewportLeft,
viewportTop,
viewportWidth,
viewportHeight,
layoutWidth,
layoutHeight,
)
const localDelta = springboardViewportDeltaToLocal(
viewportDelta.x,
viewportDelta.y,
viewportWidth,
viewportHeight,
layoutWidth,
layoutHeight,
)
expect((end.x - start.x) * zoom).toBeCloseTo(viewportDelta.x, 6)
expect((end.y - start.y) * zoom).toBeCloseTo(viewportDelta.y, 6)
expect(localDelta.x * zoom).toBeCloseTo(viewportDelta.x, 6)
expect(localDelta.y * zoom).toBeCloseTo(viewportDelta.y, 6)
})
}) })
+1 -5
View File
@@ -1,5 +1,3 @@
import { readPhoneViewportGeometry } from '@/utils/phoneViewportGeometry'
export type PageTurnDirection = -1 | 0 | 1 export type PageTurnDirection = -1 | 0 | 1
export type SpringboardEdgeTurn = { export type SpringboardEdgeTurn = {
@@ -41,9 +39,7 @@ export function readSpringboardDragMetrics(
'.springboard-page, .home-folder-panel', '.springboard-page, .home-folder-panel',
) )
if (!surface) return null if (!surface) return null
const bounds = const bounds = surface.getBoundingClientRect()
readPhoneViewportGeometry(surface)?.rect(surface) ??
surface.getBoundingClientRect()
return { return {
layoutHeight: surface.offsetHeight, layoutHeight: surface.offsetHeight,
layoutWidth: surface.offsetWidth, layoutWidth: surface.offsetWidth,
+1 -2
View File
@@ -32,7 +32,7 @@ describe('phone tones', () => {
}> = [] }> = []
vi.stubGlobal( vi.stubGlobal(
'Audio', 'Audio',
class extends EventTarget { class {
currentTime = 7 currentTime = 7
loop = false loop = false
pause = pause pause = pause
@@ -42,7 +42,6 @@ describe('phone tones', () => {
volume = 0 volume = 0
constructor(src: string) { constructor(src: string) {
super()
this.src = src this.src = src
players.push(this) players.push(this)
} }
+2 -3
View File
@@ -1,4 +1,3 @@
import { registerPhoneMediaElement } from '@/utils/phoneAudio'
import type { AlarmSoundId } from '@/utils/alarms' import type { AlarmSoundId } from '@/utils/alarms'
import type { NotificationSoundId } from '@/utils/preferences' import type { NotificationSoundId } from '@/utils/preferences'
@@ -496,8 +495,8 @@ export function playPhoneVibration(
kind: PhoneVibrationKind, kind: PhoneVibrationKind,
loop: boolean, loop: boolean,
): () => void { ): () => void {
const player = registerPhoneMediaElement( const player = new Audio(
new Audio(`${import.meta.env.BASE_URL}${VIBRATION_SOUND_PATHS[kind]}`), `${import.meta.env.BASE_URL}${VIBRATION_SOUND_PATHS[kind]}`,
) )
let stopped = false let stopped = false
player.loop = loop player.loop = loop
@@ -19,31 +19,11 @@ const mainCss = readFileSync(
new URL('../assets/main.css', import.meta.url), new URL('../assets/main.css', import.meta.url),
'utf8', 'utf8',
) )
const tokensCss = readFileSync(
new URL('../ui/tokens.css', import.meta.url),
'utf8',
)
const foundationCss = readFileSync(
new URL('../ui/foundation.css', import.meta.url),
'utf8',
)
const builtInWallpaperCss = mainCss.slice( const builtInWallpaperCss = mainCss.slice(
mainCss.indexOf('.wallpaper--midnight'), mainCss.indexOf('.wallpaper--midnight'),
mainCss.indexOf('.wallpaper--custom'), mainCss.indexOf('.wallpaper--custom'),
) )
describe('Springboard page swipe contract', () => { describe('Springboard page swipe contract', () => {
it('keeps app and widget labels on the larger shared home typography', () => {
expect(tokensCss).toContain('--sky-home-label-font-size: 13px;')
expect(tokensCss).toContain('--sky-home-label-height: 16px;')
expect(mainCss).toMatch(
/\.app-icon-label\s*\{[\s\S]*?font-size:\s*var\(--sky-home-label-font-size\);/,
)
expect(foundationCss).toMatch(
/\.sky-widget-frame__label\s*\{[\s\S]*?font-size:\s*var\(--sky-home-label-font-size\);/,
)
})
it('keeps the built-in wallpapers visually restrained', () => { it('keeps the built-in wallpapers visually restrained', () => {
expect(builtInWallpaperCss).not.toMatch(/(?:conic|repeating-\w+)-gradient/) expect(builtInWallpaperCss).not.toMatch(/(?:conic|repeating-\w+)-gradient/)
expect(builtInWallpaperCss.match(/radial-gradient/g)).toHaveLength(12) expect(builtInWallpaperCss.match(/radial-gradient/g)).toHaveLength(12)
@@ -114,99 +94,36 @@ describe('Springboard page swipe contract', () => {
expect(folderIconSource).toContain(':style="dragPointerStyle"') expect(folderIconSource).toContain(':style="dragPointerStyle"')
}) })
it('renders the home drag visual through the unzoomed phone portal', () => { it('uses the same scale-aware in-phone drag path as widgets', () => {
expect(viewSource).toContain('source.cloneNode(true)') expect(viewSource).not.toContain('source.cloneNode(true)')
expect(viewSource).not.toContain('<Teleport to="body">')
expect(viewSource).not.toContain(':external-drag-visual')
expect(viewSource).toContain( expect(viewSource).toContain(
'<Teleport defer to="#phone-home-drag-portal">', "'springboard--home-dragging': draggingHomeApp !== null",
) )
expect(viewSource).toContain( expect(viewSource).toContain('draggedElement?.getBoundingClientRect()')
'<div ref="homeDragLayer" class="home-drag-layer" aria-hidden="true"></div>', expect(appIconSource).not.toContain('externalDragVisual')
) expect(folderIconSource).not.toContain('externalDragVisual')
expect(viewSource).toContain('readPhoneViewportGeometry') expect(mainCss).not.toContain('.home-drag-layer')
expect(viewSource).toMatch(/const sourceBounds = \w+\.rect\(source\)/) expect(mainCss).not.toContain('.home-drag-ghost')
expect(viewSource).toMatch(/const clipBounds = \w+\.rect\(\w+\)/) expect(mainCss).not.toContain('.app-icon-item--drag-source')
expect(viewSource).not.toContain('homeDragLocalPoint')
expect(viewSource).not.toContain('springboardViewportToLocal')
expect(viewSource).toContain("position.className = 'home-drag-position'")
expect(viewSource).toMatch(
/homeDragGrip = \{\s*x: event\.clientX - sourceBounds\.left,\s*y: event\.clientY - sourceBounds\.top,/,
)
expect(viewSource).toMatch(
/ghost\.style\.transform = `scale\(\$\{\w+\.scaleX\}, \$\{\w+\.scaleY\}\)`/,
)
expect(
viewSource.match(/:external-drag-visual="homeDragVisualActive"/g),
).toHaveLength(4)
expect(viewSource).toContain('updateHomeDragGhost(event)')
expect(viewSource).toContain('const dropGhost = homeDragGhost')
expect(viewSource).toContain('const dropOrigin = homeDragPreviewBounds')
expect(viewSource).not.toContain('dropGhost?.getBoundingClientRect()')
expect(viewSource).toContain('clearHomeDragGhost(dropGhost)')
expect(viewSource).not.toContain('draggedElement?.getBoundingClientRect()')
expect(viewSource).not.toContain('springboard--home-dragging')
expect(appIconSource).toContain('externalDragVisual?: boolean')
expect(folderIconSource).toContain('externalDragVisual?: boolean')
expect(appIconSource).toContain('app-icon-item--drag-source')
expect(folderIconSource).toContain('app-icon-item--drag-source')
expect(mainCss).toMatch( expect(mainCss).toMatch(
/\.phone-home-drag-portal\s*\{[^}]*pointer-events:\s*none;/s, /\.springboard--home-dragging \.springboard-page--apps\s*\{[^}]*overflow:\s*visible;/s,
) )
expect(mainCss).toContain('.home-drag-position')
expect(mainCss).toContain('.home-drag-ghost')
expect(mainCss).toContain('.app-icon-item--drag-source')
expect(mainCss).toMatch(/\.springboard\s*\{[\s\S]*?overflow:\s*hidden;/) expect(mainCss).toMatch(/\.springboard\s*\{[\s\S]*?overflow:\s*hidden;/)
expect(mainCss).toMatch( expect(mainCss).toMatch(
/\.springboard-page--apps\s*\{[^}]*overflow:\s*hidden;/s, /\.springboard-page--apps\s*\{[^}]*overflow:\s*hidden;/s,
) )
}) })
it('cleans up the external drag visual on every terminal path', () => {
expect(
viewSource.match(
/@dragstart="startHomeDrag\('(grid|dock)', [^,]+, \$event\)"/g,
),
).toHaveLength(4)
expect(viewSource.match(/@dragcancel="stopHomeDrag"/g)).toHaveLength(4)
expect(viewSource).toContain(
'if (expectedGhost && homeDragGhost !== expectedGhost) return',
)
expect(viewSource).toMatch(
/if \(!dragged\) \{\s*clearHomeDragGhost\(\)\s*return/,
)
expect(viewSource).toMatch(
/animateHomeItemDrop\(\s*draggedItem,\s*dropArea,\s*dropIndex,\s*dropOrigin,?\s*\)\.finally\(/,
)
expect(viewSource).toMatch(
/function stopHomeDrag[\s\S]*?clearHomeDragGhost\(\)/,
)
expect(viewSource).toMatch(
/if \(folderId\) \{[\s\S]*?clearHomeDragGhost\(\)/,
)
expect(viewSource).toMatch(
/onBeforeUnmount\(\(\) => \{[\s\S]*?clearHomeDragGhost\(\)/,
)
})
it('targets the active visual page and lets grid or dock drags turn pages', () => { it('targets the active visual page and lets grid or dock drags turn pages', () => {
expect(viewSource).toContain(':data-home-page="page.page"') expect(viewSource).toContain(':data-home-page="page.page"')
expect(viewSource).toContain(':data-home-target-offset="cell.targetOffset"') expect(viewSource).toContain(':data-home-target-offset="cell.targetOffset"')
expect(viewSource).toContain('nearestGridDropTarget') expect(viewSource).toContain('nearestGridDropTarget')
expect(viewSource).toContain('moveHomeAppToGridPage') expect(viewSource).toContain('moveHomeAppToGridPage')
expect(viewSource).not.toContain("draggingHomeApp.value?.area === 'grid'") expect(viewSource).not.toContain("draggingHomeApp.value?.area === 'grid'")
expect(viewSource).toContain('event.clientX < springboardBounds.left') expect(viewSource).toContain('event.clientX < pageBounds.left')
expect(viewSource).toContain('event.clientY > springboardBounds.bottom') expect(viewSource).toContain('event.clientY > pageBounds.bottom')
expect(viewSource).toContain('function homeDragViewportRect(')
expect(viewSource).toContain('if (geometry) return geometry.rect(element)')
expect(viewSource).toContain('homeDragViewportRect(pageElement, geometry)')
expect(viewSource).toContain('homeDragViewportRect(springboard, geometry)')
expect(viewSource).toContain('homeDragViewportRect(slot, geometry)')
expect(viewSource).toContain('homeDragViewportRect(dock, geometry)')
expect(viewSource).toMatch(
/homeDragViewportRect\(\s*appElement,\s*readPhoneViewportGeometry\(appElement\),?\s*\)/,
)
expect(viewSource).toContain(
'springboardBounds.left + (bounds.left - pageBounds.left)',
)
expect(viewSource).toContain('nearestSpringboardRectIndex') expect(viewSource).toContain('nearestSpringboardRectIndex')
expect(viewSource).toContain("queueEdgePageTurn(lastHomePointer, 'app')") expect(viewSource).toContain("queueEdgePageTurn(lastHomePointer, 'app')")
expect(viewSource).toContain("edgePageLocked = dragType === 'widget'") expect(viewSource).toContain("edgePageLocked = dragType === 'widget'")
+35 -273
View File
@@ -41,11 +41,6 @@ import {
type HomeItem, type HomeItem,
} from '@/utils/homeLayout' } from '@/utils/homeLayout'
import type { ReorderDirection } from '@/utils/keyboard' import type { ReorderDirection } from '@/utils/keyboard'
import {
readPhoneViewportGeometry,
type PhoneViewportGeometry,
type PhoneViewportRect,
} from '@/utils/phoneViewportGeometry'
import { layoutSpringboardHomePages } from '@/utils/springboardLayout' import { layoutSpringboardHomePages } from '@/utils/springboardLayout'
import { import {
maximumRenderedWidgetPage, maximumRenderedWidgetPage,
@@ -111,8 +106,6 @@ const draggingHomeApp = ref<{
area: HomeArea area: HomeArea
index: number index: number
} | null>(null) } | null>(null)
const homeDragLayer = ref<HTMLElement | null>(null)
const homeDragVisualActive = ref(false)
const temporaryHomePage = ref<number | null>(null) const temporaryHomePage = ref<number | null>(null)
const openedFolderId = ref<string | null>(null) const openedFolderId = ref<string | null>(null)
const folderDraggingOutside = ref(false) const folderDraggingOutside = ref(false)
@@ -132,11 +125,6 @@ let edgePageDirection = 0
let edgePageLocked = false let edgePageLocked = false
let folderHoverTimer: number | undefined let folderHoverTimer: number | undefined
let lastHomePointer: { clientX: number; clientY: number } | null = null let lastHomePointer: { clientX: number; clientY: number } | null = null
let homeDragGhost: HTMLElement | null = null
let homeDragGrip: { x: number; y: number } | null = null
let homeDragGeometry: PhoneViewportGeometry | null = null
let homeDragClipBounds: PhoneViewportRect | null = null
let homeDragPreviewBounds: PhoneViewportRect | null = null
const installedApps = computed(() => const installedApps = computed(() =>
PHONE_APPS.filter((app) => appStore.isInstalled(app.id)), PHONE_APPS.filter((app) => appStore.isInstalled(app.id)),
@@ -465,7 +453,7 @@ function startWidgetDrag(id: string, event: PointerEvent): void {
).find((candidate) => candidate.dataset.widgetId === id) ).find((candidate) => candidate.dataset.widgetId === id)
if (!widget) return if (!widget) return
pageTransitioning.value = false pageTransitioning.value = false
const bounds = homeDragViewportRect(widget) const bounds = widget.getBoundingClientRect()
draggingWidgetId.value = id draggingWidgetId.value = id
widgetDragGrip.value = { widgetDragGrip.value = {
x: event.clientX - bounds.left, x: event.clientX - bounds.left,
@@ -486,7 +474,7 @@ function updateWidgetDragPreview(event: {
) )
const pageElement = grid?.closest<HTMLElement>('.springboard-page') const pageElement = grid?.closest<HTMLElement>('.springboard-page')
if (!grid || !pageElement) return if (!grid || !pageElement) return
const renderedGridBounds = homeDragViewportRect(grid) const renderedGridBounds = grid.getBoundingClientRect()
const gridStyle = getComputedStyle(grid) const gridStyle = getComputedStyle(grid)
const scaleX = const scaleX =
grid.offsetWidth > 0 ? renderedGridBounds.width / grid.offsetWidth : 1 grid.offsetWidth > 0 ? renderedGridBounds.width / grid.offsetWidth : 1
@@ -541,7 +529,7 @@ function clearTemporaryHomePage(keepCurrentPage = false): void {
function resolveHomeEdgeTurn(event: { clientX: number }) { function resolveHomeEdgeTurn(event: { clientX: number }) {
const springboard = document.querySelector<HTMLElement>('.springboard') const springboard = document.querySelector<HTMLElement>('.springboard')
if (!springboard) return null if (!springboard) return null
const bounds = homeDragViewportRect(springboard) const bounds = springboard.getBoundingClientRect()
const renderedLastPage = appPages.value.length const renderedLastPage = appPages.value.length
return resolveSpringboardHomeEdgeTurn( return resolveSpringboardHomeEdgeTurn(
event.clientX, event.clientX,
@@ -560,7 +548,7 @@ function queueEdgePageTurn(
): void { ): void {
const springboard = document.querySelector<HTMLElement>('.springboard') const springboard = document.querySelector<HTMLElement>('.springboard')
if (!springboard) return if (!springboard) return
const bounds = homeDragViewportRect(springboard) const bounds = springboard.getBoundingClientRect()
const turn = const turn =
dragType === 'app' dragType === 'app'
? resolveHomeEdgeTurn(event) ? resolveHomeEdgeTurn(event)
@@ -745,166 +733,10 @@ async function saveWidgetConfig(
if (configured) changePage(configured.page) if (configured) changePage(configured.page)
} }
function homeDragViewportRect( function startHomeDrag(area: HomeArea, index: number): void {
element: Element,
geometry = homeDragGeometry ?? readPhoneViewportGeometry(element),
): PhoneViewportRect {
if (geometry) return geometry.rect(element)
const bounds = element.getBoundingClientRect()
return {
bottom: bounds.bottom,
height: bounds.height,
left: bounds.left,
right: bounds.right,
top: bounds.top,
width: bounds.width,
}
}
function viewportRectAt(
left: number,
top: number,
width: number,
height: number,
): PhoneViewportRect {
return {
bottom: top + height,
height,
left,
right: left + width,
top,
width,
}
}
function clearHomeDragGhost(expectedGhost?: HTMLElement | null): void {
if (expectedGhost && homeDragGhost !== expectedGhost) return
homeDragGhost?.remove()
homeDragGhost = null
homeDragGrip = null
homeDragGeometry = null
homeDragClipBounds = null
homeDragPreviewBounds = null
homeDragVisualActive.value = false
const layer = homeDragLayer.value
layer?.style.removeProperty('left')
layer?.style.removeProperty('top')
layer?.style.removeProperty('width')
layer?.style.removeProperty('height')
}
function updateHomeDragGhost(event: {
clientX: number
clientY: number
}): void {
const ghost = homeDragGhost
const grip = homeDragGrip
const clipBounds = homeDragClipBounds
const previewBounds = homeDragPreviewBounds
if (!ghost || !grip || !clipBounds || !previewBounds) return
const left = event.clientX - grip.x
const top = event.clientY - grip.y
ghost.style.transform = `translate3d(${left - clipBounds.left}px, ${top - clipBounds.top}px, 0)`
homeDragPreviewBounds = viewportRectAt(
left,
top,
previewBounds.width,
previewBounds.height,
)
}
function createHomeDragGhost(event: PointerEvent): void {
clearHomeDragGhost()
const eventTarget =
event.currentTarget instanceof Element
? event.currentTarget
: event.target instanceof Element
? event.target
: null
const source = eventTarget?.closest<HTMLElement>('.app-icon-item')
const layer = homeDragLayer.value
const springboard = source?.closest<HTMLElement>('.springboard')
const portal = layer?.closest<HTMLElement>('.phone-home-drag-portal')
const geometry = readPhoneViewportGeometry(source ?? null)
if (!source || !layer || !springboard || !portal || !geometry) return
const portalBounds = portal.getBoundingClientRect()
const clipBounds = geometry.rect(springboard)
const sourceBounds = geometry.rect(source)
if (
clipBounds.width <= 0 ||
clipBounds.height <= 0 ||
sourceBounds.width <= 0 ||
sourceBounds.height <= 0
) {
return
}
layer.style.left = `${clipBounds.left - portalBounds.left}px`
layer.style.top = `${clipBounds.top - portalBounds.top}px`
layer.style.width = `${clipBounds.width}px`
layer.style.height = `${clipBounds.height}px`
const ghost = source.cloneNode(true) as HTMLElement
ghost.classList.remove(
'app-icon-item--dragging',
'app-icon-item--editing',
'app-icon-item--drag-source',
'app-icon-item--drop-settling',
'home-folder-item--dragging',
'home-item--folder-hover',
)
ghost.classList.add('home-drag-ghost')
ghost.removeAttribute('style')
ghost
.querySelector<HTMLElement>('.app-icon-button')
?.style.removeProperty('transform')
ghost.setAttribute('aria-hidden', 'true')
ghost.querySelector('.app-icon-remove')?.remove()
for (const element of [ghost, ...Array.from(ghost.querySelectorAll('*'))]) {
element.removeAttribute('id')
for (const attribute of element.getAttributeNames()) {
if (attribute.startsWith('data-home-')) element.removeAttribute(attribute)
}
}
for (const control of ghost.querySelectorAll<HTMLElement>(
'a, button, input, select, textarea, [tabindex]',
)) {
control.tabIndex = -1
}
const position = document.createElement('div')
position.className = 'home-drag-position'
position.style.width = `${sourceBounds.width}px`
position.style.height = `${sourceBounds.height}px`
ghost.style.width = `${source.offsetWidth}px`
ghost.style.height = `${source.offsetHeight}px`
ghost.style.transform = `scale(${geometry.scaleX}, ${geometry.scaleY})`
position.appendChild(ghost)
homeDragGhost = position
homeDragGrip = {
x: event.clientX - sourceBounds.left,
y: event.clientY - sourceBounds.top,
}
homeDragGeometry = geometry
homeDragClipBounds = clipBounds
homeDragPreviewBounds = sourceBounds
layer.appendChild(position)
homeDragVisualActive.value = true
updateHomeDragGhost(event)
}
function startHomeDrag(
area: HomeArea,
index: number,
event: PointerEvent,
): void {
clearTemporaryHomePage() clearTemporaryHomePage()
lastHomePointer = null lastHomePointer = null
draggingHomeApp.value = { area, index } draggingHomeApp.value = { area, index }
createHomeDragGhost(event)
} }
function clearFolderHover(): void { function clearFolderHover(): void {
@@ -922,40 +754,10 @@ function queueFolderHover(event: PointerEvent): void {
return return
} }
const targetElement = Array.from( const targetElement = document
document.querySelectorAll<HTMLElement>('[data-home-area][data-home-index]'), .elementsFromPoint(event.clientX, event.clientY)
) .map((element) => element.closest<HTMLElement>('[data-home-index]'))
.filter((element) => { .find((element) => element && !element.closest('.app-icon-item--dragging'))
const area = element.dataset.homeArea as HomeArea | undefined
const index = Number(element.dataset.homeIndex)
if (
(area !== 'grid' && area !== 'dock') ||
!Number.isInteger(index) ||
(area === dragged.area && index === dragged.index)
) {
return false
}
if (
area === 'grid' &&
Number(
element.closest<HTMLElement>('[data-home-page]')?.dataset.homePage,
) !== phone.currentPage
) {
return false
}
const bounds = homeDragViewportRect(element)
return (
event.clientX >= bounds.left &&
event.clientX <= bounds.right &&
event.clientY >= bounds.top &&
event.clientY <= bounds.bottom
)
})
.sort((left, right) => {
const leftIsDock = left.dataset.homeArea === 'dock'
const rightIsDock = right.dataset.homeArea === 'dock'
return Number(rightIsDock) - Number(leftIsDock)
})[0]
const area = targetElement?.dataset.homeArea as HomeArea | undefined const area = targetElement?.dataset.homeArea as HomeArea | undefined
const targetIndex = Number(targetElement?.dataset.homeIndex) const targetIndex = Number(targetElement?.dataset.homeIndex)
if ( if (
@@ -1020,7 +822,6 @@ function queueFolderHover(event: PointerEvent): void {
if (folderId) { if (folderId) {
draggingHomeApp.value = null draggingHomeApp.value = null
lastHomePointer = null lastHomePointer = null
clearHomeDragGhost()
clearTemporaryHomePage() clearTemporaryHomePage()
openedFolderId.value = folderId openedFolderId.value = folderId
} }
@@ -1031,7 +832,6 @@ function queueFolderHover(event: PointerEvent): void {
function moveHomeDrag(event: PointerEvent): void { function moveHomeDrag(event: PointerEvent): void {
if (!draggingHomeApp.value) return if (!draggingHomeApp.value) return
lastHomePointer = { clientX: event.clientX, clientY: event.clientY } lastHomePointer = { clientX: event.clientX, clientY: event.clientY }
updateHomeDragGhost(event)
if (resolveHomeEdgeTurn(event)) { if (resolveHomeEdgeTurn(event)) {
clearFolderHover() clearFolderHover()
queueEdgePageTurn(event, 'app') queueEdgePageTurn(event, 'app')
@@ -1045,7 +845,7 @@ async function animateHomeItemDrop(
item: HomeItem, item: HomeItem,
area: HomeArea, area: HomeArea,
index: number, index: number,
from: PhoneViewportRect, from: DOMRect,
): Promise<void> { ): Promise<void> {
await nextTick() await nextTick()
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
@@ -1061,10 +861,7 @@ async function animateHomeItemDrop(
) )
if (!appElement) return if (!appElement) return
const target = homeDragViewportRect( const target = appElement.getBoundingClientRect()
appElement,
readPhoneViewportGeometry(appElement),
)
const { x: offsetX, y: offsetY } = springboardViewportDeltaToLocal( const { x: offsetX, y: offsetY } = springboardViewportDeltaToLocal(
from.left - target.left, from.left - target.left,
from.top - target.top, from.top - target.top,
@@ -1127,16 +924,13 @@ function nearestGridDropTarget(event: {
`.springboard-page--apps[data-home-page="${page}"] .app-grid`, `.springboard-page--apps[data-home-page="${page}"] .app-grid`,
) )
const pageElement = grid?.closest<HTMLElement>('.springboard-page') const pageElement = grid?.closest<HTMLElement>('.springboard-page')
const springboard = grid?.closest<HTMLElement>('.springboard') if (!grid || !pageElement) return null
if (!grid || !pageElement || !springboard) return null const pageBounds = pageElement.getBoundingClientRect()
const geometry = homeDragGeometry ?? readPhoneViewportGeometry(springboard)
const pageBounds = homeDragViewportRect(pageElement, geometry)
const springboardBounds = homeDragViewportRect(springboard, geometry)
if ( if (
event.clientX < springboardBounds.left || event.clientX < pageBounds.left ||
event.clientX > springboardBounds.right || event.clientX > pageBounds.right ||
event.clientY < springboardBounds.top || event.clientY < pageBounds.top ||
event.clientY > springboardBounds.bottom event.clientY > pageBounds.bottom
) { ) {
return null return null
} }
@@ -1146,15 +940,7 @@ function nearestGridDropTarget(event: {
const closestIndex = nearestSpringboardRectIndex( const closestIndex = nearestSpringboardRectIndex(
event.clientX, event.clientX,
event.clientY, event.clientY,
slots.map((slot) => { slots.map((slot) => slot.getBoundingClientRect()),
const bounds = homeDragViewportRect(slot, geometry)
return {
height: bounds.height,
left: springboardBounds.left + (bounds.left - pageBounds.left),
top: springboardBounds.top + (bounds.top - pageBounds.top),
width: bounds.width,
}
}),
) )
const closest = closestIndex === null ? null : slots[closestIndex] const closest = closestIndex === null ? null : slots[closestIndex]
const targetOffset = Number(closest?.dataset.homeTargetOffset) const targetOffset = Number(closest?.dataset.homeTargetOffset)
@@ -1167,8 +953,7 @@ function nearestDockDropTarget(event: {
}): HTMLElement | null { }): HTMLElement | null {
const dock = document.querySelector<HTMLElement>('.app-dock') const dock = document.querySelector<HTMLElement>('.app-dock')
if (!dock) return null if (!dock) return null
const geometry = homeDragGeometry ?? readPhoneViewportGeometry(dock) const dockBounds = dock.getBoundingClientRect()
const dockBounds = homeDragViewportRect(dock, geometry)
if ( if (
event.clientX < dockBounds.left || event.clientX < dockBounds.left ||
event.clientX > dockBounds.right || event.clientX > dockBounds.right ||
@@ -1185,7 +970,7 @@ function nearestDockDropTarget(event: {
const closestIndex = nearestSpringboardRectIndex( const closestIndex = nearestSpringboardRectIndex(
event.clientX, event.clientX,
event.clientY, event.clientY,
slots.map((slot) => homeDragViewportRect(slot, geometry)), slots.map((slot) => slot.getBoundingClientRect()),
) )
return closestIndex === null ? null : slots[closestIndex] return closestIndex === null ? null : slots[closestIndex]
} }
@@ -1194,14 +979,12 @@ function finishHomeDrag(event: PointerEvent): void {
clearEdgePageTurn() clearEdgePageTurn()
clearFolderHover() clearFolderHover()
const dragged = draggingHomeApp.value const dragged = draggingHomeApp.value
if (!dragged) { if (!dragged) return
clearHomeDragGhost()
return
}
updateHomeDragGhost(event)
const draggedItem = appStore.homeLayout[dragged.area][dragged.index] const draggedItem = appStore.homeLayout[dragged.area][dragged.index]
const dropGhost = homeDragGhost const draggedElement = document.querySelector<HTMLElement>(
const dropOrigin = homeDragPreviewBounds ? { ...homeDragPreviewBounds } : null `[data-home-area="${dragged.area}"][data-home-index="${dragged.index}"]`,
)
const dropOrigin = draggedElement?.getBoundingClientRect()
const dockTarget = nearestDockDropTarget(event) const dockTarget = nearestDockDropTarget(event)
const gridTarget = dockTarget ? null : nearestGridDropTarget(event) const gridTarget = dockTarget ? null : nearestGridDropTarget(event)
let dropArea = dragged.area let dropArea = dragged.area
@@ -1239,14 +1022,7 @@ function finishHomeDrag(event: PointerEvent): void {
lastHomePointer = null lastHomePointer = null
clearTemporaryHomePage(moved && gridTarget !== null) clearTemporaryHomePage(moved && gridTarget !== null)
if (moved && draggedItem && dropOrigin) { if (moved && draggedItem && dropOrigin) {
void animateHomeItemDrop( void animateHomeItemDrop(draggedItem, dropArea, dropIndex, dropOrigin)
draggedItem,
dropArea,
dropIndex,
dropOrigin,
).finally(() => clearHomeDragGhost(dropGhost))
} else {
clearHomeDragGhost()
} }
} }
@@ -1255,7 +1031,6 @@ function stopHomeDrag(): void {
clearFolderHover() clearFolderHover()
draggingHomeApp.value = null draggingHomeApp.value = null
lastHomePointer = null lastHomePointer = null
clearHomeDragGhost()
clearTemporaryHomePage() clearTemporaryHomePage()
} }
@@ -1268,9 +1043,7 @@ function reorderHomeApp(
const appElement = document.querySelector<HTMLElement>( const appElement = document.querySelector<HTMLElement>(
`[data-home-area="${area}"][data-home-index="${sourceIndex}"]`, `[data-home-area="${area}"][data-home-index="${sourceIndex}"]`,
) )
const moveOrigin = appElement const moveOrigin = appElement?.getBoundingClientRect()
? homeDragViewportRect(appElement, readPhoneViewportGeometry(appElement))
: null
const targetIndex = homeKeyboardTarget( const targetIndex = homeKeyboardTarget(
appStore.homeLayout, appStore.homeLayout,
area, area,
@@ -1358,10 +1131,7 @@ function extractOpenedFolderApp(
`.home-folder-panel [data-folder-app-index="${sourceIndex}"]`, `.home-folder-panel [data-folder-app-index="${sourceIndex}"]`,
) )
?.closest<HTMLElement>('.app-icon-item') ?.closest<HTMLElement>('.app-icon-item')
const geometry = readPhoneViewportGeometry(sourceElement ?? null) const sourceBounds = sourceElement?.getBoundingClientRect()
const sourceBounds = sourceElement
? homeDragViewportRect(sourceElement, geometry)
: null
const candidates = Array.from( const candidates = Array.from(
document.querySelectorAll<HTMLElement>('[data-home-index][data-home-area]'), document.querySelectorAll<HTMLElement>('[data-home-index][data-home-area]'),
).filter((element) => { ).filter((element) => {
@@ -1375,8 +1145,8 @@ function extractOpenedFolderApp(
}) })
const target = candidates.reduce<HTMLElement | null>((closest, candidate) => { const target = candidates.reduce<HTMLElement | null>((closest, candidate) => {
if (!closest) return candidate if (!closest) return candidate
const bounds = homeDragViewportRect(candidate, geometry) const bounds = candidate.getBoundingClientRect()
const closestBounds = homeDragViewportRect(closest, geometry) const closestBounds = closest.getBoundingClientRect()
const distance = Math.hypot( const distance = Math.hypot(
event.clientX - (bounds.left + bounds.width / 2), event.clientX - (bounds.left + bounds.width / 2),
event.clientY - (bounds.top + bounds.height / 2), event.clientY - (bounds.top + bounds.height / 2),
@@ -1442,7 +1212,6 @@ onBeforeUnmount(() => {
pendingWidgetPointer = null pendingWidgetPointer = null
lastWidgetPointer = null lastWidgetPointer = null
lastHomePointer = null lastHomePointer = null
clearHomeDragGhost()
temporaryHomePage.value = null temporaryHomePage.value = null
draggingHomeApp.value = null draggingHomeApp.value = null
draggingWidgetId.value = null draggingWidgetId.value = null
@@ -1458,6 +1227,7 @@ onBeforeUnmount(() => {
'springboard--dragging': dragging, 'springboard--dragging': dragging,
'springboard--editing': editMode, 'springboard--editing': editMode,
'springboard--folder-open': folderOverlayVisible, 'springboard--folder-open': folderOverlayVisible,
'springboard--home-dragging': draggingHomeApp !== null,
'springboard--widget-dragging': draggingWidgetId !== null, 'springboard--widget-dragging': draggingWidgetId !== null,
}, },
]" ]"
@@ -1533,7 +1303,6 @@ onBeforeUnmount(() => {
:data-home-index="cell.sourceIndex" :data-home-index="cell.sourceIndex"
:data-home-target-offset="cell.targetOffset" :data-home-target-offset="cell.targetOffset"
:edit-mode="editMode" :edit-mode="editMode"
:external-drag-visual="homeDragVisualActive"
:class="{ :class="{
'home-item--folder-hover': 'home-item--folder-hover':
folderHoverTarget === `grid:${cell.sourceIndex}`, folderHoverTarget === `grid:${cell.sourceIndex}`,
@@ -1541,7 +1310,7 @@ onBeforeUnmount(() => {
@dragcancel="stopHomeDrag" @dragcancel="stopHomeDrag"
@dragend="finishHomeDrag" @dragend="finishHomeDrag"
@dragmove="moveHomeDrag" @dragmove="moveHomeDrag"
@dragstart="startHomeDrag('grid', cell.sourceIndex, $event)" @dragstart="startHomeDrag('grid', cell.sourceIndex)"
@edit="enterEditMode" @edit="enterEditMode"
@remove="removeHomeApp(cell.app.id)" @remove="removeHomeApp(cell.app.id)"
@reorder="reorderHomeApp('grid', cell.sourceIndex, $event)" @reorder="reorderHomeApp('grid', cell.sourceIndex, $event)"
@@ -1556,7 +1325,6 @@ onBeforeUnmount(() => {
:data-home-index="cell.sourceIndex" :data-home-index="cell.sourceIndex"
:data-home-target-offset="cell.targetOffset" :data-home-target-offset="cell.targetOffset"
:edit-mode="editMode" :edit-mode="editMode"
:external-drag-visual="homeDragVisualActive"
:folder="cell.folder" :folder="cell.folder"
:class="{ :class="{
'home-item--folder-hover': 'home-item--folder-hover':
@@ -1565,7 +1333,7 @@ onBeforeUnmount(() => {
@dragcancel="stopHomeDrag" @dragcancel="stopHomeDrag"
@dragend="finishHomeDrag" @dragend="finishHomeDrag"
@dragmove="moveHomeDrag" @dragmove="moveHomeDrag"
@dragstart="startHomeDrag('grid', cell.sourceIndex, $event)" @dragstart="startHomeDrag('grid', cell.sourceIndex)"
@edit="enterEditMode" @edit="enterEditMode"
@open="openFolder(cell.folder.id)" @open="openFolder(cell.folder.id)"
@reorder="reorderHomeApp('grid', cell.sourceIndex, $event)" @reorder="reorderHomeApp('grid', cell.sourceIndex, $event)"
@@ -1716,10 +1484,6 @@ onBeforeUnmount(() => {
</section> </section>
</div> </div>
<Teleport defer to="#phone-home-drag-portal">
<div ref="homeDragLayer" class="home-drag-layer" aria-hidden="true"></div>
</Teleport>
<Transition name="edit-done"> <Transition name="edit-done">
<k-glass <k-glass
v-if="editMode && isEditablePage && !folderOverlayVisible" v-if="editMode && isEditablePage && !folderOverlayVisible"
@@ -1766,7 +1530,6 @@ onBeforeUnmount(() => {
:data-home-item-key="`app-${slot.app.id}`" :data-home-item-key="`app-${slot.app.id}`"
:data-home-index="slot.index" :data-home-index="slot.index"
:edit-mode="editMode" :edit-mode="editMode"
:external-drag-visual="homeDragVisualActive"
:show-label="false" :show-label="false"
:class="{ :class="{
'home-item--folder-hover': 'home-item--folder-hover':
@@ -1775,7 +1538,7 @@ onBeforeUnmount(() => {
@dragcancel="stopHomeDrag" @dragcancel="stopHomeDrag"
@dragend="finishHomeDrag" @dragend="finishHomeDrag"
@dragmove="moveHomeDrag" @dragmove="moveHomeDrag"
@dragstart="startHomeDrag('dock', slot.index, $event)" @dragstart="startHomeDrag('dock', slot.index)"
@edit="enterEditMode" @edit="enterEditMode"
@remove="removeHomeApp(slot.app.id)" @remove="removeHomeApp(slot.app.id)"
@reorder="reorderHomeApp('dock', slot.index, $event)" @reorder="reorderHomeApp('dock', slot.index, $event)"
@@ -1789,7 +1552,6 @@ onBeforeUnmount(() => {
:data-home-item-key="slot.folder.id" :data-home-item-key="slot.folder.id"
:data-home-index="slot.index" :data-home-index="slot.index"
:edit-mode="editMode" :edit-mode="editMode"
:external-drag-visual="homeDragVisualActive"
:folder="slot.folder" :folder="slot.folder"
:show-label="false" :show-label="false"
:class="{ :class="{
@@ -1799,7 +1561,7 @@ onBeforeUnmount(() => {
@dragcancel="stopHomeDrag" @dragcancel="stopHomeDrag"
@dragend="finishHomeDrag" @dragend="finishHomeDrag"
@dragmove="moveHomeDrag" @dragmove="moveHomeDrag"
@dragstart="startHomeDrag('dock', slot.index, $event)" @dragstart="startHomeDrag('dock', slot.index)"
@edit="enterEditMode" @edit="enterEditMode"
@open="openFolder(slot.folder.id)" @open="openFolder(slot.folder.id)"
@reorder="reorderHomeApp('dock', slot.index, $event)" @reorder="reorderHomeApp('dock', slot.index, $event)"
+1 -1
View File
@@ -791,7 +791,7 @@ onBeforeUnmount(() => {
flex-direction: column; flex-direction: column;
color: #f6f7f9; color: #f6f7f9;
background: #07090c; background: #07090c;
font-family: var(--sky-font-family); font-family: Inter, system-ui, sans-serif;
} }
.billing-app--light { .billing-app--light {
--billing-border: rgb(15 23 42 / 10%); --billing-border: rgb(15 23 42 / 10%);
+7 -1
View File
@@ -1156,7 +1156,13 @@ onMounted(async () => {
padding: 47px 0 24px; padding: 47px 0 24px;
background: var(--bg); background: var(--bg);
color: var(--label); color: var(--label);
font-family: var(--sky-font-family); font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'SF Pro Display',
system-ui,
sans-serif;
} }
.calendar--light { .calendar--light {
+1 -1
View File
@@ -2195,7 +2195,7 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
background: #151613; background: #151613;
color: #f8f8f4; color: #f8f8f4;
font-family: var(--sky-font-family); font-family: Inter, system-ui, sans-serif;
} }
.citymarkt--light { .citymarkt--light {
--ink: #fff; --ink: #fff;
+1 -1
View File
@@ -3586,7 +3586,7 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
background: #12171b !important; background: #12171b !important;
color: #f7f8f4; color: #f7f8f4;
font-family: var(--sky-font-family); font-family: Inter, system-ui, sans-serif;
} }
.feather-app--active.feather-app--light { .feather-app--active.feather-app--light {
--feather-panel: #f0f1ec; --feather-panel: #f0f1ec;
+4 -18
View File
@@ -77,10 +77,6 @@ import {
SkyToggle, SkyToggle,
} from '@/ui' } from '@/ui'
import { nuiCall } from '@/utils/nui' import { nuiCall } from '@/utils/nui'
import {
getPhoneOutputVolume,
subscribePhoneOutputVolume,
} from '@/utils/phoneAudio'
type Tab = 'feed' | 'discover' | 'create' | 'activity' | 'profile' type Tab = 'feed' | 'discover' | 'create' | 'activity' | 'profile'
type AuthMode = 'login' | 'register' type AuthMode = 'login' | 'register'
@@ -198,8 +194,6 @@ let flipTokYoutubePlayer: YouTubePlayer | null = null
let flipTokYoutubeApi: YouTubeApi | null = null let flipTokYoutubeApi: YouTubeApi | null = null
let flipTokYoutubeOwner = '' let flipTokYoutubeOwner = ''
let flipTokYoutubeVideoId = '' let flipTokYoutubeVideoId = ''
let flipTokYoutubeVolume = 0
let removePhoneOutputVolumeListener: (() => void) | undefined
let observer: IntersectionObserver | null = null let observer: IntersectionObserver | null = null
let videoClickTimer: number | null = null let videoClickTimer: number | null = null
let likePulseTimer: number | null = null let likePulseTimer: number | null = null
@@ -792,7 +786,6 @@ async function playFlipTokYoutube(
seconds = 0, seconds = 0,
): Promise<void> { ): Promise<void> {
flipTokYoutubeOwner = owner flipTokYoutubeOwner = owner
flipTokYoutubeVolume = volume
try { try {
const api = await loadYouTubeApi() const api = await loadYouTubeApi()
flipTokYoutubeApi = api flipTokYoutubeApi = api
@@ -801,7 +794,7 @@ async function playFlipTokYoutube(
flipTokYoutubeVideoId = videoId flipTokYoutubeVideoId = videoId
flipTokYoutubePlayer.loadVideoById(videoId) flipTokYoutubePlayer.loadVideoById(videoId)
} }
flipTokYoutubePlayer.setVolume(volume * getPhoneOutputVolume()) flipTokYoutubePlayer.setVolume(volume)
flipTokYoutubePlayer.seekTo(Math.max(0, seconds), true) flipTokYoutubePlayer.seekTo(Math.max(0, seconds), true)
flipTokYoutubePlayer.playVideo() flipTokYoutubePlayer.playVideo()
if (owner === 'composer') customMusicLoadFailed.value = false if (owner === 'composer') customMusicLoadFailed.value = false
@@ -842,7 +835,7 @@ async function playFlipTokYoutube(
}, },
onReady: (event) => { onReady: (event) => {
flipTokYoutubePlayer = event.target flipTokYoutubePlayer = event.target
event.target.setVolume(volume * getPhoneOutputVolume()) event.target.setVolume(volume)
event.target.seekTo(Math.max(0, seconds), true) event.target.seekTo(Math.max(0, seconds), true)
event.target.playVideo() event.target.playVideo()
if (owner === 'composer') customMusicLoadFailed.value = false if (owner === 'composer') customMusicLoadFailed.value = false
@@ -1634,10 +1627,7 @@ watch(originalVolume, (value) => {
watch(musicVolume, (value) => { watch(musicVolume, (value) => {
if (composerMusic.value) composerMusic.value.volume = value / 100 if (composerMusic.value) composerMusic.value.volume = value / 100
if (flipTokYoutubeOwner === 'composer') { if (flipTokYoutubeOwner === 'composer') flipTokYoutubePlayer?.setVolume(value)
flipTokYoutubeVolume = value
flipTokYoutubePlayer?.setVolume(value * getPhoneOutputVolume())
}
}) })
watch( watch(
@@ -1665,9 +1655,6 @@ watch(
) )
onMounted(async () => { onMounted(async () => {
removePhoneOutputVolumeListener = subscribePhoneOutputVolume((volume) => {
flipTokYoutubePlayer?.setVolume(flipTokYoutubeVolume * volume)
})
const profileSelection = messageMedia.consumeMany<ProfileMediaContext>( const profileSelection = messageMedia.consumeMany<ProfileMediaContext>(
'fliptok:profile-avatar', 'fliptok:profile-avatar',
) )
@@ -1744,7 +1731,6 @@ onMounted(async () => {
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
removePhoneOutputVolumeListener?.()
observer?.disconnect() observer?.disconnect()
if (videoClickTimer !== null) window.clearTimeout(videoClickTimer) if (videoClickTimer !== null) window.clearTimeout(videoClickTimer)
if (likePulseTimer !== null) window.clearTimeout(likePulseTimer) if (likePulseTimer !== null) window.clearTimeout(likePulseTimer)
@@ -3395,7 +3381,7 @@ onBeforeUnmount(() => {
overflow: hidden; overflow: hidden;
background: #000; background: #000;
color: #fff; color: #fff;
font-family: var(--sky-font-family); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
} }
.state, .state,
.light-empty, .light-empty,
+1 -1
View File
@@ -1526,7 +1526,7 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
background: #12171b; background: #12171b;
color: #f7f7f2; color: #f7f7f2;
font-family: var(--sky-font-family); font-family: Inter, system-ui, sans-serif;
} }
.pages--light { .pages--light {
--yellow: #8a6500; --yellow: #8a6500;
+1 -1
View File
@@ -279,7 +279,7 @@ onBeforeUnmount(() => {
background: background:
radial-gradient(circle at 88% 8%, rgb(255 255 255 / 72%), transparent 28%), radial-gradient(circle at 88% 8%, rgb(255 255 255 / 72%), transparent 28%),
linear-gradient(155deg, #f4efff 0%, #e7ddff 55%, #d9cdf7 100%); linear-gradient(155deg, #f4efff 0%, #e7ddff 55%, #d9cdf7 100%);
font-family: var(--sky-font-family); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
user-select: none; user-select: none;
} }
+1 -1
View File
@@ -420,7 +420,7 @@ onBeforeUnmount(() => {
background: background:
radial-gradient(circle at 88% 7%, rgb(108 231 218 / 32%), transparent 30%), radial-gradient(circle at 88% 7%, rgb(108 231 218 / 32%), transparent 30%),
linear-gradient(155deg, #effcf7 0%, #cfeee5 52%, #abdcd7 100%); linear-gradient(155deg, #effcf7 0%, #cfeee5 52%, #abdcd7 100%);
font-family: var(--sky-font-family); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
touch-action: manipulation; touch-action: manipulation;
user-select: none; user-select: none;
} }
+1 -1
View File
@@ -386,7 +386,7 @@ onBeforeUnmount(() => {
padding: 52px 14px 25px; padding: 52px 14px 25px;
color: #f5fbff; color: #f5fbff;
background: radial-gradient(circle at 50% 0, #253163, #090c22 58%, #050715); background: radial-gradient(circle at 50% 0, #253163, #090c22 58%, #050715);
font-family: var(--sky-font-family); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
user-select: none; user-select: none;
touch-action: manipulation; touch-action: manipulation;
} }
+1 -1
View File
@@ -335,7 +335,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleKeydown))
background: background:
radial-gradient(circle at 86% 8%, rgb(255 192 94 / 28%), transparent 29%), radial-gradient(circle at 86% 8%, rgb(255 192 94 / 28%), transparent 29%),
linear-gradient(155deg, #fff3dc 0%, #f3d8b7 55%, #e8b98d 100%); linear-gradient(155deg, #fff3dc 0%, #f3d8b7 55%, #e8b98d 100%);
font-family: var(--sky-font-family); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
touch-action: none; touch-action: none;
user-select: none; user-select: none;
} }
+1 -1
View File
@@ -167,7 +167,7 @@ onBeforeUnmount(() => {
</template> </template>
<style scoped> <style scoped>
.flappy-app { --sky-a:#50d8f2;--sky-b:#765ce8;--tower:#574be8;--tower-light:#9b94ff;--tower-dark:#3429a6;--tower-glow:#79e7ff; position:absolute;inset:0;overflow:hidden;padding:52px 16px 27px;color:#fff;background:linear-gradient(160deg,#19375e,#433b80);font-family:var(--sky-font-family);user-select:none;touch-action:manipulation; } .flappy-app { --sky-a:#50d8f2;--sky-b:#765ce8;--tower:#574be8;--tower-light:#9b94ff;--tower-dark:#3429a6;--tower-glow:#79e7ff; position:absolute;inset:0;overflow:hidden;padding:52px 16px 27px;color:#fff;background:linear-gradient(160deg,#19375e,#433b80);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none;touch-action:manipulation; }
.flappy-app--playing { padding:0; } .flappy-app--playing { padding:0; }
.flappy-app--neon { --sky-a:#151c58;--sky-b:#a329a2;--tower:#19dfe6;--tower-light:#82ffff;--tower-dark:#087f91;--tower-glow:#26fbff; }.flappy-app--storm { --sky-a:#6f8497;--sky-b:#2b3955;--tower:#df765f;--tower-light:#ffb18e;--tower-dark:#8d3e39;--tower-glow:#ff997d; } .flappy-app--neon { --sky-a:#151c58;--sky-b:#a329a2;--tower:#19dfe6;--tower-light:#82ffff;--tower-dark:#087f91;--tower-glow:#26fbff; }.flappy-app--storm { --sky-a:#6f8497;--sky-b:#2b3955;--tower:#df765f;--tower-light:#ffb18e;--tower-dark:#8d3e39;--tower-glow:#ff997d; }
.flappy-header{height:55px;display:flex;align-items:center;justify-content:space-between}.flappy-header span{display:block;color:#d9e9fa;font-size:14px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase}.flappy-header h1{margin:1px 0 0;font-size:32px;line-height:1}.flappy-header button:not(.sky-button--glass),.flappy-toolbar button:not(.sky-button--glass){width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #ffffff35;border-radius:12px;color:#fff;background:#ffffff18}.flappy-header .sky-button--glass,.flappy-toolbar .sky-button--glass{color:#fff} .flappy-header{height:55px;display:flex;align-items:center;justify-content:space-between}.flappy-header span{display:block;color:#d9e9fa;font-size:14px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase}.flappy-header h1{margin:1px 0 0;font-size:32px;line-height:1}.flappy-header button:not(.sky-button--glass),.flappy-toolbar button:not(.sky-button--glass){width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #ffffff35;border-radius:12px;color:#fff;background:#ffffff18}.flappy-header .sky-button--glass,.flappy-toolbar .sky-button--glass{color:#fff}
+1 -1
View File
@@ -306,7 +306,7 @@ onBeforeUnmount(() => {
background: background:
radial-gradient(circle at 85% 8%, rgb(100 211 91 / 22%), transparent 30%), radial-gradient(circle at 85% 8%, rgb(100 211 91 / 22%), transparent 30%),
linear-gradient(165deg, #142b25 0%, #0c1715 62%, #08100f 100%); linear-gradient(165deg, #142b25 0%, #0c1715 62%, #08100f 100%);
font-family: var(--sky-font-family); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
user-select: none; user-select: none;
touch-action: none; touch-action: none;
} }
+1 -1
View File
@@ -321,7 +321,7 @@ onBeforeUnmount(() => {
</template> </template>
<style scoped> <style scoped>
.tower-app { position: absolute; inset: 0; overflow: hidden; padding: 52px 16px 27px; color: #eef5ff; background: radial-gradient(circle at 75% 8%, #7146c866, transparent 35%), linear-gradient(170deg, #161634, #242054 52%, #10132c); font-family: var(--sky-font-family); user-select: none; touch-action: manipulation; } .tower-app { position: absolute; inset: 0; overflow: hidden; padding: 52px 16px 27px; color: #eef5ff; background: radial-gradient(circle at 75% 8%, #7146c866, transparent 35%), linear-gradient(170deg, #161634, #242054 52%, #10132c); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; user-select: none; touch-action: manipulation; }
.tower-app--playing { padding: 0; } .tower-app--playing { padding: 0; }
.tower-header { height: 50px; display: flex; align-items: center; justify-content: space-between; } .tower-header { height: 50px; display: flex; align-items: center; justify-content: space-between; }
.tower-header span { display: block; color: #c1b8f1; font-size: 10px; font-weight: 850; letter-spacing: 1.1px; text-transform: uppercase; } .tower-header span { display: block; color: #c1b8f1; font-size: 10px; font-weight: 850; letter-spacing: 1.1px; text-transform: uppercase; }
@@ -1,70 +0,0 @@
import { readFileSync } from 'node:fs'
import { describe, expect, it } from 'vitest'
const gallerySource = readFileSync(
new URL('./PhoneDynamicIslandGallery.vue', import.meta.url),
'utf8',
)
const islandSource = readFileSync(
new URL('../../components/PhoneDynamicIsland.vue', import.meta.url),
'utf8',
)
const appSource = readFileSync(
new URL('../../App.vue', import.meta.url),
'utf8',
)
const routerSource = readFileSync(
new URL('../../router/index.ts', import.meta.url),
'utf8',
)
describe('Dynamic Island development gallery contract', () => {
it('shows every runtime activity and both supported presentation sizes', () => {
for (const activity of [
'incoming-call',
'call',
'music',
'recording',
'timer',
'stopwatch',
]) {
expect(gallerySource).toContain(`activity: '${activity}'`)
}
expect(gallerySource).toContain("label: 'Compact'")
expect(gallerySource).toContain("label: 'Expanded'")
expect(
gallerySource.match(
/activity: '(?:incoming-call|call|music|recording|timer|stopwatch)'/g,
),
).toHaveLength(11)
})
it('uses the production component with inert preview data', () => {
expect(gallerySource).toContain('<PhoneDynamicIsland')
expect(gallerySource).toContain(':preview-activity="variant.activity"')
expect(islandSource).toContain('previewActivity?: DynamicIslandActivity')
expect(islandSource).toContain(
':data-preview="props.preview ? \'true\' : undefined"',
)
expect(islandSource).toContain(".phone-dynamic-island[data-preview='true']")
expect(gallerySource).toMatch(
/\.dynamic-island-gallery__stage\s*\{[^}]*width:\s*100%;/s,
)
expect(gallerySource).toMatch(
/dynamic-island-gallery__preview\.phone-dynamic-island[\s\S]*?max-width:\s*calc\(100% - 12px\);/,
)
})
it('keeps the gallery development-only and hides the live island above it', () => {
expect(routerSource).toContain("name: 'development-dynamic-islands'")
expect(routerSource).toContain("path: '/development/dynamic-islands'")
expect(routerSource).toMatch(
/const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV/,
)
expect(appSource).toContain("route.name === 'development-dynamic-islands'")
expect(appSource).toContain(
'v-if="!setupRequired && !isDynamicIslandGalleryRoute"',
)
})
})
@@ -1,303 +0,0 @@
<script setup lang="ts">
import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'
import type { DynamicIslandActivity } from '@/types/dynamicIsland'
type GalleryVariant = {
activity: DynamicIslandActivity
expanded: boolean
eyebrow: string
label: string
progress?: number
subtitle: string
title: string
value: string
}
type GalleryGroup = {
label: string
variants: GalleryVariant[]
}
const galleryGroups: GalleryGroup[] = [
{
label: 'Incoming call',
variants: [
{
activity: 'incoming-call',
expanded: true,
eyebrow: 'Incoming call',
label: 'Expanded',
subtitle: 'mobile',
title: 'Tania Castillo',
value: 'Incoming',
},
],
},
{
label: 'Active call',
variants: [
{
activity: 'call',
expanded: false,
eyebrow: 'Connected',
label: 'Compact',
subtitle: '00:42',
title: 'Alex Rivera',
value: '00:42',
},
{
activity: 'call',
expanded: true,
eyebrow: 'Connected',
label: 'Expanded',
subtitle: '00:42',
title: 'Alex Rivera',
value: '00:42',
},
],
},
{
label: 'Music',
variants: [
{
activity: 'music',
expanded: false,
eyebrow: 'Now Playing',
label: 'Compact',
progress: 0.64,
subtitle: 'Los Santos Radio',
title: 'Night Drive',
value: 'Night Drive',
},
{
activity: 'music',
expanded: true,
eyebrow: 'Now Playing',
label: 'Expanded',
progress: 0.64,
subtitle: 'Los Santos Radio',
title: 'Night Drive',
value: 'Night Drive',
},
],
},
{
label: 'Voice recording',
variants: [
{
activity: 'recording',
expanded: false,
eyebrow: 'Recording',
label: 'Compact',
subtitle: 'Voice memo',
title: '00:37',
value: '00:37',
},
{
activity: 'recording',
expanded: true,
eyebrow: 'Recording',
label: 'Expanded',
subtitle: 'Voice memo',
title: '00:37',
value: '00:37',
},
],
},
{
label: 'Timer',
variants: [
{
activity: 'timer',
expanded: false,
eyebrow: 'Timer',
label: 'Compact',
progress: 0.47,
subtitle: '',
title: '0:21',
value: '0:21',
},
{
activity: 'timer',
expanded: true,
eyebrow: 'Timer',
label: 'Expanded',
progress: 0.47,
subtitle: '',
title: '0:21',
value: '0:21',
},
],
},
{
label: 'Stopwatch',
variants: [
{
activity: 'stopwatch',
expanded: false,
eyebrow: 'Stopwatch',
label: 'Compact',
subtitle: '',
title: '00:11,48',
value: '00:11,48',
},
{
activity: 'stopwatch',
expanded: true,
eyebrow: 'Stopwatch',
label: 'Expanded',
subtitle: '',
title: '00:11,48',
value: '00:11,48',
},
],
},
]
</script>
<template>
<main class="dynamic-island-gallery">
<header class="dynamic-island-gallery__header">
<span>Development preview</span>
<h1>Dynamic Islands</h1>
<p>Every runtime activity in its supported compact and expanded state.</p>
</header>
<section
v-for="group in galleryGroups"
:key="group.label"
class="dynamic-island-gallery__group"
>
<h2>{{ group.label }}</h2>
<article
v-for="variant in group.variants"
:key="`${variant.activity}-${variant.label}`"
class="dynamic-island-gallery__variant"
>
<span>{{ variant.label }}</span>
<div
class="dynamic-island-gallery__stage"
:class="{
'dynamic-island-gallery__stage--expanded': variant.expanded,
}"
>
<PhoneDynamicIsland
class="dynamic-island-gallery__preview"
preview
:preview-activity="variant.activity"
:preview-expanded="variant.expanded"
:preview-eyebrow="variant.eyebrow"
:preview-progress="variant.progress"
:preview-subtitle="variant.subtitle"
:preview-title="variant.title"
:preview-value="variant.value"
/>
</div>
</article>
</section>
</main>
</template>
<style scoped>
.dynamic-island-gallery {
position: absolute;
z-index: 2;
inset: 0;
overflow-y: auto;
padding: 58px 6px 32px;
color: #f7f7fb;
background:
radial-gradient(circle at 50% 0%, rgb(96 75 180 / 22%), transparent 30%),
linear-gradient(180deg, #111116 0%, #070709 100%);
scrollbar-width: none;
}
.dynamic-island-gallery::-webkit-scrollbar {
display: none;
}
.dynamic-island-gallery__header,
.dynamic-island-gallery__group {
width: 100%;
max-width: 356px;
margin-inline: auto;
}
.dynamic-island-gallery__header {
padding: 4px 8px 18px;
}
.dynamic-island-gallery__header span,
.dynamic-island-gallery__variant > span {
color: #a7a7b3;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.55px;
text-transform: uppercase;
}
.dynamic-island-gallery__header h1 {
margin: 4px 0 5px;
font-size: 28px;
letter-spacing: -0.8px;
}
.dynamic-island-gallery__header p {
margin: 0;
color: #b6b6c2;
font-size: 12px;
line-height: 17px;
}
.dynamic-island-gallery__group {
padding: 14px 0 18px;
border-top: 1px solid rgb(255 255 255 / 9%);
}
.dynamic-island-gallery__group h2 {
margin: 0 8px 10px;
font-size: 15px;
letter-spacing: -0.2px;
}
.dynamic-island-gallery__variant + .dynamic-island-gallery__variant {
margin-top: 10px;
}
.dynamic-island-gallery__variant > span {
display: block;
margin: 0 10px 5px;
font-size: 9px;
}
.dynamic-island-gallery__stage {
display: grid;
width: 100%;
min-height: 72px;
overflow: hidden;
place-items: center;
border: 1px solid rgb(255 255 255 / 8%);
border-radius: 30px;
background:
radial-gradient(circle at 70% 15%, rgb(93 89 255 / 24%), transparent 34%),
#1a1a22;
}
.dynamic-island-gallery__stage--expanded {
min-height: 142px;
}
:deep(.dynamic-island-gallery__preview.phone-dynamic-island) {
position: relative;
top: auto;
left: auto;
max-width: calc(100% - 12px);
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.dynamic-island-gallery {
scroll-behavior: auto;
}
}
</style>
@@ -229,7 +229,9 @@ describe('development Sky UI Kitchen Sink contract', () => {
/const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV[\s\S]*?import\('@\/views\/development\/SkyUiKitchenSinkView\.vue'\)/, /const developmentRoutes[^=]*=\s*import\.meta\.env\.DEV[\s\S]*?import\('@\/views\/development\/SkyUiKitchenSinkView\.vue'\)/,
) )
expect(routerSource).toContain("name: 'development-sky-ui'") expect(routerSource).toContain("name: 'development-sky-ui'")
expect(appSource).toContain("route.name === 'development-sky-ui'") expect(appSource).toContain(
"isDevelopment && route.name === 'development-sky-ui'",
)
expect(appSource).toContain( expect(appSource).toContain(
'isDevelopmentRoute ? String(route.name) : route.path', 'isDevelopmentRoute ? String(route.name) : route.path',
) )
-1
View File
@@ -23,7 +23,6 @@ const lifecycleEndpoints = new Set([
'notification:focus', 'notification:focus',
'sim:picker-close', 'sim:picker-close',
'ui:input-focus', 'ui:input-focus',
'ui:live-activity',
'ui:opened', 'ui:opened',
'ui:ready', 'ui:ready',
]) ])
-1
View File
@@ -1157,7 +1157,6 @@ async function main() {
'notification:focus', 'notification:focus',
'sim:picker-close', 'sim:picker-close',
'ui:input-focus', 'ui:input-focus',
'ui:live-activity',
'ui:opened', 'ui:opened',
'ui:ready', 'ui:ready',
] ]
-91
View File
@@ -1,91 +0,0 @@
Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION AND CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
DEALINGS IN THE FONT SOFTWARE.
-34
View File
@@ -6,8 +6,6 @@ local open_without_focus = false
local device_payload = nil local device_payload = nil
local equipped_phone_number = nil local equipped_phone_number = nil
local nui_generation = 0 local nui_generation = 0
local live_activity_active = false
local open_home_requested = false
local function get_equipped_phone_number() local function get_equipped_phone_number()
if not device_payload or not device_payload.device.sim then if not device_payload or not device_payload.device.sim then
@@ -77,9 +75,7 @@ local function send_open_message()
SendNUIMessage({ SendNUIMessage({
type = "app:open", type = "app:open",
data = payload, data = payload,
openHome = open_home_requested,
}) })
open_home_requested = false
end end
local function open_phone() local function open_phone()
@@ -173,25 +169,6 @@ RegisterCommand("sky_phone_toggle", function()
Bridge.Callbacks.Trigger("sky_phone:device:open-request", {}) Bridge.Callbacks.Trigger("sky_phone:device:open-request", {})
end, false) end, false)
RegisterCommand("sky_phone_live_activity_open", function()
if not live_activity_active or is_open or open_requested then
return
end
open_home_requested = true
local result = Bridge.Callbacks.Trigger("sky_phone:device:open-request", {})
if not result or not result.success then
open_home_requested = false
end
end, false)
RegisterKeyMapping(
"sky_phone_live_activity_open",
locale.Controls.OpenPhone,
"keyboard",
"SPACE"
)
if Config.Phone.Keybind then if Config.Phone.Keybind then
if type(Config.Phone.Keybind) ~= "string" or Config.Phone.Keybind == "" then if type(Config.Phone.Keybind) ~= "string" or Config.Phone.Keybind == "" then
error("[sky_phone] Config.Phone.Keybind must be a non-empty keyboard key name or false.") error("[sky_phone] Config.Phone.Keybind must be a non-empty keyboard key name or false.")
@@ -278,15 +255,6 @@ RegisterNUICallback("ui:input-focus", function(data, cb)
cb({ success = true }) cb({ success = true })
end) end)
RegisterNUICallback("ui:live-activity", function(data, cb)
if type(data) ~= "table" or type(data.active) ~= "boolean" then
cb({ success = false, error = "invalid_request" })
return
end
live_activity_active = data.active
cb({ success = true })
end)
RegisterNUICallback("close", function(data, cb) RegisterNUICallback("close", function(data, cb)
if type(data) ~= "table" then if type(data) ~= "table" then
cb({ success = false, error = "invalid_request" }) cb({ success = false, error = "invalid_request" })
@@ -334,8 +302,6 @@ RegisterNetEvent("sky_phone:device:invalidated", function()
close_phone(false) close_phone(false)
device_payload = nil device_payload = nil
update_equipped_phone_number(nil) update_equipped_phone_number(nil)
live_activity_active = false
open_home_requested = false
end) end)
RegisterNetEvent("sky_phone:device:error", function(error_code) RegisterNetEvent("sky_phone:device:error", function(error_code)
+12 -10
View File
@@ -679,16 +679,18 @@ function SkyPhoneCompanies.GetCallTargets(company_id)
end end
for source, readiness in pairs(call_availability) do for source, readiness in pairs(call_availability) do
local member = online[source] and call_member(source) or nil local member = online[source] and call_member(source) or nil
local device = member and SkyPhone.LoadDevice(readiness.imei) or nil local device = member and current_device(source, true) or nil
local device_slots = device and SkyPhone.FindDeviceSlots(source, readiness.imei) or {} if not member or not device or member.company_id ~= readiness.company_id
local readiness_valid = member and device and device_slots[1] or readiness.company_id ~= company_id or readiness.imei ~= device.imei
and member.company_id == readiness.company_id or readiness.sim_id ~= device.sim_id
and device.sim_id == readiness.sim_id then
and device.sim_type == "registered" if not member or not device or member.company_id ~= readiness.company_id
and device.registered_at ~= nil or readiness.imei ~= (device and device.imei)
if not readiness_valid then or readiness.sim_id ~= (device and device.sim_id)
call_availability[source] = nil then
elseif readiness.company_id == company_id then call_availability[source] = nil
end
else
targets[#targets + 1] = { targets[#targets + 1] = {
source = source, source = source,
simId = device.sim_id, simId = device.sim_id,
+2 -19
View File
@@ -51,23 +51,6 @@ local function session_owner(source)
} }
end end
local function device_owner(source, imei)
if not SkyPhoneImei.IsValid(imei) then
return nil, { success = false, error = "invalid_request" }
end
if not SkyPhone.FindDeviceSlots(source, imei)[1] then
return nil, { success = false, error = "owner_changed" }
end
local device = SkyPhone.LoadDevice(imei)
if not device then
return nil, { success = false, error = "device_not_found" }
end
return {
account_id = device.account_id and tonumber(device.account_id) or nil,
imei = imei,
}
end
local function owner_condition(owner, alias) local function owner_condition(owner, alias)
local prefix = alias and ("`%s`."):format(alias) or "" local prefix = alias and ("`%s`."):format(alias) or ""
if owner.account_id then if owner.account_id then
@@ -334,7 +317,7 @@ RegisterNetEvent("sky_phone:memos:request-upload", function(data)
upload_result(src, type(data) == "table" and data.correlationId or nil, false, "invalid_memo") upload_result(src, type(data) == "table" and data.correlationId or nil, false, "invalid_memo")
return return
end end
local owner, error_response = device_owner(src, data.deviceImei) local owner, error_response = session_owner(src)
if not owner then if not owner then
upload_result(src, memo.correlation_id, false, error_response.error) upload_result(src, memo.correlation_id, false, error_response.error)
return return
@@ -409,7 +392,7 @@ RegisterNetEvent("sky_phone:memos:complete-upload", function(data)
return return
end end
state.completing = true state.completing = true
local owner, error_response = device_owner(src, state.owner.imei) local owner, error_response = session_owner(src)
if not owner or owner.imei ~= state.owner.imei or owner.account_id ~= state.owner.account_id then if not owner or owner.imei ~= state.owner.imei or owner.account_id ~= state.owner.account_id then
pending_uploads[request_id] = nil pending_uploads[request_id] = nil
local rejected, _, trusted_remote = SkyPhoneMedia.VerifyRemoteUpload(state, data.remoteId, data.url) local rejected, _, trusted_remote = SkyPhoneMedia.VerifyRemoteUpload(state, data.remoteId, data.url)
+1
View File
@@ -958,6 +958,7 @@ Bridge.Debug(
) )
Bridge.Callbacks.Register("sky_phone:device:close", function(source) Bridge.Callbacks.Register("sky_phone:device:close", function(source)
SkyPhoneCompanies.ClearCallAvailability(source)
sessions[source] = nil sessions[source] = nil
return { success = true } return { success = true }
end) end)