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;
}
.gallery-row .attachment:last-child, .gallery-row .attachments:last-child {
.gallery-row .attachment:last-child, .gallery-row .attachments:last-child, .video-container {
margin: 0;
max-height: 500px;
}
.attachments .attachment {
@ -241,14 +242,45 @@ nav {
overflow: hidden;
}
.gallery-row .image-attachment {
.gallery-row .image-attachment, .attachments .image-attachment {
width: 100%;
}
.attachments .image-attachment {
.gallery-video {
display: flex;
overflow: hidden;
}
video {
height: 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 {
max-height: 379.5px;
max-width: 506px;
@ -611,36 +643,6 @@ nav {
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 {
width: 100%;
height: 100%;

View file

@ -111,26 +111,28 @@ proc parseConversation*(node: XmlNode): Conversation =
result.replies.add parseTweets(thread)
proc parseVideo*(node: JsonNode): Video =
let track = node{"track"}
let contentType = track["contentType"].to(string)
let
track = node{"track"}
cType = track["contentType"].to(string)
pType = track["playbackType"].to(string)
case contentType
case cType
of "media_entity":
result = Video(
contentType: m3u8,
thumb: node["posterImage"].to(string),
id: track["contentId"].to(string),
length: track["durationMs"].to(int),
playbackType: if "mp4" in pType: mp4 else: m3u8,
contentId: track["contentId"].to(string),
durationMs: track["durationMs"].to(int),
views: track["viewCount"].to(string),
url: track["playbackUrl"].to(string),
available: track{"mediaAvailability"}["status"].to(string) == "available"
)
of "vmap":
result = Video(
contentType: vmap,
thumb: node["posterImage"].to(string),
url: track["vmapUrl"].to(string),
length: track["durationMs"].to(int),
playbackType: vmap,
durationMs: track["durationMs"].to(int),
url: track["vmapUrl"].to(string)
)
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
VideoType* = enum
vmap, m3u8
vmap, m3u8, mp4
Video* = object
contentType*: VideoType
contentId*: string
playbackType*: VideoType
durationMs*: int
url*: string
thumb*: string
id*: string
views*: string
length*: int
available*: bool
Gif* = object

View file

@ -88,12 +88,19 @@
#
#proc renderVideo(video: Video): string =
<div class="attachments">
<div class="gallery-row" style="max-height: unset;">
<div class="attachment image">
<div class="gallery-video">
<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>
<div class="video-overlay">
<p>Video playback not supported</p>
</div>
#end case
</div>
</div>
</div>