R/app_ui.R

In myownelixir2/soundutilsdev: SoundUtils

#' The application User-Interface
#'
#' @param request Internal parameter for `{shiny}`.
#'     DO NOT REMOVE.
#' @import shiny
#' @noRd
app_ui <- function(request) {
  tagList(
    # Leave this function for adding external resources
    golem_add_external_resources(),
    # List the first level UI elements here
    # fluidPage(
    #   h1("soundutilsdev"),
    #   singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto')),
    # )
    shinyMobile::f7Page(
      title = "soundUtils",
      init = shinyMobile::f7Init(theme = "dark"),
      shinyMobile::f7TabLayout(
        navbar = shinyMobile::f7Navbar(
          title = "SOUND UTILS",
          hairline = TRUE,
          shadow = TRUE,
          left_panel = FALSE,
          right_panel = FALSE
        ),
        shinyMobile::f7Tabs(
          animated = TRUE,
          #swipeable = TRUE,
          shinyMobile::f7Tab(
            tabName = "YouTube Sampler",
            icon = shinyMobile::f7Icon("folder"),
            active = TRUE,
            shinyMobile::f7Shadow(
              intensity = 10,
              hover = TRUE,
              shinyMobile::f7Card(
                title = "YOUTUBE SAMPLER",
                shinyMobile::f7Text(
                  inputId = "yt_url_input",
                  label = "Input URL here:",
                  value = "",
                  placeholder = "Your text here"
                ),
                shiny::br(),
                shinyMobile::f7Button(
                  inputId = 'yt_input_button',
                  label = 'Scrape the video',
                  src = NULL,
                  color = 'red'
                ),
                shiny::br(),
                #shiny::uiOutput("plotui"),
                #shiny::textOutput("text_range"),
                shiny::singleton(tags$div(id = 'divCanvas', style = 'width:auto; height:auto')),
                shiny::br(),
                shinyMobile::f7Segment(
                  container = "row",
                  shinyMobile::f7Button(inputId = 'sample_play', color = "green", label = "Play"),
                  shinyMobile::f7Button(inputId = 'sample_upload', color = "gray", label = "Upload"),
                  shinyMobile::f7Button(inputId = 'sample_load', color = "gray", label = "Load")
                ),
                shiny::br(),
                shiny::h3('Select label'),
                shinyMobile::f7Select(
                  inputId = "label_selector",
                  label = "",
                  choices = c("bass", "kick", "snare", "clap"),
                  selected = "kick"
                )
                #
                # footer = tagList(
                #   shinyMobile::f7Button(
                #   inputId = 'sample_play',
                #   label = 'Play',
                #   src = NULL,
                #   color = 'green'
                # ),
                # shinyMobile::f7Button(
                #   inputId = 'sample_upload',
                #   label = 'Upload',
                #   src = NULL,
                #   color = 'gray'
                # ))
                #shiny::singleton(tags$div(id = 'divP5Button', style = 'width:auto; height:auto'))
              )
            )
          )
        )
      )
    ),
    shiny::singleton(
      tags$head(
        tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"),
        tags$script(src = 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js'),
        #tags$script(src = "www/play_button.js")
        tags$script(src = "www/p5_audio_player_ext_test.js"),
        tags$style(
          HTML('button#yt_input_button {
  position:relative;
  display:inline-block;
  margin:20px;
  width:20%;
}

button#yt_input_button {
  color:white;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
  font-size:20px;
  text-align: center;
  text-decoration:none;
  background-color:#FFA12B;
  display:block;
  position:relative;
  padding:10px 20px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-shadow: 0px 1px 0px #000;
  filter: dropshadow(color=#000, offx=0px, offy=1px);

  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, 0 10px 0 #915100;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

button#yt_input_button:active {
  top:10px;
  background-color:#F78900;

  -webkit-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
  -moz-box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3pxpx 0 #915100;
  box-shadow:inset 0 1px 0 #FFE5C4, inset 0 -3px 0 #915100;
}

button#yt_input_button:after{
  content:"";
  height:100%;
  width:100%;
  padding:4px;
  position: absolute;
  bottom:-15px;
  left:-4px;
  z-index:-1;
  background-color:#2B1800;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}'))
        #includeScript(path = "www/play_button.js")
        # useShinyjs(),
        #extendShinyjs(script = "www/bleep.js")
        #extendShinyjs(script = "www/play_button.js")
      ))
  )
}

#' Add external Resources to the Application
#'
#' This function is internally used to add external
#' resources inside the Shiny application.
#'
#' @import shiny
#' @importFrom golem add_resource_path activate_js favicon bundle_resources
#' @noRd
golem_add_external_resources <- function(){

  add_resource_path(
    'www', app_sys('app/www')
  )

  tags$head(
    favicon(),
    bundle_resources(
      path = app_sys('app/www'),
      app_title = 'soundutilsdev'
    )
    #tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"),
    #tags$script(src = 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js'),
    #tags$script(src = "play_button.js")

    # Add here other external resources
    # for example, you can add shinyalert::useShinyalert()
  )

  reticulate::use_python('/usr/bin/python3')
  reticulate::source_python('R/pytube_local.py')

}