### Installing iOS Dependencies with Bundler and CocoaPods - Shell

Source: https://github.com/chrisbanes/tivi/blob/main/README.md

This snippet demonstrates how to navigate to the project checkout directory and install all Ruby dependencies using `bundle install`, followed by installing CocoaPods dependencies for the iOS project using `pod install`. This is a crucial step before opening the Xcode workspace.

```Shell
cd /path/to/tivi/checkout

# Install all of the Ruby dependencies
bundle install

# Install pods
pod install --project-directory=ios-app/Tivi
```

--------------------------------

### Setting up Ruby Environment for iOS Development - Shell

Source: https://github.com/chrisbanes/tivi/blob/main/README.md

This snippet outlines the steps to install and configure a Ruby environment using rbenv, which is required for managing iOS dependencies via CocoaPods. It installs rbenv, initializes it, downloads Ruby 3.3.4, sets it as the global version, and then installs the bundler gem.

```Shell
brew install rbenv

rbenv init

# Download Ruby 3.3.4 and set it as the global version
rbenv install 3.3.4
rbenv global 3.3.4

# Install bundler
gem install bundler
```

--------------------------------

### Applying Code Style Fixes with Spotless - Shell

Source: https://github.com/chrisbanes/tivi/blob/main/README.md

This command is used to automatically fix code style conflicts detected by the CI server. It leverages the `spotless` Gradle plugin to apply the project's defined code style, ensuring consistency across the codebase.

```Shell
./gradlew spotlessApply
```

--------------------------------

### Configuring API Keys in Gradle Properties - Properties

Source: https://github.com/chrisbanes/tivi/blob/main/README.md

This snippet shows the format for setting API keys for Trakt.tv and TMDb in the `~/.gradle/gradle.properties` file. These keys are essential for the application to connect to external services. Users must replace `<insert>` with their actual client IDs, secrets, and API keys obtained from the respective services.

```Properties
# Get these from Trakt.tv
TIVI_TRAKT_CLIENT_ID=<insert>
TIVI_TRAKT_CLIENT_SECRET=<insert>

# Get this from TMDb
TIVI_TMDB_API_KEY=<insert>
```

--------------------------------

### Managing UI Tabs and Image Overlay in JavaScript

Source: https://github.com/chrisbanes/tivi/blob/main/fastlane/screenshots/screenshots.html

This JavaScript code initializes UI elements, handles tab switching, and implements an image gallery overlay. It dynamically adjusts image display properties for responsiveness and manages event listeners for user interactions like clicking on screenshots to open them in an overlay.

```JavaScript
var overlay = document.getElementById('overlay'); var imageDisplay = document.getElementById('imageDisplay'); var imageInfo = document.getElementById('imageInfo'); var screenshotLink = document.getElementsByClassName('screenshotLink'); window.onload = setup(); function setup() { var i, menu, tabTitles; // Since JS is enabled, show sort menu and hide tab titles menu = document.getElementById("sortMenu"); menu.style.display = "block"; tabTitles = document.getElementsByClassName("tabTitle"); for (i = 0; i < tabTitles.length; i++) { tabTitles[i].style.display = "none"; } doClick(document.getElementById("defaultTab")); } function getCurrentTab() { var i, tabs; tabs = document.getElementsByClassName("tabContent"); for (i = 0; i < tabs.length; i++) { if (tabs[i].style.display != "none") { return i + 1; } } return 1; // fallback } function openTab(evt, tabName) { var i, tabContent, tabLinks; tabs = document.getElementsByClassName("tabContent"); for (i = 0; i < tabs.length; i++) { tabs[i].style.display = "none"; } tabLinks = document.getElementsByClassName("tabLink"); for (i = 0; i < tabLinks.length; i++) { tabLinks[i].className = tabLinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } function doClick(el) { if (document.createEvent) { var evObj = document.createEvent('MouseEvents', true); evObj.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); el.dispatchEvent(evObj); } else if (document.createEventObject) { //IE var evObj = document.createEventObject(); el.fireEvent('onclick', evObj); } } for (index = 0; index < screenshotLink.length; ++index) { screenshotLink[index].addEventListener('click', function(e) { e.preventDefault(); var img = e.target; if (e.target.tagName == 'A') { img = e.target.children[0]; } // beautify var tmpImg = new Image(); tmpImg.src = img.src; imageDisplay.style.height = 'auto'; imageDisplay.style.width = 'auto'; imageDisplay.style.paddingTop = 0; if (window.innerHeight < tmpImg.height) { imageDisplay.style.height = document.documentElement.clientHeight+'px'; } else if (window.innerWidth < tmpImg.width) { imageDisplay.style.width = document.documentElement.clientWidth;+'px'; } else { imageDisplay.style.paddingTop = parseInt((window.innerHeight - tmpImg.height) / 2)+'px'; } imageDisplay.src = img.src; imageDisplay.alt = img.alt; imageDisplay.dataset.counter = img.dataset.counter; imageInfo.innerHTML = '<h3>'+img.alt+'</h3>'; imageInfo.innerHTML += decodeURI(img.src.split("/").pop()); imageInfo.innerHTML += '<br />'+tmpImg.height+'&times;'+tmpImg.width+'px'; overlay.style.display = "block"; }); } imageDisplay.addEventListener('click', function(e) { e.stopPropag
```

