Skip to content

Commit 0f381ea

Browse files
blueedgetechnoblueedgetechno
committed
youtube first iteration
1 parent 525087a commit 0f381ea

File tree

11 files changed

+531
-64
lines changed

11 files changed

+531
-64
lines changed

‎src/components/main.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ body{
2121
color: var(--med-txt);
2222
}
2323

24+
.light-txt{
25+
color: var(--light-txt);
26+
}
27+
2428
.comp-txt{
2529
color: var(--comp-txt);
2630
}
@@ -44,6 +48,18 @@ body{
4448
}
4549
}
4650

51+
.txt-ovf{
52+
display: -webkit-box;
53+
-webkit-line-clamp: 1;
54+
-webkit-box-orient: vertical;
55+
overflow: hidden;
56+
text-overflow: ellipsis;
57+
}
58+
59+
.wb-line-2 {-webkit-line-clamp: 2}
60+
.wb-line-3 {-webkit-line-clamp: 3}
61+
.wb-line-4 {-webkit-line-clamp: 4}
62+
4763
.status-bar{
4864
// position: absolute;
4965
height: var(--stbar-h);

‎src/containers/apps/themes.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@
2828
}
2929

3030
.youtube-wrapper{
31-
--app-bg: #ffffff;
31+
--app-bg: #fefefe;
3232
--pm-txt: #121212;
3333
background: var(--app-bg);
3434
// color: #fefefe;
3535
}
3636

3737
.youtube-viewport{
38-
--app-bg: #ffffff;
38+
--app-bg: #fefefe;
3939
--statusbg: var(--app-bg);
4040
--navbg: var(--app-bg);
4141
}

‎src/containers/apps/youtube/extra.js‎

Lines changed: 227 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,169 @@ import {useSelector, useDispatch} from 'react-redux';
33

44
import {Icon, Image, Video} from 'components/utils.js';
55
import {dispatchAction, dispatchAct} from 'store/actions';
6+
import './extra.scss';
7+
8+
const posneg = (a,b,seed) => {
9+
var sa = a.csum(), sb = b.csum(), sd = seed.csum()
10+
return (sa + sb)%2 == sd%2==0 ? 1:-1
11+
}
12+
13+
const pseudorandom = (arr,seed)=>{
14+
arr = arr.filter(x => x!= seed)
15+
return arr.sort((a,b) => posneg(a,b,seed))
16+
}
617

