Add audio, video, source elements

README.md

@@ -131,6 +131,15 @@ In this example, if `isAdmin` is `true`, the `Admin Panel` link is rendered. Oth
 - **Script-supporting Elements**: `Script`, `Noscript`
 - **Inline Semantic**: `A`, `Strong`, `Em`, `Code`, `I`
 
+### Additional Utility: HTML Comments
+
+Apart from standard elements, `elem-go` also allows you to insert HTML comments using the `Comment` function:
+
+```go
+comment := elem.Comment("Section: Main Content Start")
+// Generates: <!-- Section: Main Content Start -->
+```
+
 ## HTMX Integration
 
 We provide a subpackage for htmx integration. [Read more about htmx integration here](HTMX_INTEGRATION.md).

attrs/attrs.go

@@ -89,6 +89,21 @@ const (
 	ReferrerPolicy  = "referrerpolicy"
 	Sandbox         = "sandbox"
 	SrcDoc          = "srcdoc"
+
+	// Audio/Video Attributes
+	Controls = "controls"
+	Loop     = "loop"
+	Muted    = "muted"
+	Preload  = "preload"
+	Autoplay = "autoplay"
+
+	// Video-Specific Attributes
+	Poster      = "poster"
+	Playsinline = "playsinline"
+
+	// Source Element-Specific Attributes
+	Media = "media"
+	Sizes = "sizes"
 )
 
 type Props map[string]string

elem.go

@@ -36,13 +36,18 @@ var booleanAttrs = map[string]struct{}{
 	attrs.AllowFullScreen: {},
 	attrs.Async:           {},
 	attrs.Autofocus:       {},
+	attrs.Autoplay:        {},
 	attrs.Checked:         {},
+	attrs.Controls:        {},
 	attrs.Defer:           {},
 	attrs.Disabled:        {},
 	attrs.IsMap:           {},
+	attrs.Loop:            {},
 	attrs.Multiple:        {},
+	attrs.Muted:           {},
 	attrs.NoValidate:      {},
 	attrs.Open:            {},
+	attrs.Playsinline:     {},
 	attrs.Readonly:        {},
 	attrs.Required:        {},
 	attrs.Selected:        {},

elements.go

@@ -381,3 +381,18 @@ func Td(attrs attrs.Props, children ...Node) *Element {
 func IFrame(attrs attrs.Props, children ...Node) *Element {
 	return NewElement("iframe", attrs, children...)
 }
+
+// Audio creates an <audio> element.
+func Audio(attrs attrs.Props, children ...Node) *Element {
+	return NewElement("audio", attrs, children...)
+}
+
+// Video creates a <video> element.
+func Video(attrs attrs.Props, children ...Node) *Element {
+	return NewElement("video", attrs, children...)
+}
+
+// Source creates a <source> element.
+func Source(attrs attrs.Props, children ...Node) *Element {
+	return NewElement("source", attrs, children...)
+}

elements_test.go

@@ -485,3 +485,23 @@ func TestAllowFullScreen(t *testing.T) {
 	el := IFrame(attrs.Props{attrs.Src: "https://www.youtube.com/embed/446E-r0rXHI", attrs.AllowFullScreen: "true"})
 	assert.Equal(t, expected, el.Render())
 }
+
+func TestAudioWithSourceElementsAndFallbackText(t *testing.T) {
+	expected := `<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>`
+	el := Audio(attrs.Props{attrs.Controls: "true"},
+		Source(attrs.Props{attrs.Src: "horse.ogg", attrs.Type: "audio/ogg"}),
+		Source(attrs.Props{attrs.Src: "horse.mp3", attrs.Type: "audio/mpeg"}),
+		Text("Your browser does not support the audio tag."),
+	)
+	assert.Equal(t, expected, el.Render())
+}
+
+func TestVideoWithSourceElementsAndFallbackText(t *testing.T) {
+	expected := `<video controls height="240" width="320"><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>`
+	el := Video(attrs.Props{attrs.Width: "320", attrs.Height: "240", attrs.Controls: "true"},
+		Source(attrs.Props{attrs.Src: "movie.mp4", attrs.Type: "video/mp4"}),
+		Source(attrs.Props{attrs.Src: "movie.ogg", attrs.Type: "video/ogg"}),
+		Text("Your browser does not support the video tag."),
+	)
+	assert.Equal(t, expected, el.Render())
+}