--------------------------------

### Styling for Fastlane Snapshot Documentation UI - CSS

Source: https://github.com/chrisbanes/tivi/blob/main/fastlane/screenshots/screenshots.html

This CSS snippet defines the visual presentation for a web page displaying Fastlane screenshots. It includes styles for a sortable menu, device name display, screenshot containers, captions, and an image overlay for detailed viewing. Key properties control layout, colors, fonts, and interactive states like hover effects.

```CSS
* { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } #sortMenu { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; display: none; } #sortMenu button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; } #sortMenu button:hover { background-color: #ddd; } #sortMenu button.active { background-color: #ccc; } .deviceName { display: block; font-size: 30px; padding-bottom: 24px; padding-top: 45px; } .screenshot { cursor: pointer; border: 1px #EEE solid; z-index: 0; } .caption { font-size: 24px; padding-bottom: 24px; padding-top: 30px; } h1, h2 { font-weight: bold; } th { text-align: left; } td { text-align: center; min-width: 200px; } #overlay { position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); z-index:5; width:100%; height:100%; display:none; cursor: zoom-out; text-align: center; } #imageDisplay { height: auto; width: auto; z-index: 10; cursor: pointer; } #imageInfo { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); border-radius: 5px; color: white; margin: 20px; padding: 10px; position: absolute; right: 0; top: 0; width: 250px; z-index: -1; } #imageInfo:hover { z-index: 20; }
```

--------------------------------

### Navigating Next Image in Overlay (JavaScript)

Source: https://github.com/chrisbanes/tivi/blob/main/fastlane/screenshots/screenshots.html

This code snippet, likely part of an event listener for an image click within an overlay, calculates the next image to display based on 'data-tab' and 'data-counter' attributes. It attempts to find the next image element and then calls 'doClick' on its parent node. It includes fallback logic to wrap around to the first image if the next one is not found, or returns false if no images are available.

```JavaScript
ation(); // ! overlay.style.display = "none"; img_tab = parseInt(getCurrentTab()); img_counter = parseInt(e.target.dataset.counter) + 1; try { link = document.body.querySelector('img[data-tab="'+img_tab+'"][data-counter="'+img_counter+'"]').parentNode; } catch (e) { try { link = document.body.querySelector('img[data-tab="'+img_tab+'"][data-counter="0"]').parentNode; } catch (e) { return false; } } doClick(link);
```

--------------------------------

### Handling Keyboard Navigation for Image Gallery (JavaScript)

Source: https://github.com/chrisbanes/tivi/blob/main/fastlane/screenshots/screenshots.html

This 'keyPressed' function handles various keyboard events for image gallery navigation. It prevents default browser actions for navigation keys and uses a 'switch' statement to respond to 'Esc' (to close the overlay), 'Page Down'/'Right arrow' (to advance to the next image), and 'Page Up'/'Left arrow' (to go to the previous image). It then attaches this function as a 'keydown' listener to the document body.

```JavaScript
function keyPressed(e) {
  e = e || window.event;
  var charCode = e.keyCode || e.which;
  switch(charCode) {
    case 27: // Esc
      overlay.style.display = "none";
      break;
    case 34: // Page Down
    case 39: // Right arrow
    case 54: // Keypad right
    case 76: // l
    case 102: // Keypad right
      e.preventDefault();
      doClick(imageDisplay);
      break;
    case 33: // Page up
    case 37: // Left arrow
    case 52: // Keypad left
    case 72: // h
    case 100: // Keypad left
      e.preventDefault();
      document.getElementById('imageDisplay').dataset.counter -= 2; // hacky
      doClick(imageDisplay);
      break;
  }
};
document.body.addEventListener('keydown', keyPressed);
```

--------------------------------

### Closing Image Overlay on Click (JavaScript)

Source: https://github.com/chrisbanes/tivi/blob/main/fastlane/screenshots/screenshots.html

This event listener is attached to the 'overlay' element. When the overlay itself is clicked, its 'display' style property is set to 'none', effectively hiding the overlay and closing the image viewer.

```JavaScript
overlay.addEventListener('click', function(e) { overlay.style.display = "none"; })
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.