tforgione
/
elm-video
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Clean

This commit is contained in:
Thomas Forgione 2021-06-21 14:34:27 +02:00
parent d1bd418e89
commit b41c62e938
5 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
<script src="js/main.js"></script>
<script src="js/ports.js"></script>
<script>
embed({
PolymnyVideo.embed({
node: document.getElementById("container"),
url: "video/manifest.m3u8",
});

215
js/ports.js
View File

@ -14,118 +14,129 @@ Object.defineProperty(HTMLElement.prototype, "polymnyVideoDocument", {
}
});
function embed(options) {
if (!(options.node instanceof HTMLElement)) {
throw new Error("options.node must be an HTMLElement");
}
const PolymnyVideo = (function() {
if (typeof options.url !== "string" && ! (options.url instanceof String)) {
throw new Error("options.url must be a string");
}
const PolymnyVideo = {};
options.flags = options;
options.width = window.innerWidth;
options.height = window.innerHeight;
const app = Elm.Examples.Embed.init(options);
setupApp(app);
}
function setupApp(app) {
let hls;
app.ports.polymnyVideoInit.subscribe(function(arg) {
requestAnimationFrame(function() {
const video = document.getElementById(arg[0]);
if (Hls.isSupported()) {
hls = new Hls();
window.hls = hls;
hls.loadSource(arg[1]);
hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
const availableQualities = hls.levels.map((l) => l.height);
availableQualities.unshift(0);
app.ports.polymnyVideoNowHasQualities.send(availableQualities);
});
hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
app.ports.polymnyVideoNowHasQuality.send({
auto: hls.autoLevelEnabled,
height: hls.levels[data.level].height
});
})
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function(event, data) {
app.ports.polymnyVideoNowHasSubtitles.send(data.subtitleTracks);
});
hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, function(event, data) {
app.ports.polymnyVideoNowHasSubtitleTrack.send(data.id === -1 ? null : hls.subtitleTracks[data.id]);
});
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = arg[1];
}
});
});
app.ports.polymnyVideoPlayPause.subscribe(function(arg) {
const video = document.getElementById(arg);
if (video.paused) {
video.play();
} else {
video.pause();
PolymnyVideo.embed = function(options) {
if (!(options.node instanceof HTMLElement)) {
throw new Error("options.node must be an HTMLElement");
}
});
app.ports.polymnyVideoSeek.subscribe(function(arg) {
const video = document.getElementById(arg[0]);
video.currentTime = arg[1];
});
if (typeof options.url !== "string" && ! (options.url instanceof String)) {
throw new Error("options.url must be a string");
}
app.ports.polymnyVideoRequestFullscreen.subscribe(function(arg) {
document.getElementById(arg + '-full').requestFullscreen();
});
options.flags = options;
options.width = window.innerWidth;
options.height = window.innerHeight;
app.ports.polymnyVideoExitFullscreen.subscribe(function(arg) {
document.exitFullscreen();
});
const app = Elm.Examples.Embed.init(options);
PolymnyVideo.setup(app);
app.ports.polymnyVideoSetPlaybackRate.subscribe(function(arg) {
const video = document.getElementById(arg[0]);
video.playbackRate = arg[1];
});
};
app.ports.polymnyVideoSetQuality.subscribe(function(arg) {
var old = hls.currentLevel;
if (arg[1].auto) {
hls.currentLevel = -1;
} else {
hls.levels.forEach((level, levelIndex) => {
if (level.height === arg[1].height) {
hls.currentLevel = levelIndex;
PolymnyVideo.setup = function(app) {
let hls;
app.ports.polymnyVideoInit.subscribe(function(arg) {
requestAnimationFrame(function() {
const video = document.getElementById(arg[0]);
if (Hls.isSupported()) {
hls = new Hls();
window.hls = hls;
hls.loadSource(arg[1]);
hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
const availableQualities = hls.levels.map((l) => l.height);
availableQualities.unshift(0);
app.ports.polymnyVideoNowHasQualities.send(availableQualities);
});
hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
app.ports.polymnyVideoNowHasQuality.send({
auto: hls.autoLevelEnabled,
height: hls.levels[data.level].height
});
})
hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, function(event, data) {
app.ports.polymnyVideoNowHasSubtitles.send(data.subtitleTracks);
});
hls.on(Hls.Events.SUBTITLE_TRACK_SWITCH, function(event, data) {
app.ports.polymnyVideoNowHasSubtitleTrack.send(data.id === -1 ? null : hls.subtitleTracks[data.id]);
});
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = arg[1];
}
if (arg[2]) {
video.play();
}
});
}
if (old === hls.currentLevel) {
app.ports.polymnyVideoNowHasQuality.send({
auto: hls.autoLevelEnabled,
height: hls.currentLevel === -1 ? 0 : hls.levels[hls.currentLevel].height
});
}
});
});
app.ports.polymnyVideoSetVolume.subscribe(function(arg) {
const video = document.getElementById(arg[0]);
video.volume = arg[1].volume;
video.muted = arg[1].muted;
});
app.ports.polymnyVideoPlayPause.subscribe(function(arg) {
const video = document.getElementById(arg);
if (video.paused) {
video.play();
} else {
video.pause();
}
});
app.ports.polymnyVideoSetSubtitleTrack.subscribe(function(arg) {
hls.subtitleDisplay = arg[1] !== -1;
hls.subtitleTrack = arg[1];
});
app.ports.polymnyVideoSeek.subscribe(function(arg) {
const video = document.getElementById(arg[0]);
video.currentTime = arg[1];
});
}
app.ports.polymnyVideoRequestFullscreen.subscribe(function(arg) {
document.getElementById(arg + '-full').requestFullscreen();
});
app.ports.polymnyVideoExitFullscreen.subscribe(function(arg) {
document.exitFullscreen();
});
app.ports.polymnyVideoSetPlaybackRate.subscribe(function(arg) {
const video = document.getElementById(arg[0]);
video.playbackRate = arg[1];
});
app.ports.polymnyVideoSetQuality.subscribe(function(arg) {
var old = hls.currentLevel;
if (arg[1].auto) {
hls.currentLevel = -1;
} else {
hls.levels.forEach((level, levelIndex) => {
if (level.height === arg[1].height) {
hls.currentLevel = levelIndex;
}
});
}
if (old === hls.currentLevel) {
app.ports.polymnyVideoNowHasQuality.send({
auto: hls.autoLevelEnabled,
height: hls.currentLevel === -1 ? 0 : hls.levels[hls.currentLevel].height
});
}
});
app.ports.polymnyVideoSetVolume.subscribe(function(arg) {
const video = document.getElementById(arg[0]);
video.volume = arg[1].volume;
video.muted = arg[1].muted;
});
app.ports.polymnyVideoSetSubtitleTrack.subscribe(function(arg) {
hls.subtitleDisplay = arg[1] !== -1;
hls.subtitleTrack = arg[1];
});
};
return PolymnyVideo;
})();

