---
output: html_document
editor_options: 
  chunk_output_type: console
---
<style>
.main-container {
  margin-left: 0;
  margin-right: 0;
}
</style>

<img id="expandedImg" style="position: fixed; top: 0; left: 900px; width:50%">

```{r, echo=FALSE, message=FALSE, warning=FALSE}
# put here the whole path to your picture folder
picture_folder <- "./picture/"
# put here the whole path to your sound folder
sound_folder <- "./sound/"

if(!require(tidyverse)){
    install.packages("tidyverse")
    library(tidyverse)
}

if(!require(DT)){
    install.packages("DT")
}

if(!require(fs)){
    install.packages("fs")
}

files <- fs::dir_ls(picture_folder)
files <- str_replace_all(files, picture_folder, "")
files <- str_replace_all(files, ".png$", "")
tibble(files) %>%
  rowwise() %>%
  mutate(sound_files = nth(unlist(str_split(files, "_")), -4),
         tier = nth(unlist(str_split(files, "_")), -3),
         label = paste0(nth(unlist(str_split(files, "_")), -2), nth(unlist(str_split(files, "_")), -1)),
         audio = paste0('<audio controls> <source src="', 
                        if(Sys.info()[1] == "Windows") "file:///",
                        sound_folder, files, '.wav" type="audio/wav"></audio>'),
         pictures = paste0('<img src="', 
                           if(Sys.info()[1] == "Windows") "file:///",
                           picture_folder, files, '.png" style="width:10%" onclick="myFunction(this);">')) %>%
  select(-files) %>%
  DT::datatable(filter = 'top', rownames = FALSE, options = list(pageLength = 50, dom = 'tip'), escape = FALSE)
```

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>