Skip to content
Permalink
Browse files

Header: Set up & connect to audio/window service

Dynamic titles haven't been set up yet, but I'm getting there.
  • Loading branch information
tvillarete committed Dec 28, 2019
1 parent ceea750 commit 5181f8351bc87e716cd012624fa482ad58d86c64
@@ -2,6 +2,7 @@
"name": "ipod-classic",
"version": "0.1.0",
"private": true,
"homepage": "./",
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@types/jest": "24.0.19",
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,12 @@
<svg width="37" height="18" viewBox="0 0 37 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="28.5" y="5.5" width="8" height="6" rx="0.5" fill="#C4C4C4" stroke="#88A27E"/>
<rect x="0.175" y="0.175" width="33.65" height="17.65" fill="url(#paint0_linear)" stroke="#9BAC8C" stroke-width="0.35"/>
<path d="M0 0H34V8H0V0Z" fill="#D7F4C6"/>
<rect x="0.5" y="0.5" width="33" height="17" stroke="#88A27E"/>
<defs>
<linearGradient id="paint0_linear" x1="17" y1="0" x2="17" y2="18" gradientUnits="userSpaceOnUse">
<stop stop-color="#C8D5A9"/>
<stop offset="1" stop-color="#4EA44B"/>
</linearGradient>
</defs>
</svg>
BIN +902 Bytes public/favicon-16x16.png
Binary file not shown.
Binary file not shown.
BIN -7.13 KB (67%) public/favicon.ico
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,16 @@
<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 20C17 20.5523 16.5523 21 16 21H11C10.4477 21 10 20.5523 10 20L10 1C10 0.447715 10.4477 0 11 0L16 0C16.5523 0 17 0.447715 17 1L17 20Z" fill="url(#paint0_diamond)"/>
<path d="M0 1C0 0.447715 0.447715 3.0261e-07 1 3.0261e-07H6C6.55228 3.0261e-07 7 0.447716 7 1L7 20C7 20.5523 6.55228 21 6 21H1C0.447715 21 0 20.5523 0 20L0 1Z" fill="url(#paint1_diamond)"/>
<defs>
<radialGradient id="paint0_diamond" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(9.91986e-07 11.55) rotate(-5.57864) scale(21.6023 24.598)">
<stop offset="0.0625" stop-color="#3E86AE"/>
<stop offset="0.449441" stop-color="#58C7EF"/>
<stop offset="1" stop-color="#4381A8"/>
</radialGradient>
<radialGradient id="paint1_diamond" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17 9.45) rotate(174.421) scale(21.6023 24.598)">
<stop offset="0.0625" stop-color="#3E86AE"/>
<stop offset="0.449441" stop-color="#58C7EF"/>
<stop offset="1" stop-color="#4381A8"/>
</radialGradient>
</defs>
</svg>
@@ -0,0 +1,10 @@
<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="play" d="M21.5 12.134C22.1667 12.5189 22.1667 13.4811 21.5 13.866L2 25.1244C1.33333 25.5093 0.5 25.0281 0.5 24.2583L0.5 1.74167C0.5 0.971868 1.33333 0.490744 2 0.875644L21.5 12.134Z" fill="url(#paint0_diamond)"/>
<defs>
<radialGradient id="paint0_diamond" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 20.5) rotate(-31.2184) scale(19.2938)">
<stop offset="0.0625" stop-color="#3E86AE"/>
<stop offset="0.449441" stop-color="#58C7EF"/>
<stop offset="1" stop-color="#4381A8"/>
</radialGradient>
</defs>
</svg>
@@ -3,6 +3,7 @@ import styled from "styled-components";
import { WindowOptions } from "services/window";
import { AnimatePresence } from "framer-motion";
import Window from "App/Interface/Window";
import { Header } from "components";

