tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 11:50:14 +00:00
Code Issues Projects Releases Wiki Activity

chore: just render api data for now

Browse Source
This commit is contained in:
Sean Norwood 2022-04-04 19:57:27 +00:00
parent 97c01a2f3a
commit cfffa8bd38
1 changed files with 92 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
tubearchivist/www/src/components/VideoList.tsx
View File

@ -15,91 +15,97 @@ export const VideoList = ({ videos }: { videos: Videos }) => {
} }
return ( return (
<> <div style={{ color: "white" }} className="boxed-content">
<div id="player" className="player-wrapper"></div> <pre>{JSON.stringify(videos.data, null, 4)}</pre>
<div className="boxed-content">
<div className="video-list list">
{/* {% if results %}
{% for video in results %} */}
{videos &&
videos?.data?.map((video) => (
<div key={video.youtube_id} className="video-item list">
<a
href="#player"
// data-id="{{ video.source.youtube_id }}"
data-id={video.youtube_id}
// onClick="createPlayer(this)"
>
<div className="video-thumb-wrap list">
<div className="video-thumb">
<img
src="/cache/{{ video.source.vid_thumb_url }}"
alt="video-thumb"
/>
{/* {% if video.source.player.progress %} */}
<div
className="video-progress-bar"
// id="progress-{{ video.source.youtube_id }}"
id={`progress-${video.youtube_id}`}
// style="width: {{video.source.player.progress}}%;"
></div>
{/* {% else %} */}
<div
className="video-progress-bar"
// id="progress-{{ video.source.youtube_id }}"
id={`progress-${video.youtube_id}`}
// style="width: 0%;"
></div>
{/* {% endif %} */}
</div> </div>
<div className="video-play">
<img src="/img/icon-play.svg" alt="play-icon" />
</div>
</div>
</a>
<div className="video-desc list">
<div
className="video-desc-player"
// id="video-info-{{ video.source.youtube_id }}"
id={video.youtube_id}
>
{/* {% if video.source.player.watched %} */}
<img
src="/img/icon-seen.svg"
alt="seen-icon"
data-id="{{ video.source.youtube_id }}"
data-status="watched"
// onClick="updateVideoWatchStatus(this)"
className="watch-button"
title="Mark as unwatched"
/>
{/* {% else %} */}
<img
src="/img/icon-unseen.svg"
alt="unseen-icon"
data-id="{{ video.source.youtube_id }}"
data-status="unwatched"
// onClick="updateVideoWatchStatus(this)"
className="watch-button"
title="Mark as watched"
/>
{/* {% endif %} */}
{/* <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> */}
</div>
<div>
{/* <a href="{% url 'channel_id' video.source.channel.channel_id %}"><h3>{{ video.source.channel.channel_name }}</h3></a> */}
{/* <a className="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a> */}
</div>
</div>
</div>
))}
{/* {% endfor %}
{% else %} */}
{/* {% endif %} */}
</div>
</div>
</>
); );
// return (
// <>
// <div id="player" className="player-wrapper"></div>
// <div className="boxed-content">
// <div className="video-list list">
// {/* {% if results %}
// {% for video in results %} */}
// {videos &&
// videos?.data?.map((video) => (
// <div key={video.youtube_id} className="video-item list">
// <a
// href="#player"
// // data-id="{{ video.source.youtube_id }}"
// data-id={video.youtube_id}
// // onClick="createPlayer(this)"
// >
// <div className="video-thumb-wrap list">
// <div className="video-thumb">
// <img
// src="/cache/{{ video.source.vid_thumb_url }}"
// alt="video-thumb"
// />
// {/* {% if video.source.player.progress %} */}
// <div
// className="video-progress-bar"
// // id="progress-{{ video.source.youtube_id }}"
// id={`progress-${video.youtube_id}`}
// // style="width: {{video.source.player.progress}}%;"
// ></div>
// {/* {% else %} */}
// <div
// className="video-progress-bar"
// // id="progress-{{ video.source.youtube_id }}"
// id={`progress-${video.youtube_id}`}
// // style="width: 0%;"
// ></div>
// {/* {% endif %} */}
// </div>
// <div className="video-play">
// <img src="/img/icon-play.svg" alt="play-icon" />
// </div>
// </div>
// </a>
// <div className="video-desc list">
// <div
// className="video-desc-player"
// // id="video-info-{{ video.source.youtube_id }}"
// id={video.youtube_id}
// >
// {/* {% if video.source.player.watched %} */}
// <img
// src="/img/icon-seen.svg"
// alt="seen-icon"
// data-id="{{ video.source.youtube_id }}"
// data-status="watched"
// // onClick="updateVideoWatchStatus(this)"
// className="watch-button"
// title="Mark as unwatched"
// />
// {/* {% else %} */}
// <img
// src="/img/icon-unseen.svg"
// alt="unseen-icon"
// data-id="{{ video.source.youtube_id }}"
// data-status="unwatched"
// // onClick="updateVideoWatchStatus(this)"
// className="watch-button"
// title="Mark as watched"
// />
// {/* {% endif %} */}
// {/* <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> */}
// </div>
// <div>
// {/* <a href="{% url 'channel_id' video.source.channel.channel_id %}"><h3>{{ video.source.channel.channel_name }}</h3></a> */}
// {/* <a className="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a> */}
// </div>
// </div>
// </div>
// ))}
// {/* {% endfor %}
// {% else %} */}
// {/* {% endif %} */}
// </div>
// </div>
// </>
// );
}; };