bedrock-samples/resource_pack/ui/immersive_reader.json

{
  "namespace": "im_reader",

  "reader_button_contents": {
    "type": "image",
    "texture": "textures/ui/immersive_reader"
  },

  "reader_button@common_buttons.light_content_button": {
    "size": [ 16, 16 ],
    "$pressed_button_name": "button.immersive_reader",
    "$button_content": "im_reader.reader_button_contents"
  },

  "webview": {
    "type": "custom",
    "layer": 1,
    "anchor_from": "center",
    "anchor_to": "center",
    "size": [ "100%", "100%" ],
    "renderer": "web_view_renderer",
    "bindings": [
      {
        "binding_type": "global",
        "binding_condition": "visible",
        // Binding itself doesn't do anything, but the callback is used to fill the property bag
        "binding_name": "#webview_update"
      },
      {
        "binding_name": "#immersive_reader_running",
        "binding_name_override": "#visible"
      }
    ]
  },

  "loading": {
    "type": "stack_panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "animation_item@edu_common.vertical_stack_item": {
          "controls": [
            {
              "animation@edu_common.edu_loading_animation": {
                "size": [ 64, 64 ],
                "anchor_from": "top_middle",
                "anchor_to": "top_middle"
              }
            }
          ]
        }
      },
      {
        "loading_text_item@edu_common.vertical_stack_item": {
          "controls": [
            {
              "loading_text": {
                "type": "label",
                "text": "progressScreen.loading",
                "color": "$body_text_color",
                "anchor_from": "top_middle",
                "anchor_to": "top_middle"
              }
            }
          ]
        }
      },
      { "bottom_padding@common.empty_panel": { "size": [ "100%", "fill" ] } },
      {
        "cancel_button@common_buttons.light_text_button": {
          "$border_visible": false,
          "$pressed_button_name": "button.menu_exit",
          "$button_text": "gui.cancel",
          "size": [ "100%", 18 ]
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "#immersive_reader_loading",
        "binding_name_override": "#visible"
      }
    ]
  },

  "no_retry_error_button@common_buttons.light_text_button": {
    "$border_visible": false,
    "$pressed_button_name": "button.menu_exit",
    "$button_text": "gui.ok",
    "bindings": [
      {
        "binding_name": "(not #can_retry)",
        "binding_name_override": "#visible"
      }
    ]
  },

  "retry_error_buttons": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "try_again@common_buttons.light_text_button": {
          "$border_visible": false,
          "$pressed_button_name": "button.error.try_again",
          "$button_text": "gui.tryAgain",
          "size": [ "fill", "100%" ]
        }
      },
      { "middle_padding@common.empty_panel": { "size": [ 2, "100%" ] } },
      {
        "cancel@common_buttons.light_text_button": {
          "$border_visible": false,
          "$pressed_button_name": "button.menu_exit",
          "$button_text": "gui.cancel",
          "size": [ "fill", "100%" ]
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "#can_retry",
        "binding_name_override": "#visible"
      }
    ]
  },

  "error": {
    "type": "stack_panel",
    "size": [ "100%", "100%" ],
    "controls": [
      {
        "error_text": {
          "type": "label",
          "color": "$body_text_color",
          "max_size": [ "100%", "fill" ],
          "size": [ "default", "fill" ],
          "text": "#error_text",
          "font_type": "smooth",
          "font_scale_factor": 1.2,
          "bindings": [
            {
              "binding_name": "#error_text"
            }
          ]
        }
      },
      {
        "error_buttons": {
          "type": "panel",
          "size": [ "100%", 18 ],
          "controls": [
            { "retry@im_reader.retry_error_buttons": {} },
            { "no_retry@im_reader.no_retry_error_button": {} }
          ]
        }
      }
    ],
    "bindings": [
      {
        "binding_name": "#immersive_reader_error",
        "binding_name_override": "#visible"
      }
    ]
  },

  "loading_and_error_panel": {
    "type": "panel",
    "size": [ 236, 108 ],
    "controls": [
      { "loading@im_reader.loading": {} },
      { "error@im_reader.error": {} }
    ]
  },

  "immersive_reader_screen_content": {
    "type": "panel",
    "controls": [
      {
        "loading_and_error@popup_dialog.form_fit_screen_with_title_and_close": {
          "$modal_title": "key.immersivereader",
          "$popup_dialog_escape_button_name": "button.menu_cancel",
          "$no_close_button": true,
          "$modal_contents": "im_reader.loading_and_error_panel",
          "$modal_contents_padding": [ 8, 8 ],
          "bindings": [
            {
              "binding_name": "(not #immersive_reader_running)",
              "binding_name_override": "#visible"
            }
          ]
        }
      },
      { "webview@im_reader.webview": {} }
    ]
  },

  "screen_exit_upwards_animation_pop_offset": {
    "anim_type": "offset",
    "easing": "out_cubic",
    "duration": "$transition_time_pop",
    "from": [ 0, 0 ],
    "to": [ 0, "-100%" ],
    "play_event": "screen.exit_pop",
    "end_event": "screen.exit_end"
  },

  "screen_entrance_downwards_animation_push_offset": {
    "anim_type": "offset",
    "easing": "out_cubic",
    "duration": "$transition_time_push",
    "from": [ 0, "-100%" ],
    "to": [ 0, 0 ],
    "play_event": "screen.entrance_push",
    "end_event": "screen.entrance_end"
  },

  "immersive_reader_screen@common.base_screen": {
    "$screen_content": "im_reader.immersive_reader_screen_content",
    "$screen_bg_content": "common.screen_background",
    "button_mappings": [
      {
        "from_button_id": "button.menu_cancel",
        "to_button_id": "button.menu_exit",
        "mapping_type": "global"
      }
    ],
    "$screen_animations": [
      "@common.screen_exit_animation_push_offset",
      "@im_reader.screen_exit_upwards_animation_pop_offset",
      "@im_reader.screen_entrance_downwards_animation_push_offset",
      "@common.screen_entrance_animation_pop_offset",
      "@common.screen_exit_animation_push_fade",
      "@common.screen_exit_animation_pop_fade",
      "@common.screen_entrance_animation_push_fade",
      "@common.screen_entrance_animation_pop_fade"
    ]
  }
}