718
export const ViewPage = (props)=>{
19+
const [liked, setLiked] = useState(-1)
20+
const [loadSugg, setLoad] = useState(false)
21+
const ytwatch = useRef()
22+
const ydata = useSelector(state => state.youtube)
23+
const watvid = useSelector(state => {
24+
var id = state.youtube.watch && state.youtube.watch.id
25+
return state.youtube.vids && state.youtube.vids[id]
26+
})
827

9-
return (
10-
<div className="yt-vid-view">
11-
Hmm ...
28+
const vidch = useSelector(state => {
29+
var id = state.youtube.watch && state.youtube.watch.id,
30+
channel = {...state.youtube.channels && state.youtube.channels[
31+
state.youtube.vids[id] && state.youtube.vids[id].channel
32+
]}
33+
34+
if(channel) channel.subd = state.youtube.subd && state.youtube.subd.includes(channel.id)
35+
return channel
36+
})
37+
38+
const handleFullReq = (e)=>{
39+
if(ydata.comp) return
40+
dispatchAct({type: 'youtube/setProp', payload:{
41+
key: 'comp', value: true
42+
}})
43+
}
44+
45+
const handleLike = (e)=>{
46+
setLiked(e.target.dataset.payload)
47+
}
48+
49+
useEffect(()=>{
50+
if(watvid && watvid.id){
51+
setLoad(true)
52+
setLiked(-1)
53+
if(ytwatch.current) ytwatch.current.scrollTo(0,0)
54+
setTimeout(()=> {
55+
setLoad(false)
56+
}, 1000)
57+
}
58+
},[watvid])
59+
60+
useEffect(()=>{
61+
dispatchAct({type: 'home/setAppKey', payload:{
62+
id: 'youtube', key: 'comp', value: ydata.comp
63+
}})
64+
}, [ydata.comp])
65+
66+
return watvid ? (
67+
<div className={`yt-vid-view ${!ydata.comp ? 'mini-yt-vid':''}`}>
68+
<div className="yt-vid-box">
69+
<Video src={"https://youtube.com/embed/"+watvid.id}
70+
playIcon w="100%" h="100%"/>
71+
</div>
72+
<div className="yt-watch-container" ref={ytwatch}>
73+
<div className="yt-vid-info" onClick={handleFullReq}>
74+
<div className="vid-title txt-ovf">{watvid.title}</div>
75+
<div className="vid-stat">
76+
{ydata.comp ? (
77+
`${watvid.views.quantf()} views • ${new Date(watvid.upload).minifyDate()}`
78+
): `${vidch.name}`}
79+
</div>
80+
{ydata.comp && (
81+
<div className="vid-acts">
82+
<div className="flex flex-col items-center prtclk"
83+
onClick={handleLike} data-payload="1">
84+
<Icon mui="ThumbUp" out={liked!=1}/>
85+
<span>{watvid.likes.quantf()}</span>
86+
</div>
87+
<div className="flex flex-col items-center prtclk"
88+
onClick={handleLike} data-payload="0">
89+
<Icon mui="ThumbDown" out={liked!=0}/>
90+
<span>{watvid.dislikes.quantf()}</span>
91+
</div>
92+
<div className="flex flex-col items-center">
93+
<Icon mui="Reply" flip/><span>Share</span>
94+
</div>
95+
<div className="flex flex-col items-center">
96+
<Icon mui="Download"/><span>Download</span>
97+
</div>
98+
<div className="flex flex-col items-center">
99+
<Icon mui="LibraryAdd" out/><span>Save</span>
100+
</div>
101+
</div>
102+
)}
103+
</div>
104+
{!ydata.comp && (
105+
<div className="yt-mini-ctrl">
106+
<Icon className="mx-1" mui="PlayArrow" w={28} onClick={handleFullReq}/>
107+
<Icon className="mx-1" mui="Close" w={28} action="youtube/closeVid"/>
108+
</div>
109+
)}
110+
{ydata.comp && (
111+
<>
112+
<div className="yt-channel-row">
113+
<div className="flex items-center">
114+
<Image src={vidch.pfp} dir="asset/youtube/pfp" w={36}/>
115+
<div>
116+
<div className="leading-4">{vidch.name}</div>
117+
<div className="text-xss light-txt">{vidch.subs.quantf()} subscribers</div>
118+
</div>
119+
</div>
120+
<div className="subscribed-container">
121+
<div className={`text-sm mr-4 ${!vidch.subd?'red-txt':''}`} onClick={dispatchAction}
122+
data-action="youtube/toggleSub" data-payload={vidch.id}>
123+
{vidch.subd ? "SUBSCRIBED":"SUBSCRIBE"}
124+
</div>
125+
{vidch.subd && <Icon mui="NotificationsActive"/>}
126+
</div>
127+
</div>
128+
<div className="yt-comment-box">
129+
<div className="text-sm">Comments are turned off&nbsp;
130+
{/* <span className="light-txt font-thin text-sm">{269}</span> */}
131+
</div>
132+
</div>
133+
<div className="yt-sugg-container">
134+
{!loadSugg && ydata.home && pseudorandom(ydata.home, watvid.id).splice(0,10).map((item,i)=>{
135+
var vid = ydata.vids[item],
136+
channel = ydata.channels[vid.channel] || {}
137+
138+
return (
139+
<div className="yt-item-container prtclk" onClick={dispatchAction}
140+
data-action="youtube/watchVideo" data-payload={vid.id} key={i}>
141+
<div className="yt-vid-thumbnail">
142+
<Image src={vid.thumb} dir="asset/youtube/thumbs"/>
143+
</div>
144+
<div className="yt-vid-info">
145+
<Image src={channel.pfp} dir="asset/youtube/pfp" w={36}/>
146+
<div className="flex-grow pl-2">
147+
<div className="txt-ovf yt-vid-title">{vid.title}</div>
148+
<div className="yt-vid-extra">
149+
{channel.name} • {vid.views.quantf()} views • {new Date(vid.upload).minifyDate()}
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
)
155+
})}
156+
{loadSugg && (
157+
<div className="yt-item-container">
158+
<div className="yt-vid-thumbnail">
159+
<Image src="" dir="asset/youtube/thumbs"/>
160+
</div>
161+
</div>
162+
)}
163+
</div>
164+
</>
165+
)}
166+
</div>
12167
</div>
13-
)
168+
) : null
14169
}
15170

