chore: just render api data for now
This commit is contained in:
Sean Norwood
parent
97c01a2f3a
commit
cfffa8bd38
|
|
@ -15,91 +15,97 @@ export const VideoList = ({ videos }: { videos: Videos }) => {
|
|||
}
|
||||
|
||||
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>
|
||||
</>
|
||||
<div style={{ color: "white" }} className="boxed-content">
|
||||
<pre>{JSON.stringify(videos.data, null, 4)}</pre>
|
||||
</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>
|
||||
// </>
|
||||
// );
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue