Constructors for basic media content (image, video, audio)
Construct empty media content as a placeholder
Content.Media.empty
|> Content.Media.container "figure"
|> Dom.Element.toNode
--> <figure></figure>
Construct image content
( "mountain.jpg"
, "A photograph of a mountain"
)
|> Content.Media.image
|> Content.Media.container "figure"
|> Dom.Element.toNode
--> <figure>
-- <img src="mountain.jpg" alt="A photograph of a mountain">
-- </figure>
Construct video content
[ ("movie.mp4", "video/mp4")
, ("movie.ogg", "video/ogg")
]
|> Content.Media.video
|> Content.Media.container "div"
|> Dom.Element.toNode
--> <div>
-- <video controls>
-- <source src="movie.mp4" type="video/mp4">
-- <source src="movie.ogg" type="video/ogg">
-- <p>Video file 'movie.mp4' cannot be loaded. Verify that your browser
-- is up to date and can play 'video/mp4' files.</p>
-- <p>Video file 'movie.ogg' cannot be loaded. Verify that your browser
-- is up to date and can play 'video/ogg' files.</p>
-- </video>
-- </div>
Construct audio content
[ ("horse.ogg", "audio/ogg")
, ("horse.mp3", "audio/mpeg")
]
|> Content.Media.audio
|> Content.Media.container "div"
|> Dom.Element.toNode
--> <div>
-- <audio controls>
-- <source src="horse.ogg" type="audio/ogg">
-- <source src="horse.mp3" type="audio/mpeg">
-- <p>Audio file 'horse.ogg' cannot be loaded. Verify that your browser
-- is up to date and can play 'audio/ogg' files.</p>
-- <p>Audio file 'horse.mp3' cannot be loaded. Verify that your browser
-- is up to date and can play 'audio/mpeg' files.</p>
-- </audio>
-- </div>
Place media content in a Dom.Element
container, with the HTML tag given
in the first argument
module Content.Media exposing
( empty
, image, video, audio
, container
)
{-| Constructors for basic media content (image, video, audio)
# Constructors
@docs empty, image, video, audio
# Rendering
@docs container
-}
import Dom
import Dom.Node
import Dom.Property
import Dom.Element
import Content
{-| Construct empty media content as a placeholder
Content.Media.empty
|> Content.Media.container "figure"
|> Dom.Element.toNode
--> <figure></figure>
-}
empty : Content.Media msg
empty =
[]
|> Content.Media
{-| Construct image content
( "mountain.jpg"
, "A photograph of a mountain"
)
|> Content.Media.image
|> Content.Media.container "figure"
|> Dom.Element.toNode
--> <figure>
-- <img src="mountain.jpg" alt="A photograph of a mountain">
-- </figure>
-}
image : (String, String) -> Content.Media msg
image (path, altText) =
[ [ "src"
|> Dom.Property.string path
, "alt"
|> Dom.Property.string altText
]
|> Dom.Node.leaf "img"
]
|> Content.Media
{-| Construct video content
[ ("movie.mp4", "video/mp4")
, ("movie.ogg", "video/ogg")
]
|> Content.Media.video
|> Content.Media.container "div"
|> Dom.Element.toNode
--> <div>
-- <video controls>
-- <source src="movie.mp4" type="video/mp4">
-- <source src="movie.ogg" type="video/ogg">
-- <p>Video file 'movie.mp4' cannot be loaded. Verify that your browser
-- is up to date and can play 'video/mp4' files.</p>
-- <p>Video file 'movie.ogg' cannot be loaded. Verify that your browser
-- is up to date and can play 'video/ogg' files.</p>
-- </video>
-- </div>
-}
video : List (String, String) -> Content.Media msg
video sourceList =
let
toSourceNode (path, filetype) =
[ "src"
|> Dom.Property.string path
, "type"
|> Dom.Property.string filetype
]
|> Dom.Node.leaf "source"
toErrorMessage (path, filetype) =
( "Video file '"
++ path
++ "' cannot be loaded. "
++ "Verify that your browser is up to date and can play '"
++ filetype
++ "' files."
)
|> Dom.Node.textWrapper "p" []
in
[ [ sourceList
|> List.map toSourceNode
, sourceList
|> List.map toErrorMessage
]
|> List.concat
|> Dom.Node.container "video"
[ "controls"
|> Dom.Property.bool True
]
]
|> Content.Media
{-| Construct audio content
[ ("horse.ogg", "audio/ogg")
, ("horse.mp3", "audio/mpeg")
]
|> Content.Media.audio
|> Content.Media.container "div"
|> Dom.Element.toNode
--> <div>
-- <audio controls>
-- <source src="horse.ogg" type="audio/ogg">
-- <source src="horse.mp3" type="audio/mpeg">
-- <p>Audio file 'horse.ogg' cannot be loaded. Verify that your browser
-- is up to date and can play 'audio/ogg' files.</p>
-- <p>Audio file 'horse.mp3' cannot be loaded. Verify that your browser
-- is up to date and can play 'audio/mpeg' files.</p>
-- </audio>
-- </div>
-}
audio : List (String, String) -> Content.Media msg
audio sourceList =
let
toSourceNode (path, filetype) =
[ "src"
|> Dom.Property.string path
, "type"
|> Dom.Property.string filetype
]
|> Dom.Node.leaf "source"
toErrorMessage (path, filetype) =
( "Audio file '"
++ path
++ "' cannot be loaded. "
++ "Verify that your browser is up to date and can play '"
++ filetype
++ "' files."
)
|> Dom.Node.textWrapper "p" []
in
[ [ sourceList
|> List.map toSourceNode
, sourceList
|> List.map toErrorMessage
]
|> List.concat
|> Dom.Node.container "audio"
[ "controls"
|> Dom.Property.bool True
]
]
|> Content.Media
{-| Place media content in a `Dom.Element` container, with the HTML tag given
in the first argument
-}
container : String -> Content.Media msg -> Dom.Element msg
container htmlTag mediaContent =
{ tag = htmlTag
, attributes = []
, classes = []
, children =
( case mediaContent of
Content.Media nodeList ->
nodeList
)
, text = ""
, namespace = ""
, keys = []
}