mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-04 17:23:25 +00:00
Compare commits
13
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3314fa5355 | ||
|
|
637168c616 | ||
|
|
39fe171961 | ||
|
|
c2fe8b5e23 | ||
|
|
a24cda989a | ||
|
|
b9f8930f00 | ||
|
|
5efd806e43 | ||
|
|
65a0846eea | ||
|
|
0a0053c3af | ||
|
|
2f0faa8206 | ||
|
|
76b0378649 | ||
|
|
07b348a01a | ||
|
|
9abf53b140 |
@@ -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
@@ -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.
@@ -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)')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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,
|
||||||
}"
|
}"
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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
@@ -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()
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|||||||
@@ -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,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
|
||||||
|
|||||||
@@ -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;/)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -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')
|
||||||
|
|
||||||
|
|||||||
@@ -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',
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
: []
|
: []
|
||||||
|
|
||||||
|
|||||||
@@ -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',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -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]) {
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -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([])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
Vendored
+3
-2
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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(
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 +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,
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'")
|
||||||
|
|||||||
@@ -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)"
|
||||||
|
|||||||
@@ -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%);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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',
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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',
|
||||||
])
|
])
|
||||||
|
|||||||
@@ -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',
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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.
|
|
||||||
@@ -6,7 +6,7 @@ use_experimental_fxv2_oal 'yes'
|
|||||||
|
|
||||||
author 'Sky-Systems'
|
author 'Sky-Systems'
|
||||||
description 'Sky Phone'
|
description 'Sky Phone'
|
||||||
version '0.2.0'
|
version '0.1.0'
|
||||||
|
|
||||||
provide 'lb-phone'
|
provide 'lb-phone'
|
||||||
provide '17mov_Phone'
|
provide '17mov_Phone'
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user