Doc: Add support for the \youtube macro

Show links to Youtube videos using thumbnails with a play button.

Change-Id: I131f24b1fb723c817c2387429bbf52997003f105
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>

doc/config/macros.qdocconf

@@ -48,3 +48,17 @@ macro.beginfloatright.HTML  = "<div style=\"float: right; margin-left: 2em\">"
 macro.endfloat.HTML         = "</div>"
 macro.clearfloat.HTML       = "<br style=\"clear: both\" />"
 macro.emptyspan.HTML	    = "<span></span>"
+
+# Embed YouTube content by video ID - Example: \youtube dQw4w9WgXcQ
+# Also requires a <ID>.jpg thumbnail for offline docs. In .qdocconf, add:
+#
+# HTML.extraimages           += images/dQw4w9WgXcQ.jpg
+# qhp.ProjectName.extraFiles += images/dQw4w9WgXcQ.jpg
+#
+macro.youtube.HTML = "<div class=\"video\">\n<span class=\"vspan\"></span>\n" \
+                     "<iframe src=\"https://www.youtube.com/embed/\1\"" \
+                     "frameborder=\"0\" allowfullscreen>\n" \
+                     "<a href=\"https://www.youtube.com/watch/?v=\1\">\n"\
+                     "<img src=\"images/\1.jpg\"" \
+                     "title=\"Click to play in a browser\" /></a>\n" \
+                     "</iframe></div>\n"

doc/qtdesignstudio/config/qtdesignstudio.qdocconf

@@ -69,8 +69,10 @@ exampledirs = ../examples/ \
               ../../qtcreator/examples
 examples.fileextensions += *.qml *.svg *.ts *.qm
 
-HTML.extraimages         = ../../config/images/commercial.png
+{HTML.extraimages,qhp.qtdesignstudio.extraFiles} += ../../config/images/commercial.png \
-qhp.QtCreator.extraFiles = ../../config/images/commercial.png
+              ../images/videoicons/9ihYeC0YJ0M.jpg \
+              ../images/videoicons/aV6kFxH3Xws.jpg \
+              ../images/videoicons/ZzbucmQPU44.jpg
 
 depends +=    qtwidgets \
               qtcore \

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc

@@ -52,4 +52,6 @@
             Photoshop, you should follow the guidelines for working with
             Photoshop and organizing your assets.
     \endlist
+
+    \include qtbridge-tutorial-links.qdocinc qtpsbridge videos
 */

doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc

@@ -249,15 +249,6 @@
     In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the
     override JSX script.
 
-    For more information, watch a video tutorial and webinar about using \QBPS:
-
-    \list
-        \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone}
-            {Building an Instrument Cluster for Your Car HMI, Part 1}
-        \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44}
-            {From Photoshop to Prototype with Qt Design Studio}
-    \endlist
-
     \section1 Importing Metadata & Assets
 
     \QBPS can import metadata generated from other tools and generate a Photoshop document. A

doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc

@@ -52,4 +52,6 @@
             Sketch, you should follow the guidelines for working with Sketch and
             organizing your assets.
     \endlist
+
+    \include qtbridge-tutorial-links.qdocinc qtsketchbridge tutorials
 */

doc/qtdesignstudio/src/qtbridge/qtbridge-tutorial-links.qdocinc

@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Bridge documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+//! [qtpsbridge videos]
+
+    \section1 \QBPS Videos
+
+    For more information, watch a video tutorial and webinar about using \QBPS
+    that are also accessible from the \uicontrol Tutorials tab of the Welcome
+    mode:
+
+    \list
+        \li Building an Instrument Cluster for Your Car HMI, Part 1
+
+            \youtube aV6kFxH3Xws
+
+            You can access the Cluster tutorial source files in the
+            \uicontrol Examples tab.
+
+        \li From Photoshop to Prototype with Qt Design Studio
+
+            \youtube ZzbucmQPU44
+    \endlist
+
+//! [qtpsbridge videos]
+
+
+//! [qtsketchbridge tutorials]
+
+    \section1 \QBSK Tutorials
+
+    For more information, read the tutorials about using \QBSK that are also
+    accessible from the \uicontrol Tutorials tab of the Welcome mode:
+
+    \list
+        \li \l{https://www.qt.io/blog/qt-design-studio-sketch-bridge-tutorial-part-1}
+            {Sketch Bridge Tutorial Part 1}
+        \li \l{https://www.qt.io/blog/qt-design-studio-sketch-bridge-tutorial-part-2}
+            {Sketch Bridge Tutorial Part 2}
+    \endlist
+
+//! [qtsketchbridge tutorials]

doc/qtdesignstudio/src/qtdesignstudio-examples.qdoc

@@ -38,8 +38,8 @@
     The \uicontrol Tutorials tab contains links to video tutorials that provide
     more information about \QDS.
 
-    You can access the Cluster tutorial source files in the \uicontrol Examples
+    \include qtbridge-tutorial-links.qdocinc qtpsbridge videos
-    tab.
+    \include qtbridge-tutorial-links.qdocinc qtsketchbridge tutorials
 
     \section1 Examples
 

doc/qtdesignstudio/src/qtdesignstudio-importing-2d.qdoc

@@ -100,19 +100,6 @@
     \uicontrol {Asset Import} dialog while importing, fix the issues in
     design tool and export the assets again.
 
-    \section1 \QB Videos
+    \include qtbridge-tutorial-links.qdocinc qtpsbridge videos
-
+    \include qtbridge-tutorial-links.qdocinc qtsketchbridge tutorials
-    For more information, see the \QB tutorials that are also accessible from
-    the \uicontrol Tutorials tab of the Welcome mode:
-
-    \list
-        \li \l{https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-partone}
-            {Building an Instrument Cluster for Your Car HMI, Part 1} (\QBPS)
-        \li \l{https://www.youtube.com/watch?v=ZzbucmQPU44}
-            {From Photoshop to Prototype with Qt Design Studio}
-        \li \l{https://www.qt.io/blog/qt-design-studio-sketch-bridge-tutorial-part-1}
-            {Sketch Bridge Tutorial Part 1}
-        \li \l{https://www.qt.io/blog/qt-design-studio-sketch-bridge-tutorial-part-2}
-            {Sketch Bridge Tutorial Part 2}
-    \endlist
 */

doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc

@@ -81,6 +81,11 @@
             application.
     \endlist
 
+    For an example of creating a \uicontrol {Qt Quick 3D Application} project,
+    watch the following video:
+
+    \youtube 9ihYeC0YJ0M
+
     \section1 Using Project Wizards
 
     \list 1