Skip to content

Commit 9cbce33

Browse files
Devcon4Devcon4
committed
work on control bar and setup async imports
1 parent 04dcf41 commit 9cbce33

12 files changed

Lines changed: 13247 additions & 6404 deletions

‎.babelrc‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
"presets": [
33
["@babel/env", {
44
"useBuiltIns": "usage",
5-
"corejs": 3,
6-
"targets": "> 5.0%, not dead"
5+
"corejs": 3
76
}],
87
"@babel/typescript"
98
],

‎.browserslistrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
> 5.0%, not dead

‎package-lock.json‎

Lines changed: 12925 additions & 6364 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"scripts": {
77
"test": "jest",
88
"build": "rollup -c",
9-
"start": "rollup -c -w"
9+
"start": "rollup -c -w --debug"
1010
},
1111
"repository": {
1212
"type": "git",
@@ -25,19 +25,28 @@
2525
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
2626
"@babel/preset-env": "^7.11.5",
2727
"@babel/preset-typescript": "^7.10.4",
28+
"@material/mwc-button": "^0.20.0",
29+
"@material/mwc-dialog": "^0.20.0",
30+
"@material/mwc-icon": "^0.20.0",
31+
"@material/mwc-icon-button": "^0.20.0",
32+
"@material/mwc-slider": "^0.20.0",
2833
"@rollup/plugin-babel": "^5.2.0",
2934
"@rollup/plugin-commonjs": "^15.0.0",
3035
"@rollup/plugin-html": "^0.2.3",
3136
"@rollup/plugin-node-resolve": "^9.0.0",
3237
"@types/jest": "^26.0.12",
38+
"autoprefixer": "^10.2.5",
3339
"core-js": "^3.8.2",
3440
"jest": "^26.4.2",
3541
"lit-element": "^2.4.0",
42+
"postcss": "^8.2.8",
3643
"rollup": "^2.26.9",
3744
"rollup-plugin-copy": "^3.4.0",
3845
"rollup-plugin-delete": "^2.0.0",
3946
"rollup-plugin-dev": "^1.1.3",
4047
"rollup-plugin-minify-html-literals": "^1.2.6",
48+
"rollup-plugin-postcss": "^4.0.0",
49+
"rollup-plugin-postcss-lit": "^1.0.1",
4150
"rollup-plugin-terser": "^7.0.2",
4251
"router-slot": "^1.5.4",
4352
"ts-jest": "^26.3.0",

‎rollup.config.js‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import copy from 'rollup-plugin-copy';
88
import { indexHtml } from './src/indexHtml.js';
99
import dev from 'rollup-plugin-dev';
1010
import del from 'rollup-plugin-delete';
11+
// import postcss from 'rollup-plugin-postcss';
12+
import autoprefixer from 'autoprefixer';
13+
// import postcssLit from 'rollup-plugin-postcss-lit';
14+
import postcss from 'postcss';
1115

1216
const extensions = ['.js', '.ts'];
1317

@@ -22,7 +26,7 @@ const config = {
2226
format: 'es',
2327
name: 'Oriole',
2428
entryFileNames: '[name].[hash].js',
25-
chunkFileNames: '[hash].js',
29+
chunkFileNames: '[name].[hash].js',
2630
},
2731

2832
plugins: [
@@ -34,6 +38,59 @@ const config = {
3438
copy(copyConfig),
3539
resolve({ extensions }),
3640
commonjs(),
41+
// {
42+
// name: 'lit-css-fix',
43+
// async transform(code, id) {
44+
// let finCode = `${code}`;
45+
// let slicedCode = finCode;
46+
// const cssBits = [...((code || '').matchAll(/css`.*?`/g) || [])];
47+
// if (cssBits.length < 1) return null;
48+
49+
// let indexCorrection = 0;
50+
// const processor = postcss([autoprefixer()]);
51+
// /** @type {RegExpExecArray} */
52+
// let all = '';
53+
// let counter = 0;
54+
// while (
55+
// (all = /css`.*?`/g.exec(slicedCode)) !== null &&
56+
// all[0].length > 5 &&
57+
// counter < 20
58+
// ) {
59+
// let bit = all[0],
60+
// index = all.index;
61+
// let bitStr = bit.replace('css`', '');
62+
// bitStr = bitStr.replace('`', '');
63+
// var finBit = await processor.process(bitStr, { from: undefined });
64+
// const correctedIndex = indexCorrection + index;
65+
// finCode = finCode.slice(0, correctedIndex) + 'css`';
66+
// finBit.css + '`' + finCode.slice(correctedIndex);
67+
// indexCorrection = indexCorrection + finBit.css.length;
68+
// console.log(indexCorrection);
69+
// slicedCode = slicedCode.slice(indexCorrection + 4);
70+
// counter++;
71+
// }
72+
73+
// for (const all of cssBits) {
74+
// let bit = all[0],
75+
// index = all.index;
76+
// let bitStr = bit.replace('css`', '');
77+
// bitStr = bitStr.replace('`', '');
78+
// var finBit = await processor.process(bitStr, { from: undefined });
79+
// const correctedIndex = indexCorrection + index;
80+
// finCode =
81+
// finCode.slice(0, correctedIndex) +
82+
// finBit.css +
83+
// finCode.slice(correctedIndex);
84+
// indexCorrection += bit.length - finBit.css.length;
85+
// }
86+
// console.log(finCode);
87+
88+
// return {
89+
// code: finCode,
90+
// map: null,
91+
// };
92+
// },
93+
// },
3794
babel({
3895
extensions,
3996
babelHelpers: 'bundled',

‎src/app.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,10 @@ export class AppElement extends LitElement {
4242
}
4343
render() {
4444
return html`<div class="app ori-flex">
45-
<h1>I Work still!</h1>
45+
<h1 class="text">I Work still!</h1>
4646
<router-slot class="ori-flex"></router-slot>
47-
<ori-controlbar></ori-controlbar>
4847
</div>`;
4948
}
50-
5149
static get styles() {
5250
return [globalStyles, flexHostStyles, css``];
5351
}

‎src/components/controlbar.component.ts‎

Lines changed: 129 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,138 @@
1-
import { LitElement, css, html, customElement } from 'lit-element';
2-
import { globalStyles } from '../globalStyles';
1+
import { LitElement, css, html, customElement, property } from 'lit-element';
2+
import { flexHostStyles, globalStyles } from '../globalStyles';
3+
import '@material/mwc-icon-button';
4+
import '@material/mwc-slider';
5+
import '@material/mwc-icon';
6+
7+
type PlayStates = 'play' | 'pause';
38

49
@customElement('ori-controlbar')
510
export class ControlbarComponent extends LitElement {
11+
@property()
12+
playState: PlayStates = 'pause';
13+
14+
get isPlaying() {
15+
return this.playState === 'play';
16+
}
17+
18+
constructor() {
19+
super();
20+
}
21+
22+
togglePlayStateEvent = (override?: 'play' | 'pause') => () => {
23+
this.playState = override ?? this.isPlaying ? 'pause' : 'play';
24+
};
25+
626
render() {
7-
return html`<div class="controlbar"><h2>Control!</h2></div>`;
27+
return html`<div class="controlbar">
28+
<div class="top-bar">
29+
<div class="center-content">
30+
<mwc-icon-button
31+
class="small-icon"
32+
icon="fast_rewind"
33+
></mwc-icon-button>
34+
<mwc-icon-button
35+
@click="${this.togglePlayStateEvent()}"
36+
class="primary-icon"
37+
icon="${this.isPlaying
38+
? 'pause_circle_filled'
39+
: 'play_circle_filled'}"
40+
></mwc-icon-button>
41+
<mwc-icon-button
42+
class="small-icon"
43+
icon="fast_forward"
44+
></mwc-icon-button>
45+
</div>
46+
<div class="bottom-bar">
47+
<mwc-slider
48+
class="playback-slider"
49+
max="315"
50+
value="250"
51+
></mwc-slider>
52+
</div>
53+
</div>
54+
<div class="left-content">
55+
<mwc-icon class="volume-icon">volume_mute</mwc-icon>
56+
<mwc-slider class="volume-slider" max="100" value="30"></mwc-slider>
57+
<mwc-icon class="volume-icon">volume_up</mwc-icon>
58+
</div>
59+
</div>`;
860
}
961

1062
static get styles() {
11-
return [globalStyles, css``];
63+
return [
64+
globalStyles,
65+
css`
66+
:host {
67+
position: sticky;
68+
bottom: 0;
69+
}
70+
71+
.controlbar {
72+
display: flex;
73+
justify-content: center;
74+
75+
overflow: hidden;
76+
background: var(--light, rgba(var(--ori5-raw), 0.9))
77+
var(--dark, rgba(var(--ori3-raw), 0.9));
78+
backdrop-filter: blur(2px);
79+
box-shadow: rgb(0 0 0 / 10%) 0px -4px 10px 0px,
80+
rgb(0 0 0 / 5%) 0px -4px 3px -1px;
81+
border-top: var(--light, 1px solid rgba(255, 255, 255, 0.2))
82+
var(--dark, 1px solid rgba(100, 100, 100, 0.2));
83+
}
84+
85+
.center-content {
86+
flex: 1;
87+
display: flex;
88+
justify-content: center;
89+
align-items: center;
90+
}
91+
92+
.top-bar {
93+
flex: 1;
94+
padding-top: 12px;
95+
display: flex;
96+
flex-direction: column;
97+
}
98+
99+
.bottom-bar {
100+
flex: 1;
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
}
105+
106+
.left-content {
107+
display: flex;
108+
justify-content: center;
109+
align-items: center;
110+
margin-right: 48px;
111+
}
112+
113+
.primary-icon {
114+
padding-left: 12px;
115+
padding-right: 12px;
116+
--mdc-icon-button-size: 48px;
117+
--mdc-icon-size: 48px;
118+
}
119+
120+
.small-icon {
121+
--mdc-icon-button-size: 28px;
122+
--mdc-icon-size: 24px;
123+
}
124+
125+
.playback-slider {
126+
width: 50%;
127+
}
128+
129+
.volume-slider {
130+
padding: 0 12px;
131+
}
132+
133+
.volume-icon {
134+
}
135+
`,
136+
];
12137
}
13138
}

‎src/components/discover.page.ts‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,50 @@ import './controlbar.component';
66
@customElement('ori-discover')
77
export class DiscoverPage extends LitElement {
88
render() {
9-
return html`<div class="discover">
9+
return html`<div class="discover ori-flex">
1010
<ori-navbar></ori-navbar>
1111
<h3>WOW</h3>
12+
<p>
13+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
14+
quisquam sapiente, aperiam quibusdam veritatis eveniet expedita
15+
perspiciatis similique illo possimus aliquam beatae sed iure ipsum
16+
voluptates impedit deleniti harum accusamus? Quisquam consectetur minus
17+
maiores accusamus neque. Ad assumenda laborum consequatur officia
18+
architecto fuga. Fugiat ipsum ipsam hic, blanditiis magni laborum!
19+
</p>
20+
<p>
21+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
22+
quisquam sapiente, aperiam quibusdam veritatis eveniet expedita
23+
perspiciatis similique illo possimus aliquam beatae sed iure ipsum
24+
voluptates impedit deleniti harum accusamus? Quisquam consectetur minus
25+
maiores accusamus neque. Ad assumenda laborum consequatur officia
26+
architecto fuga. Fugiat ipsum ipsam hic, blanditiis magni laborum!
27+
</p>
28+
<p>
29+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
30+
quisquam sapiente, aperiam quibusdam veritatis eveniet expedita
31+
perspiciatis similique illo possimus aliquam beatae sed iure ipsum
32+
voluptates impedit deleniti harum accusamus? Quisquam consectetur minus
33+
maiores accusamus neque. Ad assumenda laborum consequatur officia
34+
architecto fuga. Fugiat ipsum ipsam hic, blanditiis magni laborum!
35+
</p>
36+
<p>
37+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
38+
quisquam sapiente, aperiam quibusdam veritatis eveniet expedita
39+
perspiciatis similique illo possimus aliquam beatae sed iure ipsum
40+
voluptates impedit deleniti harum accusamus? Quisquam consectetur minus
41+
maiores accusamus neque. Ad assumenda laborum consequatur officia
42+
architecto fuga. Fugiat ipsum ipsam hic, blanditiis magni laborum!
43+
</p>
44+
<p>
45+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto
46+
quisquam sapiente, aperiam quibusdam veritatis eveniet expedita
47+
perspiciatis similique illo possimus aliquam beatae sed iure ipsum
48+
voluptates impedit deleniti harum accusamus? Quisquam consectetur minus
49+
maiores accusamus neque. Ad assumenda laborum consequatur officia
50+
architecto fuga. Fugiat ipsum ipsam hic, blanditiis magni laborum!
51+
</p>
52+
<div class="fill"></div>
1253
<ori-controlbar></ori-controlbar>
1354
</div>`;
1455
}

‎src/components/navbar.component.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,18 @@ export class NavbarComponent extends LitElement {
1414
}
1515

1616
static get styles() {
17-
return [globalStyles, css``];
17+
return [
18+
globalStyles,
19+
css`
20+
:host {
21+
backdrop-filter: blur(2px);
22+
}
23+
`,
24+
css`
25+
.title {
26+
font-size: 12px;
27+
}
28+
`,
29+
];
1830
}
1931
}

‎src/globalStyles.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ export const flexHostStyles = css`
1010
`;
1111

1212
export const globalStyles = css`
13-
.bn-flex,
14-
html,
15-
body {
13+
.ori-flex {
1614
display: flex;
1715
flex-direction: column;
1816
flex: 1;
1917
min-height: 0px;
2018
}
19+
20+
.fill {
21+
flex: 1;
22+
}
2123
`;
2224

2325
export const fadeinAnimation = css`

0 commit comments

Comments
 (0)
⚡