interface ContainerProps {
isHidden: boolean;
@@ -27,6 +28,7 @@ const FullScreenInterface = ({ windowStack }: Props) => {

return (
<Container isHidden={isHidden}>
<Header />
<AnimatePresence>
{windowStack.map((window, index) => (
<Window
@@ -3,6 +3,7 @@ import styled from "styled-components";
import { WindowOptions } from "services/window";
import Window from "App/Interface/Window";
import { AnimatePresence } from "framer-motion";
import { Header } from "components";

const Container = styled.div`
z-index: 2;
@@ -42,6 +43,7 @@ const SplitScreenInterface = ({ windowStack, isHidden }: Props) => {
return (
<Container>
<LeftPanel isHidden={isHidden}>
<Header />
<AnimatePresence>
{windowStack.map((window, index) => (
<Window
@@ -1,18 +1,19 @@
import React from "react";
import styled from "styled-components";
import { WindowOptions } from "services/window";
import { WindowOptions, useWindowService } from "services/window";
import { slideRightAnimation, noAnimation } from "animation";
import { motion } from "framer-motion";

interface ContainerProps {
index: number;
showHeader: boolean;
}

/** Responsible for putting the window at the proper z-index. */
export const Container = styled(motion.div)<ContainerProps>`
z-index: ${props => props.index};
position: absolute;
top: 0;
top: ${props => (props.showHeader ? "20px" : 0)};
bottom: 0;
left: 0;
right: 0;
@@ -26,7 +27,7 @@ interface ContentTransitionContainerProps {
/** Slides the view to the left if it isn't at the top of the stack. */
const ContentTransitionContainer = styled.div<ContentTransitionContainerProps>`
height: 100%;
transition: transform 0.3s;
transition: transform 0.3s;
transform: ${props => props.isHidden && "translateX(-100%)"};
overflow: auto;
`;
@@ -38,12 +39,14 @@ interface Props {
}

const Window = ({ windowStack, index, isHidden }: Props) => {
const { headerTitle } = useWindowService();
const options = windowStack[index];
const firstInStack = index === 0;

return (
<Container
index={index}
showHeader={!!headerTitle}
{...(firstInStack ? noAnimation : slideRightAnimation)}
>
<ContentTransitionContainer isHidden={isHidden}>
@@ -2,7 +2,7 @@ const app = {
init: function() {
this.canvas = document.querySelector("#brickBreakerCanvas");
this.context = this.canvas ? this.canvas.getContext("2d") : null;
this.context.scale(0.39, 0.53);
this.context.scale(0.39, 0.49);

if (!this.context) {
console.log("Error getting application context");
@@ -3,14 +3,15 @@ import { SelectableList, SelectableListOption } from "components";
import { useScrollHandler } from "hooks";
import ViewOptions, { BrickGameView } from "App/views";

const options: SelectableListOption[] = [
{
label: "Brick",
value: () => <BrickGameView />
}
];

const GamesView = () => {
const options: SelectableListOption[] = [
{
label: "Brick",
value: () => <BrickGameView />,
viewId: ViewOptions.brickGame.id
}
];

const [index] = useScrollHandler(ViewOptions.games.id, options);

return <SelectableList options={options} activeIndex={index} />;
@@ -29,7 +29,7 @@ export const ViewOptions: Record<string, ViewOption> = {
artist: { id: "artist", type: WINDOW_TYPE.FULL },
album: { id: "album", type: WINDOW_TYPE.FULL },
nowPlaying: { id: "nowPlaying", type: WINDOW_TYPE.FULL },
brickGame: { id: "brick", type: WINDOW_TYPE.FULL }
brickGame: { id: "brickGame", type: WINDOW_TYPE.FULL }
};

export default ViewOptions;
@@ -19,7 +19,10 @@ export const noAnimation = {
variants: {
closed: {},
open: {},
closing: {}
closing: {
opacity: 0,
transition: { duration: 0.3, type: "tween" }
}
},
initial: "closed",
animate: "open",
@@ -0,0 +1,47 @@
import React from "react";
import styled from "styled-components";
import { useWindowService } from "services/window";
import { useAudioService } from "services/audio";

const Container = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 6px;
height: 20px;
background: linear-gradient(180deg, #feffff 0%, #b1b6b9 100%);
border-bottom: 1px solid #7995a3;
box-sizing: border-box;
`;

const Text = styled.h3`
margin: 0;
font-size: 13px;
`;

const IconContainer = styled.div`
display: flex;
`;

const Icon = styled.img`
max-height: 12px;
margin-left: 8px;
`;

const Header = () => {
const { headerTitle } = useWindowService();
const { playing, source } = useAudioService();

return headerTitle ? (
<Container>
<Text>{headerTitle}</Text>
<IconContainer>
{playing && <Icon src="play.svg" />}
{source && !playing && <Icon src="pause.svg" />}
<Icon src="battery.svg" />
</IconContainer>
</Container>
) : null;
};

export default Header;
@@ -4,6 +4,7 @@ import * as Screen from "./constants/Screen";
export * from "./SelectableList";

export { default as Controls } from "./Controls";
export { default as Header } from "./Header";
export { default as ScrollWheel } from "./ScrollWheel";
export { default as SelectableList } from "./SelectableList";
export { default as LoadingIndicator } from "./LoadingIndicator";
@@ -45,7 +45,7 @@ const useScrollHandler = (
component: View
});
} else {
console.warn("Now viewId:", option)
console.warn("Now viewId:", option);
}

/** If a song is found, play the song. */
@@ -19,6 +19,7 @@ export type WindowOptions<TComponent extends React.ComponentType<any> = any> = {

interface WindowState {
windowStack: WindowOptions[];
headerTitle?: string;
}

type WindowContextType = [
@@ -28,7 +29,8 @@ type WindowContextType = [

const WindowContext = createContext<WindowContextType>([
{
windowStack: []
windowStack: [],
headerTitle: "iPod"
},
() => {}
]);
@@ -44,6 +46,8 @@ export interface WindowServiceHook {
* Useful for enabling/disabling scrolling if a window is hidden.
*/
isWindowActive: (id: string) => boolean;
headerTitle?: string;
setHeaderTitle: (title?: string) => void;
}

/**
@@ -94,11 +98,23 @@ export const useWindowService = (): WindowServiceHook => {
[windowState]
);

const setHeaderTitle = useCallback(
(title?: string) => {
setWindowState({
...windowState,
headerTitle: title
});
},
[setWindowState, windowState]
);

return {
showWindow,
hideWindow,
isWindowActive,
windowStack: windowState.windowStack
windowStack: windowState.windowStack,
headerTitle: windowState.headerTitle,
setHeaderTitle
};
};

@@ -115,7 +131,8 @@ const WindowProvider = ({ children }: Props) => {
}
];
const [windowState, setWindowState] = useState<WindowState>({
windowStack
windowStack,
headerTitle: "iPod"
});

return (

0 comments on commit 5181f83

Please sign in to comment.
You can’t perform that action at this time.