2
src/Examples/Embed.elm
View File

@ -64,7 +64,7 @@ init flags =
|> Result.withDefault 0
( video, cmd ) =
Video.fromUrl url "video"
Video.fromConfig { url = url, id = "video", autoplay = True }
in
( { video = video, screenSize = ( width, height ) }
, Cmd.map VideoMsg cmd

27
src/Video.elm
View File

@ -3,7 +3,7 @@ port module Video exposing
, Settings(..)
, SubtitleTrack
, Video
, fromUrl
, fromConfig
, init
, nowHasQualities
, nowHasQuality
@ -44,10 +44,17 @@ type alias Video =
}
fromUrl : String -> String -> ( Video, Cmd Msg )
fromUrl url id =
( { url = url
, id = id
type alias Config =
{ url : String
, id : String
, autoplay : Bool
}
fromConfig : Config -> ( Video, Cmd Msg )
fromConfig config =
( { url = config.url
, id = config.id
, playing = False
, position = 0
, duration = 0
@ -69,7 +76,7 @@ fromUrl url id =
, showIcon = Nothing
, showIconRequested = Nothing
}
, init id url
, init config.id config.url config.autoplay
)
@ -265,12 +272,12 @@ update msg model =
( { model | showMiniature = miniature }, Cmd.none )
port polymnyVideoInit : ( String, String ) -> Cmd msg
port polymnyVideoInit : ( String, String, Bool ) -> Cmd msg
init : String -> String -> Cmd msg
init id url =
polymnyVideoInit ( id, url )
init : String -> String -> Bool -> Cmd msg
init id url autoplay =
polymnyVideoInit ( id, url, autoplay )
port polymnyVideoPlayPause : String -> Cmd msg

18
src/Video/Views.elm
View File

@ -258,24 +258,10 @@ overlay model =
(Element.width Element.fill
:: Element.height Element.fill
:: Font.color (Element.rgb 1 1 1)
:: (if not model.playing then
Background.color (Element.rgba 0 0 0 0.5)
else
Background.color (Element.rgba 0 0 0 0)
)
:: Events.overlay
)
(case ( model.playing, model.showIcon ) of
( False, _ ) ->
Element.el
[ Element.centerX
, Element.centerY
, Element.scale 10
]
(Icons.play True)
( _, Just icon ) ->
(case model.showIcon of
Just icon ->
animatedEl fadeOutZoom
[ Background.color (Element.rgb 0 0 0)
, Border.rounded 100