) => {
10 | return (
11 | {children}
12 | );
13 | };
14 |
15 | export const useStore = (): RootStore => useContext(StoreContext);
16 |
17 | export default StoreProvider;
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 | /dist
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 | .idea
23 |
24 | # debug
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | .pnpm-debug.log*
29 |
30 | # local env files
31 | .env*.local
32 |
33 | # vercel
34 | .vercel
35 |
36 | # typescript
37 | *.tsbuildinfo
38 | next-env.d.ts
39 |
--------------------------------------------------------------------------------
/component/Npv/ControlButtons/Block.tsx:
--------------------------------------------------------------------------------
1 | import ControlButton from 'component/Npv/ControlButtons/ControlButton';
2 | import { NpvIcon } from 'component/Npv/ControlButtons/Controls';
3 | import { IconBlock } from 'component/CarthingUIComponents/';
4 | import { useStore } from 'context/store';
5 |
6 | const Block = () => {
7 | const uiState = useStore().npvStore.controlButtonsUiState;
8 |
9 | return (
10 |
11 |
12 |
13 | );
14 | };
15 |
16 | export default Block;
17 |
--------------------------------------------------------------------------------
/@spotify-internal/ubi-logger-js/src/providers/PageInstanceIdProvider.ts:
--------------------------------------------------------------------------------
1 | export interface PageInstanceIdProvider {
2 | getPageInstanceId(): string | null;
3 | setPageInstanceId(pageInstanceId: string): void;
4 | }
5 |
6 | export class UBIPageInstanceIdProvider implements PageInstanceIdProvider {
7 | private _currentPageInstanceId: string | null = null;
8 |
9 | setPageInstanceId(pageInstanceId: string): void {
10 | this._currentPageInstanceId = pageInstanceId;
11 | }
12 | getPageInstanceId(): string | null {
13 | return this._currentPageInstanceId;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/component/Npv/Scrubbing/ScrubbingBar.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | $progress-bar-height: 4px;
4 | $container-height: -4px;
5 |
6 | .scrubbingBar {
7 | @include transition-background-color;
8 |
9 | position: absolute;
10 | z-index: $overlay-z-index + 1;
11 | width: $device-width;
12 | height: $progress-bar-height;
13 | background-image: linear-gradient(0deg, rgb(0 0 0 / 50%), rgb(0 0 0 / 50%));
14 | }
15 |
16 | .progressPlayed {
17 | z-index: $scrubber-z-index + 1;
18 | background-color: $white;
19 | width: 2px;
20 | height: 100%;
21 | }
22 |
--------------------------------------------------------------------------------
/component/Shelf/ShelfItem/InlineTipItem.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .inlineTipItem {
4 | width: 508px;
5 | height: 324px;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: space-between;
9 | @include transition-opacity-transform;
10 | }
11 |
12 | .subtitle {
13 | display: flex;
14 | }
15 |
16 | .tryThis {
17 | color: $green-light;
18 | }
19 |
20 | .toTheLeft {
21 | transform: translateX(-18px);
22 | }
23 |
24 | .hidden {
25 | opacity: 0;
26 | }
27 |
28 | .voiceTip {
29 | width: 448px;
30 | height: 304px;
31 | }
32 |
--------------------------------------------------------------------------------
/@spotify-internal/ubi-logger-js/src/ubi.js:
--------------------------------------------------------------------------------
1 | import { UBILogger } from './loggers/UBILogger';
2 | export const UBI = (function fn() {
3 | let ubiLogger;
4 | function initUBILogger(options) {
5 | if (ubiLogger) {
6 | ubiLogger.unregisterEventListeners();
7 | }
8 | ubiLogger = new UBILogger(options);
9 | ubiLogger.registerEventListeners();
10 | return ubiLogger;
11 | }
12 | return {
13 | getUBILogger: function getUBILoggerFn(options) {
14 | return initUBILogger(options);
15 | },
16 | };
17 | })();
18 |
--------------------------------------------------------------------------------
/component/Modals/LoginRequired.tsx:
--------------------------------------------------------------------------------
1 | import styles from './Modal.module.scss';
2 | import { SpotifyLogo } from 'component/CarthingUIComponents';
3 |
4 | const LoginRequired = () => {
5 | return (
6 |
7 |
8 |
未登录
9 |
10 |
11 | 要使用 Car Thing ，您需要在您的手机上登陆 Spotify 应用程序。
12 |
13 |
14 |
12 |
13 | {icon}
14 |
15 | {name}
16 |
17 |
18 |
8 |
11 |
12 | 在您的手机下载最新版本并重新连接到 Car Thing 时，安装将继续进行。
13 |
14 |
12 |
13 |
16 |
17 | );
18 | };
19 |
20 | export default IconShuffleActive;
21 |
--------------------------------------------------------------------------------
/component/Presets/PresetCard/PresetContent.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | $preset-card-width: 168px;
4 |
5 | .presetTitle {
6 | margin-top: 24px;
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | white-space: nowrap;
11 |
12 | div {
13 | overflow: hidden;
14 | text-overflow: ellipsis;
15 | padding: 0;
16 | text-align: center;
17 | }
18 |
19 | .title {
20 | width: $preset-card-width;
21 | color: $opacity-white-70;
22 | }
23 |
24 | .active {
25 | color: $white;
26 | }
27 |
28 | .subtitle {
29 | width: $preset-card-width;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/component/NightMode/NightModeUbiLogger.ts:
--------------------------------------------------------------------------------
1 | import UbiLogger from 'eventhandler/UbiLogger';
2 | import { createCarNightModeCarthingosEventFactory } from '@spotify-internal/ubi-sdk-music-car-night-mode-carthingos';
3 |
4 | class NightModeUbiLogger {
5 | ubiLogger: UbiLogger;
6 |
7 | constructor(ubiLogger: UbiLogger) {
8 | this.ubiLogger = ubiLogger;
9 | }
10 |
11 | logNightModeImpression = (reason: string) => {
12 | const event = createCarNightModeCarthingosEventFactory({
13 | data: { reason: reason },
14 | }).impression();
15 | this.ubiLogger.logImpression(event);
16 | };
17 | }
18 |
19 | export default NightModeUbiLogger;
20 |
--------------------------------------------------------------------------------
/component/Npv/Npv.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .npv {
4 | position: relative;
5 | width: $device-width;
6 | height: $device-height;
7 | overflow: hidden;
8 | transition-delay: $duration-default;
9 | }
10 |
11 | .controlsContainer {
12 | height: 144px;
13 | position: absolute;
14 | width: 100%;
15 | bottom: 0;
16 | background: $opacity-black-30;
17 | }
18 |
19 | .enter {
20 | opacity: 0;
21 | }
22 |
23 | .enterActive {
24 | opacity: 1;
25 |
26 | @include transition-opacity;
27 | }
28 |
29 | .exit {
30 | opacity: 1;
31 | }
32 |
33 | .exitActive {
34 | opacity: 0;
35 |
36 | @include transition-opacity;
37 | }
38 |
--------------------------------------------------------------------------------
/component/Npv/PlayingInfo/PlayingInfoHeader.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from 'context/store';
2 | import { observer } from 'mobx-react-lite';
3 | import styles from './PlayingInfoHeader.module.scss';
4 |
5 | const PlayingInfoHeader = () => {
6 | const uiState = useStore().npvStore.playingInfoUiState;
7 |
8 | return (
9 |
10 |
15 | {uiState.contextHeaderTitle}
16 |
17 |
21 | {children}
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/component/Npv/OtherMedia/OtherMediaUiState.ts:
--------------------------------------------------------------------------------
1 | import PlayerStore from 'store/PlayerStore';
2 | import SessionStateStore from 'store/SessionStateStore';
3 |
4 | export const createOtherMediaUiState = (
5 | playerStore: PlayerStore,
6 | sessionStateStore: SessionStateStore,
7 | ) => ({
8 | get shouldShowContent() {
9 | return sessionStateStore.isLoggedIn;
10 | },
11 | get currentItem() {
12 | return playerStore.currentTrack;
13 | },
14 | get otherActiveApp() {
15 | return playerStore.otherActiveApp;
16 | },
17 | get title() {
18 | return playerStore.currentTrack.name;
19 | },
20 | get subtitle() {
21 | return this.currentItem.artist.name;
22 | },
23 | });
24 |
--------------------------------------------------------------------------------
/@spotify-internal/uri/src/enums/prefix.js:
--------------------------------------------------------------------------------
1 | /**
2 | * The URI prefix for URIs.
3 | */
4 | export const URI_PREFIX = 'spotify:';
5 | /**
6 | * The URL prefix for Play.
7 | */
8 | export const PLAY_HTTP_PREFIX = 'http://play.spotify.com/';
9 | /**
10 | * The HTTPS URL prefix for Play.
11 | */
12 | export const PLAY_HTTPS_PREFIX = 'https://play.spotify.com/';
13 | /**
14 | * The URL prefix for Open.
15 | */
16 | export const OPEN_HTTP_PREFIX = 'http://open.spotify.com/';
17 | /**
18 | * The HTTPS URL prefix for Open.
19 | */
20 | export const OPEN_HTTPS_PREFIX = 'https://open.spotify.com/';
21 | /**
22 | * The path prefix for paths without domain prefix.
23 | */
24 | export const PATH_PREFIX = '/';
25 |
--------------------------------------------------------------------------------
/component/Modals/NonSupportedType.tsx:
--------------------------------------------------------------------------------
1 | import { IconExclamationAlt } from '@spotify-internal/encore-web';
2 | import LegacyModal from 'component/Modals/LegacyModal';
3 | import styles from './NonSupportedType.module.scss';
4 |
5 | const NonSupportedType = () => {
6 | return (
7 |
8 |
12 |
13 |
14 | 歌曲界面不适用于专辑电台
15 |
16 |
12 |
16 | 按住预设按钮来保存正在播放的内容
17 |
18 |
19 | );
20 | };
21 |
22 | export default observer(PresetPlaceholder);
23 |
--------------------------------------------------------------------------------
/component/Presets/SavingPresetFailed.tsx:
--------------------------------------------------------------------------------
1 | import styles from 'component/Modals/Modal.module.scss';
2 | import savingPresetStyles from './SavingPresetFailed.module.scss';
3 |
4 | import { IconExclamationAlt } from '@spotify-internal/encore-web';
5 | import Type from 'component/CarthingUIComponents/Type/Type';
6 |
7 | const SavingPresetFailed = () => {
8 | return (
9 |
10 |
11 |
12 |
13 | 当前无法保存到预设。
14 | 请稍后再试。
15 |
16 |
17 |
14 |
15 | 已连接
16 |
17 |
18 | 配置过程将在 Spotify 应用程序内继续进行。
19 |
20 |
15 |
16 |
17 |
18 |
19 |
20 |
20 |
26 |
27 | );
28 | };
29 |
30 | export default observer(VolumeBar);
31 |
--------------------------------------------------------------------------------
/component/Presets/PresetIndicator/PresetNumberIndicator.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .presetTopWrapper {
4 | width: 200px;
5 | margin: 0 auto;
6 | display: flex;
7 | flex-direction: column;
8 | align-items: center;
9 | z-index: $overlay-z-index + 1;
10 | }
11 |
12 | .presetIndicator {
13 | width: 80px;
14 | height: 4px;
15 | background: $opacity-white-30;
16 | clip-path: inset(0 0 0 0 round 0 0 4px 4px);
17 | }
18 |
19 | .presetNumber {
20 | margin: 16px 0 32px;
21 |
22 | .number {
23 | color: $opacity-white-70;
24 | }
25 | }
26 |
27 | .active {
28 | z-index: $overlay-z-index + 1;
29 |
30 | .presetNumber .number {
31 | color: $white;
32 | }
33 |
34 | .presetIndicator {
35 | background-color: $green-light;
36 | @include transition-background-color;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/component/Settings/PowerTutorial/PowerTutorial.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from 'context/store';
2 | import { useEffect } from 'react';
3 | import styles from './PowerTutorial.module.scss';
4 | import Type from '../../CarthingUIComponents/Type/Type';
5 |
6 | const PowerTutorial = () => {
7 | const {
8 | ubiLogger: { settingsUbiLogger },
9 | } = useStore();
10 |
11 | useEffect(() => {
12 | settingsUbiLogger.logPowerOffTutorialImpression();
13 | }, [settingsUbiLogger]);
14 |
15 | return (
16 |
17 |
18 | 打开/关闭电源
19 |
20 |
21 | 若要进行打开/关闭电源操作，请按住设备顶部的“设置”按钮。
22 |
23 |
24 | );
25 | };
26 |
27 | export default PowerTutorial;
28 |
--------------------------------------------------------------------------------
/@spotify-internal/encore-web/es/styles/mixins/localization.js:
--------------------------------------------------------------------------------
1 | import { css } from 'styled-components';
2 | /* Apply this mixin to elements with `display: flex` or `display: inline-flex` applied to properly
3 | support the break-word behavior (i.e. it will break long words only when absolutely necessary).
4 | We can transition to just applying `break-word: anywhere` once it is supported by Safari, but
5 | until then, this mixin allows us to fall back to the deprecated-but-supported `word-break`
6 | solution instead.
7 |
8 | For non-flex-container elements, apply `overflow-wrap: break-word'` directly instead.
9 | */
10 |
11 | export var overflowWrapFlexText = function overflowWrapFlexText() {
12 | return css(["@supports (overflow-wrap:anywhere){overflow-wrap:anywhere;}@supports not (overflow-wrap:anywhere){word-break:break-word;}"]);
13 | };
--------------------------------------------------------------------------------
/component/Onboarding/BackPressBanner.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .banner {
4 | z-index: $onboarding-tactile-z-index;
5 | position: absolute;
6 | width: 351px;
7 | height: 96px;
8 | right: -45px;
9 | bottom: 24px;
10 | background: $white;
11 | border-radius: 48px;
12 | display: flex;
13 | align-items: center;
14 | padding: 0 40px;
15 |
16 | span {
17 | color: $black;
18 | font-weight: 700;
19 |
20 | @include text-style(36px, 40px, -0.02em);
21 | }
22 |
23 | svg {
24 | color: $green;
25 | margin-left: 30px;
26 | animation: ani 1.7s infinite;
27 | }
28 | }
29 |
30 | @keyframes ani {
31 | 0% {
32 | transform: scale(2.6);
33 | }
34 |
35 | 50% {
36 | transform: scale(2.6) translateX(8px);
37 | }
38 |
39 | 100% {
40 | transform: scale(2.6);
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/component/CarthingUIComponents/NowPlaying/NowPlaying.tsx:
--------------------------------------------------------------------------------
1 | import styles from 'component/CarthingUIComponents/NowPlaying/NowPlaying.module.scss';
2 | import Equaliser from 'component/CarthingUIComponents/Equaliser/Equaliser';
3 | import Type, { TypeName } from 'component/CarthingUIComponents/Type/Type';
4 | import { greenLight } from 'style/Variables';
5 |
6 | export type Props = {
7 | playing?: boolean;
8 | textName: TypeName;
9 | };
10 | const NowPlaying = ({ playing = false, textName }: Props) => {
11 | return (
12 |
13 |
14 |
19 | 当前播放
20 |
21 |
22 | );
23 | };
24 |
25 | export default NowPlaying;
26 |
--------------------------------------------------------------------------------
/component/Npv/PodcastSpeedOptions/PodcastSpeedOptions.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .podcastSpeedOverlay {
4 | z-index: $overlay-z-index + 1;
5 | background-color: $black;
6 | }
7 |
8 | .podcastSpeedOptions {
9 | width: $device-width;
10 | height: $device-height;
11 | border-radius: 0;
12 | position: relative;
13 | top: 0;
14 | left: 0;
15 | background: $black;
16 |
17 | @include transition-transform;
18 |
19 | &.smallHeader {
20 | transform: translateY(-48px);
21 | }
22 | }
23 |
24 | .header {
25 | height: 152px;
26 | width: 100%;
27 | display: flex;
28 | align-items: center;
29 | padding: 0 40px;
30 | }
31 |
32 | .title {
33 | @include transition-transform;
34 |
35 | transform-origin: left;
36 |
37 | &.smallTitle {
38 | transform: translateY(24px) scale(calc(32 / 44));
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/hocs/withStore.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentType } from 'react';
2 | import { RootStoreProps } from 'store/RootStore';
3 | import { useStore } from 'context/store';
4 | import hoistNonReactStatics from 'hoist-non-react-statics';
5 |
6 | function getDisplayName(WrappedComponent) {
7 | return WrappedComponent.displayName || WrappedComponent.name || 'Component';
8 | }
9 |
10 | const withStore = (WrappedComponent: ComponentType
) => {
11 | const WithStore = (props: Omit) => {
12 | const store = useStore();
13 | //@ts-ignore
14 | return ;
15 | };
16 | WithStore.displayName = `WithStore(${getDisplayName(WrappedComponent)})`;
17 |
18 | hoistNonReactStatics(WithStore, WrappedComponent);
19 |
20 | return WithStore;
21 | };
22 |
23 | export default withStore;
24 |
--------------------------------------------------------------------------------
/component/Setup/Failed.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import styles from './Failed.module.scss';
3 | import { useStore } from 'context/store';
4 | import { SetupView } from 'store/SetupStore';
5 |
6 | const Failed = () => {
7 | const { hardwareStore } = useStore();
8 | const [rebootSelected, setRebootSelected] = useState(false);
9 | return (
10 | {
14 | if (!rebootSelected) {
15 | hardwareStore.reboot();
16 | setRebootSelected(true);
17 | }
18 | }}
19 | >
20 |
请再试一次
21 |
22 | Car Thing 无法完成更新，请确保您的手机具备网络链接后点击屏幕任意位置进行重试。
23 |
24 |
15 |
16 |
配对中...
17 |
18 | 确认您在手机上看到以下代码。
19 |
20 |
{bluetoothStore.pin}
21 |
15 |
16 |
需要高级账户
17 |
18 |
19 | 要使用 Car Thing，您需要在手机上登录 Spotify Premium 或 Premium Family 帐户。
20 |
21 |
22 |
10 |
嗨！欢迎使用 Car Thing。
11 |
12 |
马上开始
13 |
18 |
19 |
20 |
21 |
27 |
{getTextBasedOnUri(contextUri)}
28 |
18 |
配对代码
19 |
20 |
21 | 在 Spotify 应用内确认您已看见配对代码。
22 |
23 |
24 | {parsePincode(bluetoothStore.bluetoothPairingPin)}
25 |
26 |
27 |
25 |
38 |
39 | );
40 |
41 | export default Spinner;
42 |
--------------------------------------------------------------------------------
/component/Settings/RestartConfirm/RestartConfirm.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from 'context/store';
2 | import { useEffect } from 'react';
3 | import styles from './RestartConfirm.module.scss';
4 | import { Button, ButtonType } from 'component/CarthingUIComponents';
5 |
6 | const RestartConfirm = () => {
7 | const {
8 | hardwareStore,
9 | ubiLogger: { settingsUbiLogger },
10 | } = useStore();
11 |
12 | useEffect(() => {
13 | settingsUbiLogger.logRestartConfirmDialogImpression();
14 | }, [settingsUbiLogger]);
15 |
16 | const reboot = () => {
17 | settingsUbiLogger.logRestartConfirmButtonClick();
18 | hardwareStore.reboot();
19 | };
20 |
21 | return (
22 |
23 |
重启
24 |
25 | 您确定要重启设备吗？
26 |
27 |
30 |
19 |
20 | {uiState.trackPlayedTime}
21 | - {uiState.trackLeftTime}
22 |
23 |
27 |
28 |
29 |
30 |
31 | );
32 | };
33 |
34 | export default Main;
35 |
--------------------------------------------------------------------------------
/component/Npv/ControlButtons/LikeTrack.tsx:
--------------------------------------------------------------------------------
1 | import { IconHeart48, IconHeartActive48 } from 'component/CarthingUIComponents';
2 | import { NpvIcon } from 'component/Npv/ControlButtons/Controls';
3 | import { useStore } from 'context/store';
4 | import { observer } from 'mobx-react-lite';
5 | import ControlButton from './ControlButton';
6 |
7 | const LikeTrack = () => {
8 | const uiState = useStore().npvStore.controlButtonsUiState;
9 | const { playerStore } = useStore();
10 | return (
11 | <>
12 | {uiState.isSaved ? (
13 |
18 |
19 |
20 | ) : (
21 |
26 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default observer(LikeTrack);
34 |
--------------------------------------------------------------------------------
/component/Npv/PlayingInfoOrTip/PlayingInfoOrTip.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .playingInfoOrTip {
4 | height: 332px;
5 | width: 100%;
6 | }
7 |
8 | .playingInfoEnter {
9 | opacity: 0;
10 | transform: translateY(40px);
11 | }
12 |
13 | .playingInfoEnterActive {
14 | @include transition-opacity-transform(300ms, ease-in);
15 |
16 | opacity: 1;
17 | transform: translateY(0);
18 | }
19 |
20 | .playingInfoExit {
21 | opacity: 1;
22 | }
23 |
24 | .playingInfoExitActive {
25 | @include transition-opacity-transform(300ms, ease-out);
26 |
27 | opacity: 0;
28 | transform: translateY(40px);
29 | }
30 |
31 | .tipEnter {
32 | opacity: 0;
33 | transform: translateY(72px);
34 | }
35 |
36 | .tipEnterActive {
37 | @include transition-opacity-transform(300ms, ease-in);
38 |
39 | opacity: 1;
40 | transform: translateY(0);
41 | }
42 |
43 | .tipExit {
44 | opacity: 1;
45 | transform: translateY(0);
46 | }
47 |
48 | .tipExitActive {
49 | @include transition-opacity-transform(300ms, ease-out);
50 |
51 | opacity: 0;
52 | transform: translateY(72px);
53 | }
54 |
--------------------------------------------------------------------------------
/component/Main.tsx:
--------------------------------------------------------------------------------
1 | import Views from 'component/Views/Views';
2 | import { useStore } from 'context/store';
3 | import { useEffect } from 'react';
4 | import SwipeDownHandle from 'component/SwipeDownHandle/SwipeDownHandle';
5 | import Overlays from 'component/Overlays/Overlays';
6 | import { action } from 'mobx';
7 |
8 | const Main = () => {
9 | const { npvStore, shelfStore, overlayController, viewStore } = useStore();
10 |
11 | useEffect(() => {
12 | setTimeout(() => overlayController.maybeShowAModal(), 2000);
13 | }, [overlayController]);
14 |
15 | const handlePointerDown = action(() => {
16 | if (viewStore.isNpv && !overlayController.anyOverlayIsShowing) {
17 | npvStore.tipsUiState.dismissVisibleTip();
18 | }
19 | });
20 |
21 | const handleClick = action(() => {
22 | shelfStore.shelfController.voiceMuteBannerUiState.dismissVoiceBanner();
23 | });
24 |
25 | return (
26 |
27 |
28 |
29 |
30 |
31 | );
32 | };
33 |
34 | export default Main;
35 |
--------------------------------------------------------------------------------
/component/Queue/QueueHeader/QueueHeader.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite';
2 | import styles from './QueueHeader.module.scss';
3 | import classNames from 'classnames';
4 | import { useStore } from 'context/store';
5 | import Type from 'component/CarthingUIComponents/Type/Type';
6 |
7 | const QueueHeader = () => {
8 | const uiState = useStore().queueStore.queueUiState;
9 |
10 | return (
11 |
18 |
23 |
29 | {uiState.headerText}
30 |
31 |
32 |
23 |
24 |
25 | 返回 Spotify
26 |
27 |
28 | );
29 | };
30 |
31 | export default observer(BackToSpotify);
32 |
--------------------------------------------------------------------------------
/@spotify-internal/uri/src/_internal/helpers.js:
--------------------------------------------------------------------------------
1 | import { URIFormat } from '../enums/uri_format';
2 | /**
3 | * Encodes a component according to a URIformat.
4 | *
5 | * @param component - A component string.
6 | * @param format - A URIformat.
7 | * @return An encoded component string.
8 | */
9 | export function encodeComponent(component, format) {
10 | if (!component) {
11 | return '';
12 | }
13 | let encodedComponent = encodeURIComponent(component);
14 | if (format === URIFormat.URI) {
15 | encodedComponent = encodedComponent.replace(/%20/g, '+');
16 | }
17 | // encode characters that are not encoded by default by encodeURIComponent
18 | // but that the Spotify URI spec encodes: !'*()
19 | encodedComponent = encodedComponent.replace(/[!'()]/g, escape);
20 | encodedComponent = encodedComponent.replace(/\*/g, '%2A');
21 | return encodedComponent;
22 | }
23 | export function decodeComponent(component, format) {
24 | if (!component) {
25 | return '';
26 | }
27 | const part = format === URIFormat.URI ? component.replace(/\+/g, '%20') : component;
28 | return decodeURIComponent(part);
29 | }
30 |
--------------------------------------------------------------------------------
/component/AmbientBackdrop/AmbientBackdrop.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from 'context/store';
2 | import { get } from 'mobx';
3 | import { observer } from 'mobx-react-lite';
4 | import { useRef } from 'react';
5 | import styles from './AmbientBackdrop.module.scss';
6 |
7 | type Props = {
8 | imageId?: string;
9 | getBackgroundStyleAttribute: (currentColor: number[]) => string;
10 | };
11 |
12 | const AmbientBackdrop = ({ getBackgroundStyleAttribute, imageId }: Props) => {
13 | const backdropRef = useRef(null);
14 | const { imageStore } = useStore();
15 |
16 | if (imageId) {
17 | imageStore.loadColor(imageId);
18 | }
19 |
20 | const currentColor = get(imageStore.colors, imageId);
21 | let background = 'black';
22 |
23 | if (currentColor) {
24 | background = getBackgroundStyleAttribute(currentColor);
25 | } else if (backdropRef.current) {
26 | background = backdropRef.current.style.background;
27 | }
28 |
29 | return (
30 |
35 | );
36 | };
37 |
38 | export default observer(AmbientBackdrop);
39 |
--------------------------------------------------------------------------------
/component/Queue/QueueListItem/QueueListItem.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | $track-info-width: 528px;
4 | $track-info-margin-left: 32px;
5 |
6 | .queueListItem {
7 | @include transition-background-opacity;
8 |
9 | width: 100%;
10 | height: 100%;
11 | display: flex;
12 | align-items: center;
13 | }
14 |
15 | .imageContainer {
16 | margin-left: 40px;
17 | }
18 |
19 | .image {
20 | height: 96px;
21 | width: 96px;
22 | }
23 |
24 | .trackInfo {
25 | width: $track-info-width;
26 | margin-left: $track-info-margin-left;
27 | }
28 |
29 | .title {
30 | overflow: hidden;
31 | text-overflow: ellipsis;
32 | white-space: nowrap;
33 | margin-bottom: 8px;
34 | opacity: 0.7;
35 |
36 | &.currentlyPlaying {
37 | color: $green-light;
38 | }
39 | }
40 |
41 | .subtitle {
42 | overflow: hidden;
43 | text-overflow: ellipsis;
44 | white-space: nowrap;
45 | }
46 |
47 | .selected {
48 | background: $opacity-white-10;
49 |
50 | .title {
51 | opacity: 1;
52 | }
53 |
54 | &.pressed {
55 | opacity: 0.5;
56 | }
57 | }
58 |
59 | .pressed {
60 | background: $opacity-white-10;
61 | opacity: 0.5;
62 | }
63 |
--------------------------------------------------------------------------------
/@spotify-internal/encore-foundation/index.js:
--------------------------------------------------------------------------------
1 | export * from "./web/tokens.es6.js";
2 | export * from "./themes/themes.es6.js";
3 | export { ballad as desktopBallad, balladBold as desktopBalladBold, viola as desktopViola, violaBold as desktopViolaBold, mesto as desktopMesto, mestoBold as desktopMestoBold, bass as desktopBass, forte as desktopForte, brio as desktopBrio, metronome as desktopMetronome, minuet as desktopMinuet, minuetBold as desktopMinuetBold, finale as desktopFinale, finaleBold as desktopFinaleBold, altoBrio as desktopAltoBrio, alto as desktopAlto, canon as desktopCanon, celloCanon as desktopCelloCanon, cello as desktopCello } from "./desktop/tokens.es6.js";
4 | export { ballad as mobileBallad, balladBold as mobileBalladBold, viola as mobileViola, violaBold as mobileViolaBold, mesto as mobileMesto, mestoBold as mobileMestoBold, bass as mobileBass, forte as mobileForte, brio as mobileBrio, finale as mobileFinale, finaleBold as mobileFinaleBold, minuet as mobileMinuet, minuetBold as mobileMinuetBold, metronome as mobileMetronome, altoBrio as mobileAltoBrio, alto as mobileAlto, canon as mobileCanon, celloCanon as mobileCelloCanon, cello as mobileCello } from "./mobile/tokens.es6.js";
5 |
--------------------------------------------------------------------------------
/@spotify-internal/encore-foundation/desktop/index.js:
--------------------------------------------------------------------------------
1 | export * from "./web/tokens.es6.js";
2 | export * from "./themes/themes.es6.js";
3 | export { ballad as desktopBallad, balladBold as desktopBalladBold, viola as desktopViola, violaBold as desktopViolaBold, mesto as desktopMesto, mestoBold as desktopMestoBold, bass as desktopBass, forte as desktopForte, brio as desktopBrio, metronome as desktopMetronome, minuet as desktopMinuet, minuetBold as desktopMinuetBold, finale as desktopFinale, finaleBold as desktopFinaleBold, altoBrio as desktopAltoBrio, alto as desktopAlto, canon as desktopCanon, celloCanon as desktopCelloCanon, cello as desktopCello } from "./desktop/tokens.es6.js";
4 | export { ballad as mobileBallad, balladBold as mobileBalladBold, viola as mobileViola, violaBold as mobileViolaBold, mesto as mobileMesto, mestoBold as mobileMestoBold, bass as mobileBass, forte as mobileForte, brio as mobileBrio, finale as mobileFinale, finaleBold as mobileFinaleBold, minuet as mobileMinuet, minuetBold as mobileMinuetBold, metronome as mobileMetronome, altoBrio as mobileAltoBrio, alto as mobileAlto, canon as mobileCanon, celloCanon as mobileCelloCanon, cello as mobileCello } from "./mobile/tokens.es6.js";
5 |
--------------------------------------------------------------------------------
/component/CarthingUIComponents/AppendEllipsis/AppendEllipsis.module.scss:
--------------------------------------------------------------------------------
1 | .dot {
2 | margin-left: 4px;
3 | animation-duration: 4s;
4 | animation-iteration-count: infinite;
5 | animation-timing-function: steps(1);
6 | }
7 |
8 | .dot1 {
9 | animation-name: dot1;
10 | }
11 |
12 | .dot2 {
13 | animation-name: dot2;
14 | }
15 |
16 | .dot3 {
17 | animation-name: dot3;
18 | }
19 |
20 | @keyframes dot1 {
21 | 0% {
22 | opacity: 0;
23 | }
24 |
25 | 25% {
26 | opacity: 1;
27 | }
28 |
29 | 50% {
30 | opacity: 1;
31 | }
32 |
33 | 75% {
34 | opacity: 1;
35 | }
36 |
37 | 100% {
38 | opacity: 0;
39 | }
40 | }
41 |
42 | @keyframes dot2 {
43 | 0% {
44 | opacity: 0;
45 | }
46 |
47 | 25% {
48 | opacity: 0;
49 | }
50 |
51 | 50% {
52 | opacity: 1;
53 | }
54 |
55 | 75% {
56 | opacity: 1;
57 | }
58 |
59 | 100% {
60 | opacity: 0;
61 | }
62 | }
63 |
64 | @keyframes dot3 {
65 | 0% {
66 | opacity: 0;
67 | }
68 |
69 | 25% {
70 | opacity: 0;
71 | }
72 |
73 | 50% {
74 | opacity: 0;
75 | }
76 |
77 | 75% {
78 | opacity: 1;
79 | }
80 |
81 | 100% {
82 | opacity: 0;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/component/Npv/PlayingInfo/PlayingInfoTitles/PlayingInfoTitles.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | $info-container-width: 432px;
4 |
5 | .transitionContainer {
6 | position: absolute;
7 | }
8 |
9 | .texts {
10 | margin-top: 16px;
11 | }
12 |
13 | .songTitle {
14 | color: $white;
15 | font-weight: bold;
16 | width: $info-container-width;
17 | text-overflow: ellipsis;
18 | overflow: hidden;
19 | display: -webkit-box;
20 | word-break: break-word;
21 | -webkit-line-clamp: 3;
22 | -webkit-box-orient: vertical;
23 | padding-bottom: 5px;
24 | }
25 |
26 | .songTitleBig {
27 | @include text-style(72px, 72px, -0.03em);
28 | }
29 |
30 | .songTitleMiddle {
31 | @include text-style(52px, 56px, -0.03em);
32 | }
33 |
34 | .songTitleSmall {
35 | @include text-style(44px, 47px, -0.02em);
36 |
37 | max-height: 144px;
38 | }
39 |
40 | .artistTitle {
41 | @include text-style(36px, 40px, -0.01em);
42 |
43 | max-height: 80px;
44 | margin-top: 16px;
45 | width: $info-container-width;
46 | text-overflow: ellipsis;
47 | overflow: hidden;
48 | white-space: nowrap;
49 | position: relative;
50 | color: $white;
51 | padding-bottom: 3px;
52 | }
53 |
--------------------------------------------------------------------------------
/component/Settings/Submenu/SubmenuItem.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .item {
4 | @include transition-background-opacity;
5 |
6 | display: flex;
7 | justify-content: space-between;
8 | align-items: center;
9 | padding: 0 32px;
10 | height: 96px;
11 | color: $white;
12 | opacity: 0.7;
13 |
14 | @include transition-margin-right-opacity;
15 | }
16 |
17 | .disabled {
18 | opacity: 0.3;
19 | }
20 |
21 | .pressed {
22 | background: $opacity-white-10;
23 | opacity: 0.5;
24 | }
25 |
26 | .onOffToggle {
27 | text-align: center;
28 | margin-right: 13px;
29 | color: $white;
30 | opacity: 0.5;
31 | @include transition-transform;
32 | }
33 |
34 | .keyValueValue {
35 | @include transition-transform;
36 |
37 | color: $white;
38 | }
39 |
40 | .movedForDial {
41 | transform: translateX(-56px);
42 | }
43 |
44 | .green {
45 | color: $green-light;
46 | opacity: 0.7;
47 | }
48 |
49 | .white70 {
50 | color: $white-70;
51 | }
52 |
53 | .active:not(.disabled) {
54 | background: $opacity-white-10;
55 | opacity: 1;
56 |
57 | &.pressed {
58 | opacity: 0.5;
59 | }
60 |
61 | .onOffToggle {
62 | opacity: 1;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/component/Shelf/VoiceMutedbanner/VoiceMutedBanner.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite';
2 | import { useStore } from 'context/store';
3 | import Banner from 'component/CarthingUIComponents/Banner/Banner';
4 | import BannerButton from 'component/CarthingUIComponents/Banner/BannerButton';
5 | import { IconMicOff32 } from 'component/CarthingUIComponents';
6 | import { useEffect } from 'react';
7 | import { runInAction } from 'mobx';
8 |
9 | const VoiceMutedBanner = () => {
10 | const uiState = useStore().shelfStore.shelfController.voiceMuteBannerUiState;
11 |
12 | useEffect(() => {
13 | runInAction(() => {
14 | if (uiState.shouldShowAlert) {
15 | uiState.logImpression();
16 | }
17 | });
18 | });
19 |
20 | const infoText = 'Turn on your mic to make voice requests.';
21 |
22 | const icon = ;
23 |
24 | return (
25 |
26 | uiState.handleClickUnmute()}
30 | />
31 |
32 | );
33 | };
34 |
35 | export default observer(VoiceMutedBanner);
36 |
--------------------------------------------------------------------------------
/component/LazyImage/LazyImage.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | .imageCenter {
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 |
9 | .outerBorder {
10 | @include transition-border-color;
11 |
12 | border-color: transparent;
13 |
14 | &.outerBorderActive {
15 | box-sizing: content-box;
16 | border: 4px solid;
17 | padding: 6px;
18 | }
19 | }
20 |
21 | .innerBorder {
22 | &.episode {
23 | border-radius: 16px;
24 | border: 20px solid;
25 | }
26 |
27 | &.track {
28 | border: 20px solid;
29 | }
30 | }
31 |
32 | .image {
33 | max-height: 100%;
34 | max-width: 100%;
35 | object-fit: cover;
36 | transform-origin: top left;
37 |
38 | &.shaded {
39 | filter: brightness(30%);
40 | }
41 | &.track {
42 | border-radius: 16px;
43 | }
44 | }
45 |
46 | .radioStation {
47 | position: relative;
48 | height: 100%;
49 | width: 100%;
50 |
51 | .radioStationBg {
52 | position: absolute;
53 | top: 0;
54 | left: 0;
55 | }
56 |
57 | .imageRadio {
58 | position: absolute;
59 | margin: auto;
60 | top: 0;
61 | left: 0;
62 | bottom: 0;
63 | right: 0;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/component/Npv/PlayingInfo/PlayingInfo.module.scss:
--------------------------------------------------------------------------------
1 | @import 'style/variables.module';
2 |
3 | $info-container-width: 432px;
4 | $info-container-height: 248px;
5 |
6 | .playingInfo {
7 | height: 100%;
8 | width: 100%;
9 | padding: 40px 40px 48px;
10 | display: flex;
11 | }
12 |
13 | .animationEnterLeft {
14 | opacity: 0;
15 | transform: translateX(-24px);
16 | }
17 |
18 | .animationEnterRight {
19 | opacity: 0;
20 | transform: translateX(24px);
21 | }
22 |
23 | .animationEnterActive {
24 | opacity: 1;
25 | transform: translateX(0);
26 |
27 | @include transition-opacity-transform;
28 | }
29 |
30 | .animationExit {
31 | opacity: 1;
32 | transform: translateX(0);
33 | }
34 |
35 | .animationExitLeft {
36 | opacity: 0;
37 | transform: translateX(-24px);
38 |
39 | @include transition-opacity-transform;
40 | }
41 |
42 | .animationExitRight {
43 | opacity: 0;
44 | transform: translateX(24px);
45 |
46 | @include transition-opacity-transform;
47 | }
48 |
49 | .info {
50 | margin-left: 34px;
51 | width: $info-container-width;
52 | height: $info-container-height;
53 | }
54 |
55 | .playingInfoHeader {
56 | display: flex;
57 | justify-content: space-between;
58 | height: 32px;
59 | }
60 |
--------------------------------------------------------------------------------
/component/PhoneCall/PhoneCallTimer.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite';
2 | import styles from 'component/PhoneCall/PhoneCallTimer.module.scss';
3 | import { useStore } from 'context/store';
4 | import { CSSTransition } from 'react-transition-group';
5 | import CountUpTimer from 'component/CountUpTimer/CountUpTimer';
6 | import Type from 'component/CarthingUIComponents/Type/Type';
7 | import { transitionDurationMs } from 'style/Variables';
8 |
9 | const transitionStyles = {
10 | enter: styles.enter,
11 | enterActive: styles.enterActive,
12 | exit: styles.exit,
13 | exitActive: styles.exitActive,
14 | };
15 |
16 | const PhoneCallTimer = () => {
17 | const uiState = useStore().phoneCallController.phoneCallUiState;
18 |
19 | return (
20 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | );
33 | };
34 |
35 | export default observer(PhoneCallTimer);
36 |
--------------------------------------------------------------------------------
/component/OtaUpdating/OtaUpdating.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite';
2 |
3 | import styles from './OtaUpdating.module.scss';
4 | import { useStore } from 'context/store';
5 | import AppendEllipsis from 'component/CarthingUIComponents/AppendEllipsis/AppendEllipsis';
6 |
7 | const OtaUpdating = () => {
8 | const { otaStore } = useStore();
9 | return (
10 |
11 | {otaStore.error ? (
12 | <>
13 |
更新失败
14 |
15 | 若要重启设备并重试，请拔下设备电源，稍等一段时间后插入即可。
16 |
17 |
18 | ) : (
19 | <>
20 |
23 |
24 | 请保证设备电源供应稳定，不要断开电源。
25 |
26 | {otaStore.transferring && (
27 |
{`${otaStore.transferPercent}%`}
30 | )}
31 |
32 | )}
33 |
16 | {uiState.showWindLevelIcon && (
17 |
18 |
19 |
20 | )}
21 | {uiState.isPlayingSpotify && uiState.onRepeat && (
22 |
23 |
24 |
25 | )}
26 | {uiState.isPlayingSpotify && uiState.onRepeatOnce && (
27 |
28 |
29 |
30 | )}
31 | {uiState.isMicMuted && (
32 |
33 |
34 |
35 | )}
36 |
19 |
20 |
21 |
22 | ) : (
23 |
28 |
29 |
30 |
31 |
32 | )}
33 |
34 | );
35 | };
36 |
37 | export default observer(PlayPause);
38 |
--------------------------------------------------------------------------------
/@spotify-internal/uri/src/_internal/helpers.ts:
--------------------------------------------------------------------------------
1 | import {URIFormat} from '../enums/uri_format';
2 |
3 | /**
4 | * Encodes a component according to a URIformat.
5 | *
6 | * @param component - A component string.
7 | * @param format - A URIformat.
8 | * @return An encoded component string.
9 | */
10 | export function encodeComponent(
11 | component?: string,
12 | format?: URIFormat
13 | ): string {
14 | if (!component) {
15 | return '';
16 | }
17 | let encodedComponent = encodeURIComponent(component);
18 | if (format === URIFormat.URI) {
19 | encodedComponent = encodedComponent.replace(/%20/g, '+');
20 | }
21 |
22 | // encode characters that are not encoded by default by encodeURIComponent
23 | // but that the Spotify URI spec encodes: !'*()
24 | encodedComponent = encodedComponent.replace(/[!'()]/g, escape);
25 | encodedComponent = encodedComponent.replace(/\*/g, '%2A');
26 |
27 | return encodedComponent;
28 | }
29 |
30 | export function decodeComponent(
31 | component?: string,
32 | format?: URIFormat
33 | ): string {
34 | if (!component) {
35 | return '';
36 | }
37 |
38 | const part =
39 | format === URIFormat.URI ? component.replace(/\+/g, '%20') : component;
40 | return decodeURIComponent(part);
41 | }
42 |
--------------------------------------------------------------------------------
/component/Npv/Scrubbing/ScrubbingBar.tsx:
--------------------------------------------------------------------------------
1 | import { useStore } from 'context/store';
2 | import { observer } from 'mobx-react-lite';
3 | import styles from './ScrubbingBar.module.scss';
4 |
5 | /** 30 行开始为定义小图标的代码段 */
6 | /** marginTop 代表了小图标上浮的距离，可以根据小图标主体信息的位置来确定 */
7 | /** img 标签的 height 和 width 两个属性代表了图标的大小，不宜设置过大。 */
8 | /** 如果不需要显示该图标，请删除第 30 - 37 行 */
9 |
10 | const ScrubbingBar = () => {
11 | const uiState = useStore().npvStore.scrubbingUiState;
12 | const { colorChannels } = uiState;
13 |
14 | return (
15 |
22 |
23 |
29 |
30 |
36 |
37 |
38 |
39 |
23 |
24 |
25 |
26 |
27 | {presetNumber}
28 |
29 |
30 |
13 | {uiState.carMode ? (
14 | <>
15 |
16 | 在 {uiState.carMode} 情况下手机音量不可用
17 |
18 |
19 | ) : (
20 | <>
21 |
22 |
25 |
28 | {uiState.isVolumeAbove0 ? : }
29 |
30 |
31 | 手机音量
32 |
33 |
34 |
35 | )}
36 |
47 | {children}
48 |
49 | );
50 | },
51 | );
52 |
53 | export default Type;
54 |
--------------------------------------------------------------------------------
/component/Npv/ControlButtons/ControlButton.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import pointerListenersMaker from 'helpers/PointerListeners';
3 | import { useState } from 'react';
4 | import * as React from 'react';
5 | import styles from './Controls.module.scss';
6 |
7 | type Props = {
8 | id: string;
9 | children?: React.ReactNode;
10 | onClick?: (e?) => void;
11 | fullSize?: boolean;
12 | isDisabled?: boolean;
13 | };
14 |
15 | const ControlButton = ({
16 | id,
17 | onClick,
18 | children,
19 | fullSize = false,
20 | isDisabled = false,
21 | }: Props) => {
22 | const [touchDown, setTouchDown] = useState(false);
23 |
24 | const onClickProps = {
25 | onClick,
26 | ...pointerListenersMaker(setTouchDown),
27 | };
28 |
29 | return (
30 |
31 |
40 | {children}
41 |
42 |
