Skip to content

Commit 2b3cedb

Browse files
robbiebyrdrobbiebyrd
committed
Some more TV work
1 parent 76e89b4 commit 2b3cedb

File tree

2 files changed

+23
-164
lines changed

2 files changed

+23
-164
lines changed

‎src/app/Applications/TV/TV.module.scss‎

Lines changed: 16 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,31 @@
1-
@use '../../SystemFolder/ControlPanels/AppearanceManager/styles/appearance';
21

3-
.epgChannel {
4-
font-family: var(--body-font), serif;
5-
font-size: calc(var(--ui-font-size) * 1);
6-
display: flex;
7-
align-items: center;
8-
height: calc(var(--window-control-size) * 3);
9-
@include appearance.platinumWindowUndepressable;
10-
padding: var(--window-padding-size);
11-
border: 0;
12-
border-radius: 0 !important;
2+
.tvContainer {
3+
width: 100%;
4+
min-height: 100%;
5+
margin: 0;
6+
padding: 0;
7+
background-color: var(--color-system-03);
138
}
149

15-
.epgEntry {
16-
font-family: var(--body-font), serif;
17-
font-size: calc(var(--ui-font-size) * 0.85);
10+
.tvVideosHolder {
1811
display: flex;
19-
align-items: center;
20-
@include appearance.platinumWindowUndepressable;
2112
flex-direction: row;
22-
height: calc(var(--window-control-size) * 3);
23-
padding: var(--window-padding-size);
24-
border: 0 !important;
25-
border-radius: 0 !important;
26-
27-
& > * {
28-
z-index: 100;
29-
}
30-
}
31-
32-
.epgEntryIcon {
33-
width: calc(var(--window-control-size) * 1.25);
34-
margin-left: calc(var(--window-control-size) / 3);
35-
}
36-
37-
.epgChannelIcon {
38-
width: calc(var(--window-control-size) * 1.825);
39-
margin-right: calc(var(--window-padding-size) * 0.75);
40-
}
41-
42-
.epgEntryTitle {
43-
font-size: calc(var(--ui-font-size) * 1);
44-
font-weight: bold;
45-
}
46-
47-
.epgEntryDescription {
48-
font-size: calc(var(--ui-font-size) * 0.75);
49-
font-weight: normal;
50-
overflow: clip;
51-
width: auto;
52-
text-overflow: ellipsis;
53-
}
54-
55-
.epgEntryIcons {
56-
overflow: hidden;
57-
}
58-
59-
.epgEntry.selected {
60-
@include appearance.platinumWindowDepressed;
61-
color: var(--color-white) !important;
62-
background-color: var(--color-theme-04) !important;
63-
}
64-
65-
.epgHeaderTime {
66-
font-family: var(--body-font), sans-serif;
67-
font-size: calc(var(--ui-font-size) * 0.85);
68-
position: relative;
69-
z-index: 100;
13+
flex-wrap: wrap;
14+
justify-content: space-around;
7015
width: 100%;
71-
padding-top: calc(var(--window-border-size) * 2);
72-
73-
border-left: calc(var(--window-border-size) * 2) solid var(--color-theme-05);
7416

7517
}
7618

77-
.epgHeaderTimeInner {
78-
z-index: 10;
79-
padding-left: 0.5em;
80-
}
81-
82-
@property --slide-var {
83-
syntax: '<length>';
84-
inherits: false;
85-
initial-value: 0px;
86-
}
87-
88-
89-
@keyframes stripeSlide {
90-
from {
91-
--slide-var: 0px;
92-
}
93-
to {
94-
--slide-var: calc(var(--window-control-size) * 2);
95-
}
96-
}
97-
98-
.epgGridSetup {
99-
display: grid;
100-
width: 100%;
101-
}
102-
103-
.epgGridAnimatedBackground {
104-
animation: stripeSlide 3s linear infinite;
105-
animation-play-state: running;
106-
background-color: var(--color-system-03);
107-
background-repeat: repeat;
108-
background-position: var(--slide-var) center;
109-
background-size: calc(var(--window-control-size) * 2);
110-
background-blend-mode: lighten;
111-
}
112-
113-
.epgIndicatorHolder {
19+
.tvChannelTitleHolder {
11420
position: absolute;
115-
z-index: 10;
116-
height: calc(100% - var(--window-border-size) * 3);
117-
justify-items: center;
118-
}
119-
120-
.epgIndicator {
121-
z-index: 1;
122-
top: 0;
123-
right: 0;
124-
width: 50%;
125-
opacity: .35;
126-
border-right: 1px solid var(--color-theme-03);
127-
border-left: 1px solid var(--color-theme-05);
128-
background: linear-gradient(0.25turn, var(--color-theme-05), var(--color-theme-03));
129-
}
130-
131-
.epgIndicatorCenter {
132-
width: 1px;
133-
height: 100%;
134-
margin: 0 auto;
13521
background-color: var(--color-theme-06);
13622
}
13723

138-
.epgGridSetupBorder {
139-
@include appearance.platinumWindowControlBoxBorder;
140-
width: calc(100% - var(--window-border-size) * 2);
141-
}
24+
.tvChannelTitle {
25+
font-family: var(--ui-font);
26+
font-size: calc(var(--ui-font-size) * .75);
27+
margin: 0;
28+
padding: 0 var(--window-padding-size);
29+
color: var(--color-theme-03);
14230

143-
.epgHolder {
144-
position: relative;
145-
width: calc(100% - var(--window-border-size) * 2);
14631
}

‎src/app/Applications/TV/TV.tsx‎

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import ClassicyWindow from '@/app/SystemFolder/SystemResources/Window/ClassicyWi
77
import React, { useRef, useState } from 'react'
88
import ReactPlayer from 'react-player'
99
import data from './testdata.json' with { type: 'json' }
10+
import styles from './TV.module.scss'
1011

1112
interface ClassicyTVProps {}
1213

@@ -73,47 +74,20 @@ const TV: React.FC<ClassicyTVProps> = ({}) => {
7374
modal={false}
7475
appMenu={appMenu}
7576
>
76-
<div
77-
style={{
78-
width: '100%',
79-
minHeight: '100%',
80-
margin: 0,
81-
padding: 0,
82-
backgroundColor: 'var(--color-system-03)',
83-
}}
84-
>
85-
<div
86-
style={{
87-
display: 'flex',
88-
flexDirection: 'row',
89-
width: '100%',
90-
flexWrap: 'wrap',
91-
}}
92-
>
77+
<div className={styles.tvContainer}>
78+
<div className={styles.tvVideosHolder}>
9379
{data.slice(0, 12).map((item, index) => (
9480
<div
9581
key={item.id}
9682
style={{
97-
flexGrow: 1,
98-
display: 'flex',
99-
justifyContent: 'space-around',
10083
width: activePlayer == item.id ? '100%' : '',
101-
order: activePlayer == item.id ? -1 : 0,
84+
order: activePlayer == item.id ? -1 : index,
10285
}}
10386
onClick={() => setActivePlayer(item.id)}
10487
>
10588
{activePlayer != item.id && (
106-
<div style={{ position: 'absolute' }}>
107-
<p
108-
style={{
109-
margin: 0,
110-
padding: 0,
111-
fontFamily: 'var(--ui-font)',
112-
fontSize: 'calc(var(--ui-font-size)*.75)',
113-
}}
114-
>
115-
{item.source}
116-
</p>
89+
<div className={styles.tvChannelTitleHolder}>
90+
<p className={styles.tvChannelTitle}>{item.source}</p>
11791
</div>
11892
)}
11993
<ReactPlayer
@@ -125,7 +99,7 @@ const TV: React.FC<ClassicyTVProps> = ({}) => {
12599
playsinline={true}
126100
volume={activePlayer == item.id ? 1 : 0}
127101
width={activePlayer == item.id ? '100%' : 'auto'}
128-
height={activePlayer == item.id ? '32em' : '4em'}
102+
height={activePlayer == item.id ? 'auto' : '4em'}
129103
config={item.url.endsWith('m3u8') ? hlsOptions : {}}
130104
/>
131105
</div>

0 commit comments

Comments
 (0)