16171
export const TrendingPage = (props)=>{
@@ -40,14 +195,15 @@ export const TrendingPage = (props)=>{
40195
channel = ydata.channels[vid.channel] || {}
41196

42197
return (
43-
<div className="yt-item-container" key={i}>
198+
<div className="yt-item-container prtclk" onClick={dispatchAction}
199+
data-action="youtube/watchVideo" data-payload={vid.id} key={i}>
44200
<div className="yt-vid-thumbnail">
45201
<Image src={vid.thumb} dir="asset/youtube/thumbs"/>
46202
</div>
47203
<div className="yt-vid-info">
48204
<Image src={channel.pfp} dir="asset/youtube/pfp" w={36}/>
49205
<div className="flex-grow pl-2">
50-
<div className="yt-vid-title">{vid.title}</div>
206+
<div className="txt-ovf yt-vid-title">{vid.title}</div>
51207
<div className="yt-vid-extra">
52208
{channel.name} • {vid.views.quantf()} views • {new Date(vid.upload).minifyDate()}
53209
</div>
@@ -62,8 +218,15 @@ export const TrendingPage = (props)=>{
62218
}
63219

64220
export const SubsPage = (props)=>{
221+
const [chid, setId] = useState("")
65222
const ydata = useSelector(state => state.youtube)
66223

224+
const handleChClick = (e)=>{
225+
var id = e.target.dataset.id
226+
if(chid==id) setId("")
227+
else setId(id)
228+
}
229+
67230
return (
68231
<div className="yt-page">
69232
<div className="yt-subs-container">
@@ -72,9 +235,10 @@ export const SubsPage = (props)=>{
72235
{ydata.subd && ydata.subd.map((item, i)=>{
73236
var channel = ydata.channels[item] || {}
74237
return (
75-
<div className="yt-channel" key={i}>
238+
<div className="yt-channel prtclk" onClick={handleChClick} key={i}
239+
data-state={chid==""?0:(chid==item?1:2)} data-id={item}>
76240
<Image src={channel.pfp} dir="asset/youtube/pfp" w={48}/>
77-
<div className="ch-name">{channel.name}</div>
241+
<div className="txt-ovf ch-name">{channel.name}</div>
78242
</div>
79243
)
80244
})}
@@ -83,19 +247,23 @@ export const SubsPage = (props)=>{
83247
<div className="ch-text-all">ALL</div>
84248
</div>
85249
<div className="yt-sub-vids">
86-
{ydata.vids && Object.keys(ydata.vids).map((key, i)=>{
250+
{ydata.vids && Object.keys(ydata.vids).sort((ka,kb)=>{
251+
return new Date(ydata.vids[ka].upload) < new Date(ydata.vids[kb].upload)?1:-1
252+
}).map((key, i)=>{
87253
var vid = ydata.vids[key],
88254
channel = ydata.channels[vid.channel] || {}
89255

90-
return (
91-
<div className="yt-item-container" key={i}>
256+
return ydata.subd.includes(channel.id) && (
257+
chid=="" || chid==channel.id ) && (
258+
<div className="yt-item-container prtclk" onClick={dispatchAction}
259+
data-action="youtube/watchVideo" data-payload={vid.id} key={i}>
92260
<div className="yt-vid-thumbnail">
93261
<Image src={vid.thumb} dir="asset/youtube/thumbs"/>
94262
</div>
95263
<div className="yt-vid-info">
96264
<Image src={channel.pfp} dir="asset/youtube/pfp" w={36}/>
97265
<div className="flex-grow pl-2">
98-
<div className="yt-vid-title">{vid.title}</div>
266+
<div className="txt-ovf yt-vid-title">{vid.title}</div>
99267
<div className="yt-vid-extra">
100268
{channel.name} • {vid.views.quantf()} views • {new Date(vid.upload).minifyDate()}
101269
</div>
@@ -110,10 +278,53 @@ export const SubsPage = (props)=>{
110278
}
111279

112280
export const LibPage = (props)=>{
281+
const ydata = useSelector(state => state.youtube)
113282

114283
return (
115284
<div className="yt-page">
116-
Hmm ... 2
285+
<div className="yt-his-container">
286+
<div className="yt-his-title">
287+
<span>History</span>
288+
<span className="ch-text-all">VIEW ALL</span>
289+
</div>
290+
<div className="yt-his-vids noscroll">
291+
<div className="yt-his-scbody">
292+
{ydata.library && ydata.library.hist.map((key, i)=>{
293+
var vid = ydata.vids[key],
294+
channel = ydata.channels[vid.channel] || {}
295+
296+
return (
297+
<div className="yt-his-vid prtclk" onClick={dispatchAction}
298+
data-action="youtube/watchVideo" data-payload={vid.id} key={i}>
299+
<Image src={vid.thumb} dir="asset/youtube/thumbs"/>
300+
<div className="txt-ovf his-vid-title">{vid.title}</div>
301+
<div className="his-chname">{channel.name}</div>
302+
</div>
303+
)
304+
})}
305+
</div>
306+
</div>
307+
</div>
308+
<hr className="my-2"/>
309+
<div className="flex flex-col yt-lib-cont">
310+
<div className="flex px-4 py-3 items-center">
311+
<Icon className="yt-lib-icon" mui="Download" w={20}/>
312+
<div className="yt-dock-name text-sm ml-4">Downloads</div>
313+
</div>
314+
<div className="flex px-4 py-3 items-center">
315+
<Icon className="yt-lib-icon" mui="Theaters" w={20} out/>
316+
<div className="yt-dock-name text-sm ml-4">Your Movies</div>
317+
</div>
318+
<div className="flex px-4 py-3 items-center">
319+
<Icon className="yt-lib-icon" mui="AccessTime" w={20} out/>
320+
<div className="yt-dock-name text-sm ml-4">Watch Later</div>
321+
</div>
322+
<div className="flex px-4 py-3 items-center">
323+
<Icon className="yt-lib-icon" mui="ThumbUp" w={20} out/>
324+
<div className="yt-dock-name text-sm ml-4">Liked Videos</div>
325+
</div>
326+
</div>
327+
<hr className="my-4"/>
117328
</div>
118329
)
119330
}
@@ -128,14 +339,15 @@ export const Home = (props)=>{
128339
channel = ydata.channels[vid.channel] || {}
129340

130341
return (
131-
<div className="yt-item-container" key={i}>
342+
<div className="yt-item-container prtclk" onClick={dispatchAction}
343+
data-action="youtube/watchVideo" data-payload={vid.id} key={i}>
132344
<div className="yt-vid-thumbnail">
133345
<Image src={vid.thumb} dir="asset/youtube/thumbs"/>
134346
</div>
135347
<div className="yt-vid-info">
136348
<Image src={channel.pfp} dir="asset/youtube/pfp" w={36}/>
137349
<div className="flex-grow pl-2">
138-
<div className="yt-vid-title">{vid.title}</div>
350+
<div className="txt-ovf yt-vid-title">{vid.title}</div>
139351
<div className="yt-vid-extra">
140352
{channel.name} • {vid.views.quantf()} views • {new Date(vid.upload).minifyDate()}
141353
</div>

0 commit comments

Comments
 (0)