Package lacks functions to exit full screen mode

[pamdx]

The title is pretty straightforward. I'd be nice to have a function to exit full screen mode. I'd like to be able to create a button that toggles between full screen and standard screen, using the fullscreen_all function, but there is currently no function that does the reverse of fullscreen_all.

[etiennebacher]

Hi, this should now be possible. Can you install the development version and test with:

library(shiny)
library(shinyfullscreen)

ui <- fluidPage(
  fullscreen_button(id = "toggle_fs", "Enter/Quit fullscreen", target = "plot"),
  plotOutput("plot")
)

server <- function(input, output){
  
  output$plot <- renderPlot(plot(mtcars))
  
}

shinyApp(ui, server)

If you put target = NULL (or omit target) it will show the whole page on full screen

[etiennebacher]

I'm closing this but feel free to reopen in this solution doesn't work or doesn't do what you expected

[pamdx]

Awesome, that's what I was looking for! Just one more thing: could it be possible to add an icon argument to the function, as with other button functions in Shiny?

I'd like to be able to do something like this:

fullscreen_button("full_screen", label = "", icon = shiny::icon("expand", lib = "font-awesome"), target = NULL)

[pamdx]

Just so you know, there seems to be a strange interaction going on between the button and the Dark Reader Chrome/Edge extension.

Here's what my dashboard looks like with Dark Reader disabled for the page:

When I click on the fullscreen button, I get a weird mix of clear and dark mode, which I don't get if I'm toggling fullscreen on/off with the F11 key:

(Just wanted to let you know, since it's quite a popular browser extension)

[etiennebacher]

I added the icon argument, you just need to reinstall the dev version

Just so you know, there seems to be a strange interaction going on between the button and the Dark Reader Chrome/Edge extension.

Thanks for the report, unfortunately I'm not sure there's something I can do. This package uses screenfull.js under the hood so maybe you can check there if someone reported this issue. Otherwise, it will mean that it's connected to shiny and I don't really have the time to investigate it

[etiennebacher]

I also updated screenfull.js, maybe it will fix your issue

[pamdx]

Great, thanks for the option to add an icon to the button!

Unfortunately I keep getting the strange mix of dark and light mode when I go into full screen. Contrary to what I said earlier, it is not related to the Dark Reader extension: I've tried the app on an another computer without the extension installed and I get the same result. I've tried using Edge, Chrome and Firefox: I always get this bug when I go into fullscreen with the fullscreen_button() function, and not when I use the F11 key.

[etiennebacher]

It would be really useful to provide a small reproducible example for this.

But again I doubt I can do anything. This package inserts very small Javascript scripts in the app so it probably comes from the interaction between screenfull.js and shiny.

[pamdx]

Here is a simple reproducible example based on the Old Faithful Geyser app on the rstudio website:

library(shiny)
library(shinyfullscreen)

ui <- bootstrapPage(
  
  selectInput(inputId = "n_breaks",
              label = "Number of bins in histogram (approximate):",
              choices = c(10, 20, 35, 50),
              selected = 20),
  
  checkboxInput(inputId = "individual_obs",
                label = strong("Show individual observations"),
                value = FALSE),
  
  checkboxInput(inputId = "density",
                label = strong("Show density estimate"),
                value = FALSE),
  
  plotOutput(outputId = "main_plot", height = "300px"),
  
  # Display this only if the density is shown
  conditionalPanel(condition = "input.density == true",
                   sliderInput(inputId = "bw_adjust",
                               label = "Bandwidth adjustment:",
                               min = 0.2, max = 2, value = 1, step = 0.2)
  ),
  fullscreen_button("full_screen", label = "Toggle fullscreen", icon = shiny::icon("expand", lib = "font-awesome"), target = NULL)
  
)

server <- function(input, output) {
  
  output$main_plot <- renderPlot({
    
    hist(faithful$eruptions,
         probability = TRUE,
         breaks = as.numeric(input$n_breaks),
         xlab = "Duration (minutes)",
         main = "Geyser eruption duration")
    
    if (input$individual_obs) {
      rug(faithful$eruptions)
    }
    
    if (input$density) {
      dens <- density(faithful$eruptions,
                      adjust = input$bw_adjust)
      lines(dens, col = "blue")
    }
    
  })
}

shinyApp(ui = ui, server = server)

I still get the bug with the above:

[etiennebacher]

I can reproduce but no clue

[pamdx]

maybe these StackOverflow questions will help:

• https://stackoverflow.com/questions/16163089/background-element-goes-black-when-entering-fullscreen-with-html5
• https://stackoverflow.com/questions/60619660/why-does-chrome-fullscreen-make-the-background-black
• https://stackoverflow.com/questions/35244224/fullscreen-api-change-default-color

[pamdx]

Note that using the following CSS workaround solves the issue:

library(shiny)
library(shinyfullscreen)

ui <- bootstrapPage(
  
  tags$head(
    # Define fullscreen background color using CSS
    tags$style(HTML(":fullscreen, ::backdrop {
    background-color: rgba(255,255,255,0);}"))
  ),
  
  selectInput(inputId = "n_breaks",
              label = "Number of bins in histogram (approximate):",
              choices = c(10, 20, 35, 50),
              selected = 20),
  
  checkboxInput(inputId = "individual_obs",
                label = strong("Show individual observations"),
                value = FALSE),
  
  checkboxInput(inputId = "density",
                label = strong("Show density estimate"),
                value = FALSE),
  
  plotOutput(outputId = "main_plot", height = "300px"),
  
  # Display this only if the density is shown
  conditionalPanel(condition = "input.density == true",
                   sliderInput(inputId = "bw_adjust",
                               label = "Bandwidth adjustment:",
                               min = 0.2, max = 2, value = 1, step = 0.2)
  ),
  fullscreen_button("full_screen", label = "Toggle fullscreen", icon = shiny::icon("expand", lib = "font-awesome"), target = NULL)
  
)

server <- function(input, output) {
  
  output$main_plot <- renderPlot({
    
    hist(faithful$eruptions,
         probability = TRUE,
         breaks = as.numeric(input$n_breaks),
         xlab = "Duration (minutes)",
         main = "Geyser eruption duration")
    
    if (input$individual_obs) {
      rug(faithful$eruptions)
    }
    
    if (input$density) {
      dens <- density(faithful$eruptions,
                      adjust = input$bw_adjust)
      lines(dens, col = "blue")
    }
    
  })
}

shinyApp(ui = ui, server = server)

Source: https://stackoverflow.com/questions/16163089/background-element-goes-black-when-entering-fullscreen-with-html5

[etiennebacher]

Thanks a lot for digging into this, I included your CSS directly in the function and the black background doesn't appear anymore.

I tried to use the value transparent instead of rgba(255,255,255,0) so that it uses the background color of the body if it's specified but it doesn't seem to work. It should be fine for white background though

[pamdx]

Alright perfect, this is good enough for me!