From 6ff80e95f428c15f3d80b0ecf23491304ecb87c9 Mon Sep 17 00:00:00 2001
From: David Botton <david@botton.com>
Date: Sun, 24 Jan 2021 20:16:18 -0500
Subject: [PATCH] Tutorial 15 - Multi-media

---
 README.md                 |  1 +
 clog-multimedia.lisp      | 12 ++----------
 clog.lisp                 | 13 ++++++++++++-
 doc/clog-manual.html      | 32 ++++++++++++++++++++++----------
 tutorial/15-tutorial.lisp | 27 +++++++++++++++++++++++----
 tutorial/README.md        |  1 +
 6 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index 9e00bee..671420c 100644
--- a/README.md
+++ b/README.md
@@ -138,6 +138,7 @@ Tutorial Summary
 - 12-tutorial.lisp - Running a website in CLOG (routing)
 - 13-tutorial/     - Flying Solo - A minimalist CLOG project
 - 14-tutorial.lisp - Local (persistent) and Session client-side storage
+- 15-tutorial.lisp - Multi-media
 
 Demo Summary
 
diff --git a/clog-multimedia.lisp b/clog-multimedia.lisp
index 1a0dbbe..f3d956d 100644
--- a/clog-multimedia.lisp
+++ b/clog-multimedia.lisp
@@ -72,7 +72,7 @@
   (:documentation "Get/Setf postion of media in seconds."))
 
 (defmethod media-position ((obj clog-multimedia))
-  (parse-integer (property obj "currentTime")))
+  (property obj "currentTime"))
 
 (defgeneric set-media-position (clog-multimedia value)
   (:documentation "Set media source VALUE for CLOG-MULTIMEDIA"))
@@ -215,6 +215,7 @@ Common values - 1.0 normal, 0.5 half speed, -1.0 reverse"))
   (:documentation "Returns true if browser claims support of a media type.
 Browsers report possibility but not guarantees of being able to support a
 media type.
+
      Common values:
        video/ogg
        video/mp4
@@ -239,15 +240,6 @@ media type.
 ;; Events - clog-multimedia
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-;;  The standard event order for a normal file load is:
-;;    On_Load_Start
-;;    On_Duration_Change
-;;    On_Loaded_Meta_Data
-;;    On_Loaded_Data
-;;    On_Progress
-;;    On_Can_Play
-;;    On_Can_Play_Though
-
 ;;;;;;;;;;;;;;;;;;;;;;;;
 ;; set-on-media-abort ;;
 ;;;;;;;;;;;;;;;;;;;;;;;;
diff --git a/clog.lisp b/clog.lisp
index c1bc195..937f348 100644
--- a/clog.lisp
+++ b/clog.lisp
@@ -450,7 +450,18 @@ embedded in a native template application.)"
   (pause-media       generic-function)
   (load-media        generic-function)
   (can-play-type-p   generic-function)
-  
+
+  "CLOG-Multimedia - Event Handlers
+
+    The standard event order for a normal file load is:
+      On_Load_Start
+      On_Duration_Change
+      On_Loaded_Meta_Data
+      On_Loaded_Data
+      On_Progress
+      On_Can_Play
+      On_Can_Play_Though"
+
   (set-on-media-abort      generic-function)
   (set-on-media-error      generic-function)
   (set-on-can-play         generic-function)
diff --git a/doc/clog-manual.html b/doc/clog-manual.html
index ab438fb..c41b608 100644
--- a/doc/clog-manual.html
+++ b/doc/clog-manual.html
@@ -3183,17 +3183,18 @@ Common values - 1.0 normal, 0.5 half speed, -1.0 reverse</p></li>
 
 <p>Returns true if browser claims support of a media type.
 Browsers report possibility but not guarantees of being able to support a
-media type.
-     Common values:
-       video/ogg
-       video/mp4
-       video/webm
-       audio/mpeg
-       audio/ogg
-       audio/mp4
-       audio/mp3</p>
+media type.</p>
 
-<pre><code> Common values, including codecs:
+<pre><code> Common values:
+   video/ogg
+   video/mp4
+   video/webm
+   audio/mpeg
+   audio/ogg
+   audio/mp4
+   audio/mp3
+
+ Common values, including codecs:
    video/ogg; codecs=&quot;theora, vorbis&quot;
    video/mp4; codecs=&quot;avc1.4D401E, mp4a.40.2&quot;
    video/webm; codecs=&quot;vp8.0, vorbis&quot;
@@ -3202,6 +3203,17 @@ media type.
 </code></pre></li>
 </ul>
 
+<p>CLOG-Multimedia - Event Handlers</p>
+
+<p>The standard event order for a normal file load is:
+  On_Load_Start
+  On_Duration_Change
+  On_Loaded_Meta_Data
+  On_Loaded_Data
+  On_Progress
+  On_Can_Play
+  On_Can_Play_Though</p>
+
 <p><a id='x-28CLOG-3ASET-ON-MEDIA-ABORT-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
diff --git a/tutorial/15-tutorial.lisp b/tutorial/15-tutorial.lisp
index 9432437..b41e451 100644
--- a/tutorial/15-tutorial.lisp
+++ b/tutorial/15-tutorial.lisp
@@ -5,10 +5,29 @@
 (in-package :clog-user)
 
 (defun on-new-window (body)
-  (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4")
-  (create-audio body :source "https://www.w3schools.com/html/horse.ogg")
-  
-  (run body))
+
+  (let* ((vid (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4"))
+	 (tmp (create-br body))
+	 (vpl (create-button body :content ">"))
+	 (vst (create-button body :content "||"))
+	 (vlc (create-form-element body :input))
+	 (tmp (create-hr body))
+	 (aud (create-audio body :source "https://www.w3schools.com/html/horse.ogg"))
+	 (tmp (create-br body))
+	 (apl (create-button body :content ">"))
+	 (ast (create-button body :content "||"))
+	 (alc (create-form-element body :input))
+	 (tmp (create-hr body)))
+
+    (set-on-click vpl (lambda (obj)(play-media vid)))
+    (set-on-click apl (lambda (obj)(play-media aud)))
+    (set-on-click vst (lambda (obj)(pause-media vid)))
+    (set-on-click ast (lambda (obj)(pause-media aud)))
+
+    (set-on-time-update vid (lambda (obj)(setf (value vlc) (media-position vid))))
+    (set-on-time-update aud (lambda (obj)(setf (value alc) (media-position aud))))
+    
+  (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."
diff --git a/tutorial/README.md b/tutorial/README.md
index 1a07031..44cf241 100644
--- a/tutorial/README.md
+++ b/tutorial/README.md
@@ -47,3 +47,4 @@ Tutorial Summary
 - 12-tutorial.lisp - Running a website in CLOG (routing)
 - 13-tutorial/     - Flying Solo - A minimalist CLOG project
 - 14-tutorial.lisp - Local (persistent) and Session client side storage
+- 15-tutorial.lisp - Multi-media