This is an automated email from the ASF dual-hosted git repository.
pabloem pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/master by this push:
new 178cb7b Merge pull request #16606 from [BEAM-13247] [Playground]
Embedding iframe
178cb7b is described below
commit 178cb7b65401d860b63fc7415f02f1dea2c4582f
Author: Alexandr Zhuravlev <[email protected]>
AuthorDate: Fri Jan 28 07:48:42 2022 +0400
Merge pull request #16606 from [BEAM-13247] [Playground] Embedding iframe
* [BEAM-13247] Building embedded iframe with run functionality
* [BEAM-13247] Implemented Run button & log section to the embedded iframe
* [BEAM-13247] Refactored components
* [BEAM-13247] Restricted editing in embedded iframe
* [BEAM-13247] Implemented editable/not editable versions of iframe, added
Output/Log TabBar
* [BEAM-13247] Redesigned page providers for EmbeddedPlaygroundPage,
changed default ratio of the EmbeddedSplitView
* [BEAM-13247] Fixes after merge
* [BEAM-13247] Added possibilities to change height & use any text in
iFrame, removed codeScrolling. Added new iFrame on the try-beam-playground page
* [BEAM-13247] Changed iFrame src link
* [BEAM-13247] Fixed PR remarks
---
playground/frontend/lib/constants/params.dart | 2 +
.../modules/editor/components/editor_textarea.dart | 33 +++---
.../lib/modules/output/components/output.dart | 9 +-
.../components/output_header/output_header.dart | 4 +-
.../components/embedded_actions.dart | 34 ++-----
.../components/embedded_appbar_title.dart | 85 ++++++++++++++++
.../components/embedded_editor.dart | 7 +-
.../components/embedded_split_view.dart | 90 ++++++++++++++++
.../embedded_page_providers.dart | 113 +++++++++++++++++++++
.../embedded_playground_page.dart | 39 ++++---
.../components/editor_textarea_wrapper.dart | 1 +
.../components/playground_page_body.dart | 4 +-
playground/frontend/lib/pages/routes.dart | 4 +-
.../content/en/get-started/try-beam-playground.md | 2 +-
.../www/site/layouts/shortcodes/playground.html | 4 +-
15 files changed, 366 insertions(+), 65 deletions(-)
diff --git a/playground/frontend/lib/constants/params.dart
b/playground/frontend/lib/constants/params.dart
index ef24e0f..1610c9c 100644
--- a/playground/frontend/lib/constants/params.dart
+++ b/playground/frontend/lib/constants/params.dart
@@ -17,3 +17,5 @@
*/
const kExampleParam = 'example';
+const kIsEditable = 'enabled';
+const kSourceCode = 'code';
diff --git
a/playground/frontend/lib/modules/editor/components/editor_textarea.dart
b/playground/frontend/lib/modules/editor/components/editor_textarea.dart
index e220dae..42e505d 100644
--- a/playground/frontend/lib/modules/editor/components/editor_textarea.dart
+++ b/playground/frontend/lib/modules/editor/components/editor_textarea.dart
@@ -45,6 +45,8 @@ class EditorTextArea extends StatefulWidget {
final ExampleModel? example;
final bool enabled;
final void Function(String)? onSourceChange;
+ final bool isEditable;
+ final bool enableScrolling;
const EditorTextArea({
Key? key,
@@ -52,6 +54,8 @@ class EditorTextArea extends StatefulWidget {
this.example,
this.onSourceChange,
required this.enabled,
+ required this.isEditable,
+ this.enableScrolling = true,
}) : super(key: key);
@override
@@ -82,7 +86,9 @@ class _EditorTextAreaState extends State<EditorTextArea> {
webSpaceFix: false,
);
- _setTextScrolling();
+ if (widget.enableScrolling) {
+ _setTextScrolling();
+ }
super.didChangeDependencies();
}
@@ -103,17 +109,20 @@ class _EditorTextAreaState extends State<EditorTextArea> {
enabled: widget.enabled,
readOnly: widget.enabled,
label: AppLocalizations.of(context)!.codeTextArea,
- child: CodeField(
- focusNode: focusNode,
- enabled: widget.enabled,
- controller: _codeController!,
- textStyle: getCodeFontStyle(
- textStyle: const TextStyle(fontSize: kCodeFontSize),
- ),
- expands: true,
- lineNumberStyle: LineNumberStyle(
- textStyle: TextStyle(
- color: ThemeColors.of(context).grey1Color,
+ child: FocusScope(
+ node: FocusScopeNode(canRequestFocus: widget.isEditable),
+ child: CodeField(
+ focusNode: focusNode,
+ enabled: widget.enabled,
+ controller: _codeController!,
+ textStyle: getCodeFontStyle(
+ textStyle: const TextStyle(fontSize: kCodeFontSize),
+ ),
+ expands: true,
+ lineNumberStyle: LineNumberStyle(
+ textStyle: TextStyle(
+ color: ThemeColors.of(context).grey1Color,
+ ),
),
),
),
diff --git a/playground/frontend/lib/modules/output/components/output.dart
b/playground/frontend/lib/modules/output/components/output.dart
index 3c923fe..624457d 100644
--- a/playground/frontend/lib/modules/output/components/output.dart
+++ b/playground/frontend/lib/modules/output/components/output.dart
@@ -21,7 +21,9 @@ import
'package:playground/modules/output/components/output_area.dart';
import
'package:playground/modules/output/components/output_header/output_header.dart';
class Output extends StatefulWidget {
- const Output({Key? key}) : super(key: key);
+ final bool isEmbedded;
+
+ const Output({Key? key, required this.isEmbedded}) : super(key: key);
@override
State<Output> createState() => _OutputState();
@@ -55,7 +57,10 @@ class _OutputState extends State<Output> with
SingleTickerProviderStateMixin {
Widget build(BuildContext context) {
return Column(
children: [
- OutputHeader(tabController: tabController),
+ OutputHeader(
+ tabController: tabController,
+ showOutputPlacements: widget.isEmbedded,
+ ),
Expanded(child: OutputArea(tabController: tabController)),
],
);
diff --git
a/playground/frontend/lib/modules/output/components/output_header/output_header.dart
b/playground/frontend/lib/modules/output/components/output_header/output_header.dart
index a69082f..f59b186 100644
---
a/playground/frontend/lib/modules/output/components/output_header/output_header.dart
+++
b/playground/frontend/lib/modules/output/components/output_header/output_header.dart
@@ -24,10 +24,12 @@ import 'output_tabs.dart';
class OutputHeader extends StatelessWidget {
final TabController tabController;
+ final bool showOutputPlacements;
const OutputHeader({
Key? key,
required this.tabController,
+ this.showOutputPlacements = true,
}) : super(key: key);
@override
@@ -43,7 +45,7 @@ class OutputHeader extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OutputTabs(tabController: tabController),
- const OutputPlacements(),
+ showOutputPlacements ? const OutputPlacements() : const SizedBox(),
],
),
),
diff --git
a/playground/frontend/lib/pages/embedded_playground/components/embedded_actions.dart
b/playground/frontend/lib/pages/embedded_playground/components/embedded_actions.dart
index a3944e9..b9688d1 100644
---
a/playground/frontend/lib/pages/embedded_playground/components/embedded_actions.dart
+++
b/playground/frontend/lib/pages/embedded_playground/components/embedded_actions.dart
@@ -17,15 +17,11 @@
*/
import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_svg/flutter_svg.dart';
-import
'package:playground/components/toggle_theme_button/toggle_theme_icon_button.dart';
import 'package:playground/constants/assets.dart';
import 'package:playground/constants/params.dart';
import 'package:playground/constants/sizes.dart';
-import 'package:playground/pages/playground/states/playground_state.dart';
-import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';
const kTryPlaygroundButtonWidth = 200.0;
@@ -36,28 +32,12 @@ class EmbeddedActions extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return Wrap(
- runSpacing: kMdSpacing,
- crossAxisAlignment: WrapCrossAlignment.center,
- alignment: WrapAlignment.end,
- children: [
- const ToggleThemeIconButton(),
- IconButton(
- iconSize: kIconSizeLg,
- splashRadius: kIconButtonSplashRadius,
- icon: SvgPicture.asset(kCopyIconAsset),
- onPressed: () {
- final source =
- Provider.of<PlaygroundState>(context, listen: false).source;
- Clipboard.setData(ClipboardData(text: source));
- },
- ),
- ElevatedButton.icon(
- style: ButtonStyle(
- fixedSize: MaterialStateProperty.all(
- const Size(kTryPlaygroundButtonWidth,
kTryPlaygroundButtonHeight),
- ),
- ),
+ return Padding(
+ padding: const EdgeInsets.all(kMdSpacing),
+ child: SizedBox(
+ width: kTryPlaygroundButtonWidth,
+ height: kTryPlaygroundButtonHeight,
+ child: ElevatedButton.icon(
icon: SvgPicture.asset(kLinkIconAsset),
label: Text(AppLocalizations.of(context)!.tryInPlayground),
onPressed: () {
@@ -65,7 +45,7 @@ class EmbeddedActions extends StatelessWidget {
launch('/?$kExampleParam=$exampleId');
},
),
- ],
+ ),
);
}
}
diff --git
a/playground/frontend/lib/pages/embedded_playground/components/embedded_appbar_title.dart
b/playground/frontend/lib/pages/embedded_playground/components/embedded_appbar_title.dart
new file mode 100644
index 0000000..07ad337
--- /dev/null
+++
b/playground/frontend/lib/pages/embedded_playground/components/embedded_appbar_title.dart
@@ -0,0 +1,85 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import
'package:playground/components/toggle_theme_button/toggle_theme_icon_button.dart';
+import 'package:playground/constants/assets.dart';
+import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/analytics/analytics_service.dart';
+import 'package:playground/modules/editor/components/run_button.dart';
+import 'package:playground/modules/notifications/components/notification.dart';
+import 'package:playground/modules/sdk/models/sdk.dart';
+import 'package:playground/pages/playground/states/playground_state.dart';
+import 'package:provider/provider.dart';
+
+class EmbeddedAppBarTitle extends StatelessWidget {
+ const EmbeddedAppBarTitle({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return Consumer<PlaygroundState>(
+ builder: (context, state, child) => Wrap(
+ crossAxisAlignment: WrapCrossAlignment.center,
+ spacing: kXlSpacing,
+ children: [
+ RunButton(
+ isRunning: state.isCodeRunning,
+ cancelRun: () {
+ state.cancelRun().catchError(
+ (_) => NotificationManager.showError(
+ context,
+ AppLocalizations.of(context)!.runCode,
+ AppLocalizations.of(context)!.cancelExecution,
+ ),
+ );
+ },
+ runCode: () {
+ final stopwatch = Stopwatch()..start();
+ state.runCode(
+ onFinish: () {
+ AnalyticsService.get(context).trackRunTimeEvent(
+ state.selectedExample?.path ??
+ '${AppLocalizations.of(context)!.unknownExample}, sdk
${state.sdk.displayName}',
+ stopwatch.elapsedMilliseconds,
+ );
+ },
+ );
+ AnalyticsService.get(context).trackClickRunEvent(
+ state.selectedExample,
+ );
+ },
+ ),
+ const ToggleThemeIconButton(),
+ IconButton(
+ iconSize: kIconSizeLg,
+ splashRadius: kIconButtonSplashRadius,
+ icon: SvgPicture.asset(kCopyIconAsset),
+ onPressed: () {
+ final source =
+ Provider.of<PlaygroundState>(context, listen: false).source;
+ Clipboard.setData(ClipboardData(text: source));
+ },
+ ),
+ ],
+ ),
+ );
+ }
+}
diff --git
a/playground/frontend/lib/pages/embedded_playground/components/embedded_editor.dart
b/playground/frontend/lib/pages/embedded_playground/components/embedded_editor.dart
index 1d97ced..3dd4b6a 100644
---
a/playground/frontend/lib/pages/embedded_playground/components/embedded_editor.dart
+++
b/playground/frontend/lib/pages/embedded_playground/components/embedded_editor.dart
@@ -22,7 +22,9 @@ import
'package:playground/pages/playground/states/playground_state.dart';
import 'package:provider/provider.dart';
class EmbeddedEditor extends StatelessWidget {
- const EmbeddedEditor({Key? key}) : super(key: key);
+ final bool isEditable;
+
+ const EmbeddedEditor({Key? key, required this.isEditable}) : super(key: key);
@override
Widget build(BuildContext context) {
@@ -32,6 +34,9 @@ class EmbeddedEditor extends StatelessWidget {
enabled: true,
sdk: state.sdk,
example: state.selectedExample,
+ onSourceChange: state.setSource,
+ enableScrolling: false,
+ isEditable: isEditable,
);
}
}
diff --git
a/playground/frontend/lib/pages/embedded_playground/components/embedded_split_view.dart
b/playground/frontend/lib/pages/embedded_playground/components/embedded_split_view.dart
new file mode 100644
index 0000000..884fdd3
--- /dev/null
+++
b/playground/frontend/lib/pages/embedded_playground/components/embedded_split_view.dart
@@ -0,0 +1,90 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:playground/constants/colors.dart';
+
+const defaultRatio = 0.65;
+const kContainerTopBorder = Border(
+ top: BorderSide(
+ width: 0.5,
+ color: kLightGrey1,
+ ),
+);
+
+class EmbeddedSplitView extends StatefulWidget {
+ final Widget first;
+ final Widget second;
+
+ const EmbeddedSplitView({
+ Key? key,
+ required this.first,
+ required this.second,
+ }) : super(key: key);
+
+ @override
+ _EmbeddedSplitViewState createState() => _EmbeddedSplitViewState();
+}
+
+class _EmbeddedSplitViewState extends State<EmbeddedSplitView> {
+ double _maxSize = 0;
+
+ get _sizeFirst => defaultRatio * _maxSize;
+
+ get _sizeSecond => (1 - defaultRatio) * _maxSize;
+
+ @override
+ Widget build(BuildContext widgetContext) {
+ return LayoutBuilder(
+ builder: (context, BoxConstraints constraints) {
+ _updateMaxSize(constraints);
+ return _buildVerticalLayout(context, constraints);
+ },
+ );
+ }
+
+ Widget _buildVerticalLayout(
+ BuildContext context,
+ BoxConstraints constraints,
+ ) {
+ return SizedBox(
+ height: constraints.maxHeight,
+ width: double.infinity,
+ child: Column(
+ children: <Widget>[
+ SizedBox(
+ height: _sizeFirst,
+ child: widget.first,
+ ),
+ Container(
+ height: _sizeSecond,
+ width: double.infinity,
+ decoration: const BoxDecoration(border: kContainerTopBorder),
+ child: widget.second,
+ ),
+ ],
+ ),
+ );
+ }
+
+ void _updateMaxSize(BoxConstraints constraints) {
+ if (_maxSize != constraints.maxHeight) {
+ _maxSize = constraints.maxHeight;
+ }
+ }
+}
diff --git
a/playground/frontend/lib/pages/embedded_playground/embedded_page_providers.dart
b/playground/frontend/lib/pages/embedded_playground/embedded_page_providers.dart
new file mode 100644
index 0000000..ad63e70
--- /dev/null
+++
b/playground/frontend/lib/pages/embedded_playground/embedded_page_providers.dart
@@ -0,0 +1,113 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:flutter/material.dart';
+import 'package:playground/constants/params.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
+import 'package:playground/modules/output/models/output_placement_state.dart';
+import
'package:playground/pages/embedded_playground/embedded_playground_page.dart';
+import
'package:playground/pages/playground/components/playground_page_providers.dart';
+import 'package:playground/pages/playground/states/examples_state.dart';
+import 'package:playground/pages/playground/states/playground_state.dart';
+import 'package:provider/provider.dart';
+
+class EmbeddedPageProviders extends StatelessWidget {
+ const EmbeddedPageProviders({Key? key}) : super(key: key);
+
+ @override
+ Widget build(BuildContext context) {
+ return MultiProvider(
+ providers: [
+ ChangeNotifierProvider<ExampleState>(
+ create: (context) => ExampleState(kExampleRepository),
+ ),
+ ChangeNotifierProxyProvider<ExampleState, PlaygroundState>(
+ create: (context) => PlaygroundState(codeRepository:
kCodeRepository),
+ update: (context, exampleState, playground) {
+ if (playground == null) {
+ return PlaygroundState(codeRepository: kCodeRepository);
+ }
+
+ if (playground.selectedExample == null) {
+ final example = _getEmbeddedExample();
+ final newPlayground = PlaygroundState(
+ codeRepository: kCodeRepository,
+ sdk: playground.sdk,
+ selectedExample: null,
+ );
+ _loadExampleData(
+ example,
+ exampleState,
+ playground,
+ newPlayground,
+ );
+ return newPlayground;
+ }
+ return playground;
+ },
+ ),
+ ChangeNotifierProvider<OutputPlacementState>(
+ create: (context) => OutputPlacementState(),
+ ),
+ ],
+ child: EmbeddedPlaygroundPage(
+ isEditable: _isEditableToBool(),
+ ),
+ );
+ }
+
+ bool _isEditableToBool() {
+ final isEditableString = Uri.base.queryParameters[kIsEditable];
+ return isEditableString == 'true';
+ }
+
+ ExampleModel? _getEmbeddedExample() {
+ final examplePath = Uri.base.queryParameters[kExampleParam];
+
+ return ExampleModel(
+ name: 'Embedded_Example',
+ path: examplePath ?? '',
+ description: '',
+ type: ExampleType.example,
+ );
+ }
+
+ _loadExampleData(
+ ExampleModel? example,
+ ExampleState exampleState,
+ PlaygroundState playground,
+ PlaygroundState newPlayground,
+ ) {
+ if (example == null) {
+ return;
+ }
+
+ if (example.path.isEmpty) {
+ String source = Uri.base.queryParameters[kSourceCode] ?? '';
+ example.setSource(source);
+ newPlayground.setExample(example);
+ } else {
+ exampleState
+ .loadExampleInfo(
+ example,
+ playground.sdk,
+ )
+ .then((exampleWithInfo) =>
newPlayground.setExample(exampleWithInfo));
+ }
+ }
+}
diff --git
a/playground/frontend/lib/pages/embedded_playground/embedded_playground_page.dart
b/playground/frontend/lib/pages/embedded_playground/embedded_playground_page.dart
index 5825405..d5413df 100644
---
a/playground/frontend/lib/pages/embedded_playground/embedded_playground_page.dart
+++
b/playground/frontend/lib/pages/embedded_playground/embedded_playground_page.dart
@@ -17,32 +17,41 @@
*/
import 'package:flutter/material.dart';
-import 'package:playground/constants/sizes.dart';
+import 'package:playground/modules/output/components/output.dart';
import
'package:playground/pages/embedded_playground/components/embedded_actions.dart';
+import
'package:playground/pages/embedded_playground/components/embedded_appbar_title.dart';
import
'package:playground/pages/embedded_playground/components/embedded_editor.dart';
+import
'package:playground/pages/embedded_playground/components/embedded_split_view.dart';
+import 'package:playground/pages/playground/states/playground_state.dart';
+import 'package:provider/provider.dart';
const kActionsWidth = 300.0;
const kActionsHeight = 40.0;
class EmbeddedPlaygroundPage extends StatelessWidget {
- const EmbeddedPlaygroundPage({Key? key}) : super(key: key);
+ final bool isEditable;
+
+ const EmbeddedPlaygroundPage({
+ Key? key,
+ required this.isEditable,
+ }) : super(key: key);
@override
Widget build(BuildContext context) {
- return Scaffold(
- body: Stack(
- children: const [
- Positioned.fill(
- child: EmbeddedEditor(),
- ),
- Positioned(
- right: kXlSpacing,
- top: kXlSpacing,
- width: kActionsWidth,
- height: kActionsHeight,
- child: EmbeddedActions(),
+ return Consumer<PlaygroundState>(
+ builder: (context, state, child) => Scaffold(
+ appBar: AppBar(
+ automaticallyImplyLeading: false,
+ title: const EmbeddedAppBarTitle(),
+ actions: const [EmbeddedActions()],
+ ),
+ body: EmbeddedSplitView(
+ first: EmbeddedEditor(isEditable: isEditable),
+ second: Container(
+ color: Theme.of(context).backgroundColor,
+ child: const Output(isEmbedded: true),
),
- ],
+ ),
),
);
}
diff --git
a/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
b/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
index 5047d4c..ca0d1e7 100644
---
a/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
+++
b/playground/frontend/lib/pages/playground/components/editor_textarea_wrapper.dart
@@ -57,6 +57,7 @@ class CodeTextAreaWrapper extends StatelessWidget {
example: state.selectedExample,
sdk: state.sdk,
onSourceChange: state.setSource,
+ isEditable: true,
),
),
Positioned(
diff --git
a/playground/frontend/lib/pages/playground/components/playground_page_body.dart
b/playground/frontend/lib/pages/playground/components/playground_page_body.dart
index 7b558e6..8712627 100644
---
a/playground/frontend/lib/pages/playground/components/playground_page_body.dart
+++
b/playground/frontend/lib/pages/playground/components/playground_page_body.dart
@@ -22,8 +22,8 @@ import 'package:playground/config/theme.dart';
import 'package:playground/constants/sizes.dart';
import 'package:playground/modules/output/components/output.dart';
import 'package:playground/modules/output/models/output_placement.dart';
-import
'package:playground/pages/playground/components/editor_textarea_wrapper.dart';
import 'package:playground/modules/output/models/output_placement_state.dart';
+import
'package:playground/pages/playground/components/editor_textarea_wrapper.dart';
import 'package:provider/provider.dart';
class PlaygroundPageBody extends StatelessWidget {
@@ -60,7 +60,7 @@ class PlaygroundPageBody extends StatelessWidget {
Widget get codeTextArea => const CodeTextAreaWrapper();
- Widget get output => const Output();
+ Widget get output => const Output(isEmbedded: false);
Widget getVerticalSeparator(BuildContext context) => Container(
width: kMdSpacing,
diff --git a/playground/frontend/lib/pages/routes.dart
b/playground/frontend/lib/pages/routes.dart
index 5c7bc77..34c59a6 100644
--- a/playground/frontend/lib/pages/routes.dart
+++ b/playground/frontend/lib/pages/routes.dart
@@ -17,7 +17,7 @@
*/
import 'package:flutter/material.dart';
-import
'package:playground/pages/embedded_playground/embedded_playground_page.dart';
+import
'package:playground/pages/embedded_playground/embedded_page_providers.dart';
import 'package:playground/pages/playground/playground_page.dart';
class Routes {
@@ -33,7 +33,7 @@ class Routes {
case Routes.playground:
return Routes.renderRoute(const PlaygroundPage());
case Routes.embedded:
- return Routes.renderRoute(const EmbeddedPlaygroundPage());
+ return Routes.renderRoute(const EmbeddedPageProviders());
default:
return Routes.renderRoute(const PlaygroundPage());
}
diff --git a/website/www/site/content/en/get-started/try-beam-playground.md
b/website/www/site/content/en/get-started/try-beam-playground.md
index bcd1d7d..4661c3b 100644
--- a/website/www/site/content/en/get-started/try-beam-playground.md
+++ b/website/www/site/content/en/get-started/try-beam-playground.md
@@ -25,7 +25,7 @@ You can try an Apache Beam examples at
## Beam Playground WordCount Example
-{{< playground "SDK_JAVA/MinimalWordCount" >}}
+{{< playground "true" "SDK_JAVA/MinimalWordCount" "" "700px">}}
## How To Add New Examples
diff --git a/website/www/site/layouts/shortcodes/playground.html
b/website/www/site/layouts/shortcodes/playground.html
index 9adda98..70fe3df 100644
--- a/website/www/site/layouts/shortcodes/playground.html
+++ b/website/www/site/layouts/shortcodes/playground.html
@@ -11,9 +11,9 @@ limitations under the License. See accompanying LICENSE file.
*/}}
<iframe
-
src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?example={{
.Get 0 }}"
+
src="https://frontend-beta-dot-apache-beam-testing.appspot.com/embedded?enabled={{
.Get 0 }}&example={{ .Get 1 }}&code={{ .Get 2 }}"
width="100%"
- height="350px"
+ height="{{ .Get 3 }}"
class="code-snippet playground"
allow="clipboard-write">
</iframe>
