mirror of
https://github.com/zedeus/nitter.git
synced 2024-12-23 03:45:36 +00:00
Add support for mp4 videos
This commit is contained in:
parent
b31338dcc7
commit
ff01ab61d1
|
@ -230,8 +230,9 @@ nav {
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-row .attachment:last-child, .gallery-row .attachments:last-child {
|
.gallery-row .attachment:last-child, .gallery-row .attachments:last-child, .video-container {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
max-height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments .attachment {
|
.attachments .attachment {
|
||||||
|
@ -241,14 +242,45 @@ nav {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-row .image-attachment {
|
.gallery-row .image-attachment, .attachments .image-attachment {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments .image-attachment {
|
.gallery-video {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-gif {
|
||||||
|
display: table-cell;
|
||||||
|
padding-top: 5px !important;
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: #000000bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-overlay p {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
color: #dcdcdc;
|
||||||
|
text-align: center;
|
||||||
|
top: calc(50% - 20px);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.still-image {
|
.still-image {
|
||||||
max-height: 379.5px;
|
max-height: 379.5px;
|
||||||
max-width: 506px;
|
max-width: 506px;
|
||||||
|
@ -611,36 +643,6 @@ nav {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-gif {
|
|
||||||
display: table-cell;
|
|
||||||
padding-top: 5px !important;
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-overlay {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
background-color: #000000bd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-overlay p {
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
color: #dcdcdc;
|
|
||||||
text-align: center;
|
|
||||||
top: calc(50% - 20px);
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unavailable-box {
|
.unavailable-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -111,26 +111,28 @@ proc parseConversation*(node: XmlNode): Conversation =
|
||||||
result.replies.add parseTweets(thread)
|
result.replies.add parseTweets(thread)
|
||||||
|
|
||||||
proc parseVideo*(node: JsonNode): Video =
|
proc parseVideo*(node: JsonNode): Video =
|
||||||
let track = node{"track"}
|
let
|
||||||
let contentType = track["contentType"].to(string)
|
track = node{"track"}
|
||||||
|
cType = track["contentType"].to(string)
|
||||||
|
pType = track["playbackType"].to(string)
|
||||||
|
|
||||||
case contentType
|
case cType
|
||||||
of "media_entity":
|
of "media_entity":
|
||||||
result = Video(
|
result = Video(
|
||||||
contentType: m3u8,
|
playbackType: if "mp4" in pType: mp4 else: m3u8,
|
||||||
thumb: node["posterImage"].to(string),
|
contentId: track["contentId"].to(string),
|
||||||
id: track["contentId"].to(string),
|
durationMs: track["durationMs"].to(int),
|
||||||
length: track["durationMs"].to(int),
|
|
||||||
views: track["viewCount"].to(string),
|
views: track["viewCount"].to(string),
|
||||||
url: track["playbackUrl"].to(string),
|
url: track["playbackUrl"].to(string),
|
||||||
available: track{"mediaAvailability"}["status"].to(string) == "available"
|
available: track{"mediaAvailability"}["status"].to(string) == "available"
|
||||||
)
|
)
|
||||||
of "vmap":
|
of "vmap":
|
||||||
result = Video(
|
result = Video(
|
||||||
contentType: vmap,
|
playbackType: vmap,
|
||||||
thumb: node["posterImage"].to(string),
|
durationMs: track["durationMs"].to(int),
|
||||||
url: track["vmapUrl"].to(string),
|
url: track["vmapUrl"].to(string)
|
||||||
length: track["durationMs"].to(int),
|
|
||||||
)
|
)
|
||||||
else:
|
else:
|
||||||
echo "Can't parse video of type ", contentType
|
echo "Can't parse video of type ", cType
|
||||||
|
|
||||||
|
result.thumb = node["posterImage"].to(string)
|
||||||
|
|
|
@ -32,15 +32,15 @@ db("cache.db", "", "", ""):
|
||||||
|
|
||||||
type
|
type
|
||||||
VideoType* = enum
|
VideoType* = enum
|
||||||
vmap, m3u8
|
vmap, m3u8, mp4
|
||||||
|
|
||||||
Video* = object
|
Video* = object
|
||||||
contentType*: VideoType
|
contentId*: string
|
||||||
|
playbackType*: VideoType
|
||||||
|
durationMs*: int
|
||||||
url*: string
|
url*: string
|
||||||
thumb*: string
|
thumb*: string
|
||||||
id*: string
|
|
||||||
views*: string
|
views*: string
|
||||||
length*: int
|
|
||||||
available*: bool
|
available*: bool
|
||||||
|
|
||||||
Gif* = object
|
Gif* = object
|
||||||
|
|
|
@ -88,12 +88,19 @@
|
||||||
#
|
#
|
||||||
#proc renderVideo(video: Video): string =
|
#proc renderVideo(video: Video): string =
|
||||||
<div class="attachments">
|
<div class="attachments">
|
||||||
<div class="gallery-row" style="max-height: unset;">
|
<div class="gallery-video">
|
||||||
<div class="attachment image">
|
<div class="attachment video-container">
|
||||||
|
#case video.playbackType
|
||||||
|
#of mp4:
|
||||||
|
<video poster=${video.thumb.getSigUrl("pic")} controls>
|
||||||
|
<source src=${video.url.getSigUrl("video")} type="video/mp4">
|
||||||
|
</video>
|
||||||
|
#of m3u8, vmap:
|
||||||
<video poster=${video.thumb.getSigUrl("pic")} autoplay muted loop></video>
|
<video poster=${video.thumb.getSigUrl("pic")} autoplay muted loop></video>
|
||||||
<div class="video-overlay">
|
<div class="video-overlay">
|
||||||
<p>Video playback not supported</p>
|
<p>Video playback not supported</p>
|
||||||
</div>
|
</div>
|
||||||
|
#end case
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue