[DRAFT] progressive decode

codecs/jxl/dec/jxl_dec.cpp

@@ -77,7 +77,11 @@ val decode(std::string data) {
   auto float_pixels = std::make_unique<float[]>(component_count);
   EXPECT_EQ(JXL_DEC_SUCCESS, JxlDecoderSetImageOutBuffer(dec.get(), &format, float_pixels.get(),
                                                          component_count * sizeof(float)));
-  EXPECT_EQ(JXL_DEC_FULL_IMAGE, JxlDecoderProcessInput(dec.get()));
+
+  if (JXL_DEC_FULL_IMAGE != JxlDecoderProcessInput(dec.get())) {
+    // partial image
+    EXPECT_EQ(JXL_DEC_SUCCESS, JxlDecoderFlushImage(dec.get()));
+  }
 
   auto byte_pixels = std::make_unique<uint8_t[]>(component_count);
   // Convert to sRGB.

src/client/lazy-app/Compress/Output/index.tsx

@@ -30,13 +30,15 @@ interface Props {
   leftImgContain: boolean;
   rightImgContain: boolean;
   onPreprocessorChange: (newState: PreprocessorState) => void;
+  onProgressiveChange: (newState: number) => void;
 }
 
 interface State {
   scale: number;
   editingScale: boolean;
   altBackground: boolean;
   aliasing: boolean;
+  progressive: number;
 }
 
 const scaleToOpts: ScaleToOpts = {
@@ -52,6 +54,7 @@ export default class Output extends Component<Props, State> {
     editingScale: false,
     altBackground: false,
     aliasing: false,
+    progressive: 1,
   };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
@@ -208,6 +211,19 @@ export default class Output extends Component<Props, State> {
     this.pinchZoomLeft.scaleTo(percent / 100, scaleToOpts);
   };
 
+  private onProgressiveInputBlur = (event: Event) => {
+    console.log('re-render progressiveness?');
+  };
+
+  private onProgressiveInputChanged = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const percent = parseFloat(target.value);
+    if (isNaN(percent)) return;
+    console.log('set progressive to ' + percent / 100);
+    this.setState({ progressive: percent / 100 });
+    this.props.onProgressiveChange(percent / 100);
+  };
+
   private onPinchZoomLeftChange = (event: Event) => {
     if (!this.pinchZoomRight || !this.pinchZoomLeft) {
       throw Error('Missing pinch-zoom element');
@@ -264,7 +280,7 @@ export default class Output extends Component<Props, State> {
 
   render(
     { mobileView, leftImgContain, rightImgContain, source }: Props,
-    { scale, editingScale, altBackground, aliasing }: State,
+    { scale, editingScale, altBackground, aliasing, progressive }: State,
   ) {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
@@ -394,6 +410,22 @@ export default class Output extends Component<Props, State> {
               )}
             </button>
           </div>
+
+          <div class={style.buttonGroup}>
+            <button title="Progressive percent">
+              <input
+                type="number"
+                step="1"
+                min="1"
+                max="1000000"
+                ref={linkRef(this, 'limitProgressive')}
+                class={style.zoom}
+                value={Math.round(progressive * 100)}
+                onInput={this.onProgressiveInputChanged}
+                onBlur={this.onProgressiveInputBlur}
+              />
+            </button>
+          </div>
         </div>
       </Fragment>
     );

src/client/lazy-app/Compress/index.tsx

@@ -71,11 +71,14 @@ interface State {
   mobileView: boolean;
   preprocessorState: PreprocessorState;
   encodedPreprocessorState?: PreprocessorState;
+  progressivePercent?: number;
+  renderedPercent?: number;
 }
 
 interface MainJob {
   file: File;
   preprocessorState: PreprocessorState;
+  progressivePercent: number;
 }
 
 interface SideJob {
@@ -106,6 +109,7 @@ async function decodeImage(
         return await workerBridge.webpDecode(signal, blob);
       }
       if (mimeType === 'image/jxl') {
+        console.log('decode jxl');
         return await workerBridge.jxlDecode(signal, blob);
       }
       if (mimeType === 'image/webp2') {
@@ -533,6 +537,35 @@ export default class Compress extends Component<Props, State> {
     }
   };
 
+  private onProgressiveChange = async (percent: number): Promise<void> => {
+    this.setState({ progressivePercent: percent });
+
+    // right side hardcoded for now
+    let sideIndex = 1;
+    const sideSignals = this.sideAbortControllers.map((ac) => ac.signal);
+    const currentSide = this.state.sides[sideIndex];
+
+    if (currentSide.file === undefined) {
+      return;
+    }
+
+    // Note browser-native decodeImage() might be less willing to decode partial data
+    let data = await decodeImage(
+      sideSignals[1],
+      currentSide.file.slice(0, currentSide.file.size * percent),
+      this.workerBridges[0],
+    );
+
+    this.setState((currentState) => {
+      const side: Side = {
+        ...currentSide,
+        data,
+      };
+      const sides = cleanSet(currentState.sides, sideIndex, side);
+      return { sides };
+    });
+  };
+
   private onPreprocessorChange = async (
     preprocessorState: PreprocessorState,
   ): Promise<void> => {
@@ -602,6 +635,7 @@ export default class Compress extends Component<Props, State> {
     const latestMainJobState: Partial<MainJob> = this.activeMainJob || {
       file: currentState.source && currentState.source.file,
       preprocessorState: currentState.encodedPreprocessorState,
+      progressivePercent: currentState.progressivePercent,
     };
     const latestSideJobStates: Partial<SideJob>[] = currentState.sides.map(
       (side, i) =>
@@ -617,6 +651,7 @@ export default class Compress extends Component<Props, State> {
     const mainJobState: MainJob = {
       file: this.sourceFile,
       preprocessorState: currentState.preprocessorState,
+      progressivePercent: currentState.progressivePercent || 1.0,
     };
     const sideJobStates: SideJob[] = currentState.sides.map((side) => ({
       // If there isn't an encoder selected, we don't process either
@@ -977,6 +1012,7 @@ export default class Compress extends Component<Props, State> {
           rightImgContain={rightImgContain}
           preprocessorState={preprocessorState}
           onPreprocessorChange={this.onPreprocessorChange}
+          onProgressiveChange={this.onProgressiveChange}
         />
         <button class={style.back} onClick={onBack}>
           <svg viewBox="0 0 61 53.3">