This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

Content.Media

Constructors for basic media content (image, video, audio)

Constructors

empty : Content.Media msg

Construct empty media content as a placeholder

Content.Media.empty
  |> Content.Media.container "figure"
  |> Dom.Element.toNode

--> <figure></figure>
image : (String, String) -> Content.Media msg

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>
video : List (String, String) -> Content.Media msg

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>
audio : List (String, String) -> Content.Media msg

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>

Rendering

container : String -> Content.Media msg -> Dom.Element msg

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 = []
  }