Add support for mp4 videos

This commit is contained in:
Zed 2019-06-29 07:45:36 +02:00
parent b31338dcc7
commit ff01ab61d1
4 changed files with 62 additions and 51 deletions

View file

@ -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%;

View file

@ -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)

View file

@ -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

View file

@ -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>