Add video tutorial link to the Deep Links panel (#9925) * Add tutorialVideoUrl field to ScreenMetaData for deep links video * Update VideoTutorialLink to support custom video URLs Use the tutorialVideoUrl from ScreenMetaData when available, falling back to the default DevTools YouTube video timestamp. * Use youtu.be short URL format for deep links tutorial video * Move deep links tutorial video URL to a named constant * Assert that VideoTutorialLink has a video URL or timestamp * Add release notes entry for deep links tutorial link
diff --git a/packages/devtools_app/lib/src/framework/scaffold/status_line.dart b/packages/devtools_app/lib/src/framework/scaffold/status_line.dart index 54e78dc..9c362da 100644 --- a/packages/devtools_app/lib/src/framework/scaffold/status_line.dart +++ b/packages/devtools_app/lib/src/framework/scaffold/status_line.dart
@@ -90,7 +90,9 @@ final pageStatus = currentScreen.buildStatus(context); final widerThanXxs = screenWidth > MediaSize.xxs; final screenMetaData = ScreenMetaData.lookup(currentScreen.screenId); - final showVideoTutorial = screenMetaData?.tutorialVideoTimestamp != null; + final showVideoTutorial = + screenMetaData?.tutorialVideoTimestamp != null || + screenMetaData?.tutorialVideoUrl != null; return [ Row( mainAxisSize: MainAxisSize.min, @@ -237,12 +239,15 @@ /// A widget that links to the "Dive in to DevTools" YouTube video at the /// chapter for the given [screenMetaData]. class VideoTutorialLink extends StatelessWidget { - const VideoTutorialLink({ + VideoTutorialLink({ super.key, required this.screenMetaData, required this.screenWidth, required this.highlightForConnection, - }); + }) : assert( + screenMetaData.tutorialVideoTimestamp != null || + screenMetaData.tutorialVideoUrl != null, + ); final ScreenMetaData screenMetaData; @@ -262,6 +267,7 @@ link: GaLink( display: screenWidth <= MediaSize.xs ? 'Tutorial' : 'Watch tutorial', url: + screenMetaData.tutorialVideoUrl ?? '$_devToolsYouTubeVideoUrl${screenMetaData.tutorialVideoTimestamp}', gaScreenName: screenMetaData.id, gaSelectedItemDescription:
diff --git a/packages/devtools_app/lib/src/shared/framework/screen.dart b/packages/devtools_app/lib/src/shared/framework/screen.dart index 6e090ff..32f3d21 100644 --- a/packages/devtools_app/lib/src/shared/framework/screen.dart +++ b/packages/devtools_app/lib/src/shared/framework/screen.dart
@@ -27,6 +27,8 @@ defaultValue: true, ); +const _deepLinksTutorialVideoUrl = 'https://youtu.be/d7sZL6h1Elw'; + enum ScreenMetaData { home( 'home', @@ -124,6 +126,7 @@ requiresConnection: false, requiresDartVm: true, requiresFlutter: true, + tutorialVideoUrl: _deepLinksTutorialVideoUrl, ), vmTools( 'vm-tools', @@ -154,6 +157,7 @@ this.worksWithOfflineData = false, this.requiresLibrary, this.tutorialVideoTimestamp, + this.tutorialVideoUrl, }) : assert( icon == null || iconAsset == null, 'Only one of icon or iconAsset may be specified.', @@ -179,6 +183,13 @@ /// a particular chapter. final String? tutorialVideoTimestamp; + /// A custom video tutorial URL for a screen. + /// + /// If provided, this URL will be used instead of the default + /// "Dive in to DevTools" YouTube video timestamp. This is used for + /// screens that have their own dedicated video tutorials. + final String? tutorialVideoUrl; + /// Looks up the [ScreenMetaData] value for the screen [id]. static ScreenMetaData? lookup(String id) { return ScreenMetaData.values.firstWhereOrNull((screen) => screen.id == id);
diff --git a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md index 2d797c8..f589bd1 100644 --- a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md +++ b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
@@ -61,7 +61,9 @@ ## Deep links tool updates -TODO: Remove this section if there are not any updates. +* Added a "Watch tutorial" link to the status line that points to the + [deep links video tutorial](https://youtu.be/d7sZL6h1Elw). + [#9925](https://github.com/flutter/devtools/pull/9925) ## VS Code sidebar updates