omchiii · omchiii · Sep 18, 2022 · Sep 18, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.3] - 2022-09-18
+
+### Changed
+
+- Fix: `Removing disallowed element <SCRIPT> from [object DocumentFragment]`, in `lib\src\model_viewer_plus_web.dart`
+- Update `example\lib\loading\display_poster.dart`
+- Update `README.md`, due to `<model-viewer>` upgrades to 2.0.0 and we have not keep up with it's latest version. So, Flutter Web users should replace `src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"` with `src="./assets/packages/model_viewer_plus/assets/model-viewer.min.js"` to use the js file in our package.
+
+### Added
+
+- Add a new example: `example\lib\loading\render_scale.dart`
+
 ## [1.3.2] - 2022-09-14
 
 ### Changed

diff --git a/README.md b/README.md
@@ -90,14 +90,12 @@ Modify the `<head>` tag of your `web/index.html` to load the JavaScript, like so
 
   <!-- Other stuff -->
 
-  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js" defer></script>
+  <script type="module" src="./assets/packages/model_viewer_plus/assets/model-viewer.min.js" defer></script>
 </head>
 ```
 
-The [official site](https://modelviewer.dev) uses unpkg. You may replace the
-value of `src` attribute with another CDN mirror's URL. Or if you are willing
-to use the default js file which is included in this package's asset, you may
-replace the value  with `./assets/packages/model_viewer_plus/assets/model-viewer.min.js`.
+`./assets/packages/model_viewer_plus/assets/model-viewer.min.js` will use the default js file which is included in this package's asset. The [official site](https://modelviewer.dev) uses unpkg, by using `https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js`, you are using the latest version of `<model-viewier>`. You may replace the
+value of `src` attribute with another CDN mirror's URL. But please notice that our model-viewer-plus maybe not able to keep up with the `<model-viewier>`'s latest version.
 
 ## Features
 

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.3.2
+1.3.3
diff --git a/example/lib/loading/display_poster.dart b/example/lib/loading/display_poster.dart
@@ -19,7 +19,7 @@ model-viewer#reveal {
             loading: Loading.eager,
             cameraControls: true,
             autoRotate: true,
-            poster: "https://modelviewer.dev/assets/poster-shishkebab.png",
+            poster: "https://modelviewer.dev/assets/poster-shishkebab.webp",
             src: "https://modelviewer.dev/shared-assets/models/shishkebab.glb",
             alt: "A 3D model of a shishkebab",
             relatedCss: css,

diff --git a/example/lib/loading/render_scale.dart b/example/lib/loading/render_scale.dart
@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:model_viewer_plus/model_viewer_plus.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+  String js = r'''
+  const reportedDpr = document.querySelector('#reportedDpr');
+  const renderedDpr = document.querySelector('#renderedDpr');
+  const minimumDpr = document.querySelector('#minimumDpr');
+  const pixelWidth = document.querySelector('#pixelWidth');
+  const pixelHeight = document.querySelector('#pixelHeight');
+  const reason = document.querySelector('#reason');
+
+  // This must be registered before the element loads to catch the initial event.
+  document.querySelector('#scale').addEventListener('render-scale', (event) => {
+    reportedDpr.textContent = event.detail.reportedDpr;
+    renderedDpr.textContent = event.detail.renderedDpr;
+    minimumDpr.textContent = event.detail.minimumDpr;
+    pixelWidth.textContent = event.detail.pixelWidth;
+    pixelHeight.textContent = event.detail.pixelHeight;
+    reason.textContent = event.detail.reason;
+  });
+
+  const setup = () => {
+    const minScale = document.querySelector('#min-scale-value');
+    // The static API must be queried after the element loads. Note that static properties affect all the <model-vieweer> elements on the page.
+    const ModelViewerStatic = customElements.get('model-viewer');
+
+    document.querySelector('#min-scale').addEventListener('input', (event) => {
+      ModelViewerStatic.minimumRenderScale = event.target.value;
+      minScale.textContent = event.target.value;
+    });
+  };
+
+  customElements.whenDefined('model-viewer').then(setup);
+''';
+
+  String innerHtml = '''
+  Reported DPR: <span id="reportedDpr"></span><br>
+  Rendered DPR: <span id="renderedDpr"></span><br>
+  Minimum DPR: <span id="minimumDpr"></span><br>
+  Rendered width (pixels): <span id="pixelWidth"></span><br>
+  Rendered height (pixels): <span id="pixelHeight"></span><br>
+  Reason for scaling: <span id="reason"></span><br>
+  Minimum scale: <span id="min-scale-value">0.5</span><br>
+  <input id="min-scale" type="range" min="0.25" max="1" step="0.01" value="0.5">
+''';
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+          appBar: AppBar(title: Text("Model Viewer")),
+          body: ModelViewer(
+            id: "scale",
+            src:
+                "https://modelviewer.dev/shared-assets/models/glTF-Sample-Models/2.0/ToyCar/glTF-Binary/ToyCar.glb",
+            alt: "A 3D model of a toy car",
+            cameraControls: true,
+            touchAction: TouchAction.panY,
+            ar: true,
+            relatedJs: js,
+            innerModelViewerHtml: innerHtml,
+          )),
+    );
+  }
+}
diff --git a/example/web/index.html b/example/web/index.html
@@ -102,7 +102,7 @@
       loadMainDartJs();
     }
   </script>
-  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+  <script type="module" src="./assets/packages/model_viewer_plus/assets/model-viewer.min.js"></script>
 </body>
 
 </html>
diff --git a/lib/src/model_viewer_plus_web.dart b/lib/src/model_viewer_plus_web.dart
@@ -29,8 +29,19 @@ class ModelViewerState extends State<ModelViewer> {
       ..allowElement('meta',
           attributes: ['name', 'content'], uriPolicy: _AllowUriPolicy())
       ..allowElement('style')
-      // ..allowElement('script',
-      //     attributes: ['src', 'type', 'defer'], uriPolicy: _AllowUriPolicy())
+      ..allowElement('script',
+          attributes: [
+            'src',
+            'type',
+            'defer',
+            'async',
+            'crossorigin',
+            'integrity',
+            'nomodule',
+            'nonce',
+            'referrerpolicy'
+          ],
+          uriPolicy: _AllowUriPolicy())
       ..allowCustomElement('model-viewer',
           attributes: [
             'style',

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 # See: https://dart.dev/tools/pub/pubspec
 name: model_viewer_plus
-version: 1.3.2
+version: 1.3.3
 description: >-
   A Flutter widget for rendering interactive 3D models in the glTF and GLB
   formats.